/*
Theme Name: Electra Trade Solutions
Theme URI: https://electratradesolutions.com
Author: Electra Trade Solutions
Author URI: https://electratradesolutions.com
Description: Custom WordPress theme for Electra Trade Solutions — a Delhi-based trader, wholesaler and distributor of wires, cables and aluminium conductors. Converted from a static HTML design into a fully editable WordPress theme with Home, About, Products, Applications, Why Electra and Contact pages.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: electra
Tags: custom-menu, featured-images, translation-ready
*/

:root{
  --dark:#0B1017;
  --dark-2:#131B24;
  --dark-3:#1A2530;
  --dark-border:#232F3B;
  --primary:#2FA8E0;
  --primary-dark:#1D7FAF;
  --accent:#F5820D;
  --accent-dark:#D66A00;
  --text:#171B21;
  --muted:#5B6470;
  --background:#FFFFFF;
  --surface:#F5F7F9;
  --surface-2:#EEF1F4;
  --border:#E3E7EB;
  --radius:8px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:var(--background);
  line-height:1.6;
  overflow-x:hidden;
}
h1,h2,h3,h4{font-family:'Manrope',sans-serif; font-weight:800; line-height:1.12; letter-spacing:-0.015em;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
ul{list-style:none;}
.wrap{max-width:1240px; margin:0 auto; padding:0 32px;}
.eyebrow{
  font-family:'Inter',sans-serif; font-weight:700; font-size:12.5px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); display:inline-block;}
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:15px 28px; border-radius:var(--radius);
  font-weight:600; font-size:15px; cursor:pointer; border:1.5px solid transparent; transition:all .22s ease;
  white-space:nowrap;
}
.btn-accent{background:var(--accent); color:#fff; box-shadow:0 8px 24px rgba(245,130,13,0.28);}
.btn-accent:hover{background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 12px 28px rgba(245,130,13,0.36);}
.btn-outline{border-color:rgba(255,255,255,0.3); color:#fff;}
.btn-outline:hover{border-color:#fff; background:rgba(255,255,255,0.08);}
.btn-outline-dark{border-color:var(--border); color:var(--text);}
.btn-outline-dark:hover{border-color:var(--primary); color:var(--primary-dark); background:var(--surface);}
.btn-sm{padding:10px 18px; font-size:13.5px;}

.reveal{opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1);}
.reveal.show{opacity:1; transform:translateY(0);}
.stagger .reveal:nth-child(1){transition-delay:0s;}
.stagger .reveal:nth-child(2){transition-delay:.08s;}
.stagger .reveal:nth-child(3){transition-delay:.16s;}
.stagger .reveal:nth-child(4){transition-delay:.24s;}

/* ===== HEADER ===== */
header#siteHeader{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:linear-gradient(180deg, rgba(11,16,23,0.55), transparent);
  transition:background .3s ease, box-shadow .3s ease, padding .3s ease, backdrop-filter .3s ease;
  padding:24px 0;
}
header#siteHeader.scrolled{
  background:rgba(11,16,23,0.85); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  box-shadow:0 4px 30px rgba(0,0,0,0.3); padding:14px 0; border-bottom:1px solid var(--dark-border);
}
.header-row{display:flex; align-items:center; justify-content:space-between;}
.logo{display:flex; align-items:center; gap:12px; color:#fff; font-family:'Manrope',sans-serif; font-weight:800; font-size:17.5px;}
.logo img{width:42px; height:42px; border-radius:50%; flex-shrink:0; object-fit:cover;}
.logo small{display:block; font-family:'Inter',sans-serif; font-weight:500; font-size:11px; color:#8A95A1; letter-spacing:0.04em; margin-top:1px;}
.main-navigation{display:flex; align-items:center; gap:36px;}
.main-navigation ul{display:flex; align-items:center; gap:36px; list-style:none;}
.main-navigation a{color:#DCE3EA; font-size:14.5px; font-weight:500; transition:color .2s; position:relative;}
.main-navigation a::after{content:""; position:absolute; left:0; bottom:-6px; width:0; height:1.5px; background:var(--accent); transition:width .25s;}
.main-navigation a:hover, .main-navigation .current-menu-item > a{color:#fff;}
.main-navigation a:hover::after, .main-navigation .current-menu-item > a::after{width:100%;}
.header-cta{display:flex; align-items:center; gap:20px;}
.header-phone{color:#fff; font-size:13.5px; font-weight:600; display:flex; align-items:center; gap:7px;}
.hamburger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.hamburger span{width:24px; height:2px; background:#fff; display:block;}
.main-navigation.nav-open{
  display:flex; position:absolute; top:100%; left:0; right:0; background:rgba(11,16,23,0.97);
  flex-direction:column; padding:20px 32px; gap:0;
}
.main-navigation.nav-open ul{flex-direction:column; align-items:flex-start; gap:0; width:100%;}
.main-navigation.nav-open li{width:100%; padding:12px 0; border-bottom:1px solid var(--dark-border);}

/* page hero (inner pages) */
.page-hero{background:var(--dark); padding:190px 0 70px; position:relative; overflow:hidden;}
.page-hero::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 0%, rgba(47,168,224,0.16), transparent 55%);}
.page-hero .wrap{position:relative; z-index:1;}
.page-hero .eyebrow{color:var(--accent);}
.page-hero h1{color:#fff; font-size:42px; margin-bottom:14px; max-width:760px;}
.page-hero p{color:#B7C2CC; font-size:16.5px; max-width:640px;}
.breadcrumb{color:#8A95A1; font-size:13px; margin-bottom:20px; display:flex; gap:8px; align-items:center;}
.breadcrumb a{color:#8A95A1;}
.breadcrumb a:hover{color:var(--primary);}

/* ===== HERO — banner slideshow ===== */
.hero{position:relative; width:100%; overflow:hidden; background:var(--dark);}
.hero-slider{position:relative; width:100%; aspect-ratio:3200/1200;}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1s ease;}
.hero-slide.is-active{opacity:1; z-index:1;}
.hero-slide img{width:100%; height:100%; object-fit:cover; display:block;}
.hero-slider-nav{position:absolute; left:20px; right:20px; bottom:18px; z-index:4;
  display:flex; align-items:center; justify-content:space-between; gap:12px;}
.hero-dots{display:flex; gap:7px;}
.hero-dot{width:20px; height:3px; border-radius:2px; background:rgba(255,255,255,0.4); cursor:pointer;
  transition:background .25s, width .25s; border:none; padding:0;}
.hero-dot.is-active{background:var(--accent); width:28px;}
.hero-nav-btn{width:34px; height:34px; border-radius:50%; background:rgba(11,16,23,0.5); border:1px solid rgba(255,255,255,0.22);
  color:#fff; font-size:18px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer;
  transition:background .2s, transform .2s; backdrop-filter:blur(6px);}
.hero-nav-btn:hover{background:var(--accent); border-color:var(--accent); transform:translateY(-1px);}
@media (max-width:640px){
  .hero-slider{aspect-ratio:3200/1600;}
  .page-hero{padding:150px 0 50px;}
  .page-hero h1{font-size:30px;}
}

/* ===== TRUST STRIP ===== */
.trust-strip{background:var(--dark-2); border-bottom:1px solid var(--dark-border);}
.trust-grid{display:grid; grid-template-columns:repeat(4,1fr);}
.trust-item{padding:32px 30px; border-right:1px solid var(--dark-border); display:flex; align-items:center; gap:16px;}
.trust-item:last-child{border-right:none;}
.trust-item .ic{width:38px; height:38px; border-radius:8px; background:rgba(47,168,224,0.12); display:flex; align-items:center; justify-content:center; color:var(--primary); flex-shrink:0;}
.trust-item .num{font-family:'Manrope',sans-serif; font-weight:800; font-size:15.5px; color:#fff;}
.trust-item .lbl{font-size:12.5px; color:#8A95A1; margin-top:2px;}

section{padding:110px 0;}
.section-head{max-width:640px; margin-bottom:60px;}
.section-head h2{font-size:40px; margin-bottom:16px;}
.section-head p{color:var(--muted); font-size:16.5px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.section-head.center .eyebrow{justify-content:center;}

.current-divider{position:relative; height:1px; width:100%; background:var(--border); margin:0 auto; overflow:visible;}
.current-divider::after{
  content:""; position:absolute; top:-1.5px; left:-14%; width:14%; height:4px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent); animation:travel 7s linear infinite;
}
@keyframes travel{ 0%{left:-14%;} 100%{left:100%;} }

/* ===== ABOUT ===== */
.about{display:grid; grid-template-columns:0.85fr 1.15fr; gap:76px; align-items:center;}
.about-visual{position:relative;}
.about-img-main{position:relative; border-radius:12px; overflow:hidden; aspect-ratio:4/5; box-shadow:0 30px 60px -20px rgba(11,16,23,0.35);}
.about-img-main img{width:100%; height:100%; object-fit:cover;}
.about-img-main::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 50%, rgba(11,16,23,0.6));}
.about-img-float{
  position:absolute; width:46%; aspect-ratio:1/1; bottom:-36px; left:-38px; border-radius:10px; overflow:hidden;
  border:5px solid #fff; box-shadow:0 20px 40px -12px rgba(11,16,23,0.3);
}
.about-img-float img{width:100%; height:100%; object-fit:cover;}
.about-badge{
  position:absolute; top:20px; right:20px; background:rgba(11,16,23,0.82); backdrop-filter:blur(6px);
  color:#fff; padding:10px 16px; border-radius:30px; font-size:12.5px; font-weight:600; letter-spacing:0.02em;
}
.about-body h2{font-size:38px; margin-bottom:22px;}
.about-body p{color:var(--muted); margin-bottom:16px; font-size:16px;}
.about-list{margin:28px 0 32px; display:grid; gap:14px;}
.about-list li{display:flex; gap:12px; font-size:15px; color:var(--text); align-items:flex-start;}
.about-list li .tick{
  width:20px; height:20px; border-radius:50%; background:rgba(245,130,13,0.12); color:var(--accent);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; font-size:11px; font-weight:800;
}

/* ===== PRODUCT CATEGORIES — bento layout ===== */
.categories{background:var(--surface);}
.cat-bento{display:grid; grid-template-columns:1.3fr 1fr 1fr; grid-template-rows:auto auto; gap:22px;}
.cat-card{
  position:relative; border-radius:12px; overflow:hidden; color:#fff; min-height:260px;
  display:flex; flex-direction:column; justify-content:flex-end; transition:transform .3s ease, box-shadow .3s ease;
}
.cat-card:hover{transform:translateY(-6px); box-shadow:0 24px 50px -16px rgba(11,16,23,0.35);}
.cat-card.featured{grid-row:span 2; min-height:558px;}
.cat-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.cat-card:hover img{transform:scale(1.06);}
.cat-card::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(11,16,23,0.15) 30%, rgba(11,16,23,0.92) 100%); z-index:1;}
.cat-count{
  position:absolute; top:18px; right:18px; z-index:2; background:rgba(11,16,23,0.55); backdrop-filter:blur(4px);
  font-size:11.5px; padding:5px 11px; border-radius:20px; font-weight:600;
}
.cat-body{position:relative; z-index:2; padding:26px;}
.cat-body h3{font-size:19px; margin-bottom:8px;}
.cat-card.featured h3{font-size:25px;}
.cat-body p{font-size:13.5px; color:#C3CCD4; margin-bottom:16px; max-width:320px;}
.cat-link{font-size:13px; font-weight:700; color:var(--accent); display:flex; align-items:center; gap:6px;}

/* product detail cards (Products page) */
.product-detail-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:28px;}
.product-detail-card{background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; transition:box-shadow .25s, transform .25s;}
.product-detail-card:hover{box-shadow:0 24px 50px -20px rgba(11,16,23,0.25); transform:translateY(-4px);}
.product-detail-card .pdc-img{aspect-ratio:16/10; overflow:hidden;}
.product-detail-card .pdc-img img{width:100%; height:100%; object-fit:cover;}
.product-detail-card .pdc-body{padding:26px;}
.product-detail-card h3{font-size:20px; margin-bottom:10px;}
.product-detail-card p{color:var(--muted); font-size:14.5px; margin-bottom:14px;}
.spec-list{list-style:none; display:grid; gap:8px;}
.spec-list li{font-size:13.5px; color:var(--text); display:flex; gap:8px;}
.spec-list li .tick{color:var(--accent); font-weight:800;}

/* ===== APPLICATIONS strip ===== */
.applications{background:var(--dark);}
.applications .section-head h2, .applications .section-head p{color:#fff;}
.applications .section-head p{color:#8A95A1;}
.app-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.app-card{position:relative; border-radius:10px; overflow:hidden; aspect-ratio:3/3.6;}
.app-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.app-card:hover img{transform:scale(1.07);}
.app-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(11,16,23,0.9)); z-index:1;}
.app-info{position:absolute; left:22px; right:22px; bottom:22px; z-index:2;}
.app-info .tag{font-size:11px; text-transform:uppercase; letter-spacing:0.1em; color:var(--primary); font-weight:700; margin-bottom:6px; display:block;}
.app-info h4{font-size:19px; color:#fff; margin-bottom:6px;}
.app-info p{font-size:13px; color:#B7C2CC;}

/* applications page: full detail rows */
.app-detail-row{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; padding:60px 0; border-bottom:1px solid var(--border);}
.app-detail-row:last-child{border-bottom:none;}
.app-detail-row.reverse .app-detail-img{order:2;}
.app-detail-img{border-radius:12px; overflow:hidden; aspect-ratio:4/3;}
.app-detail-img img{width:100%; height:100%; object-fit:cover;}
.app-detail-text h3{font-size:26px; margin-bottom:14px;}
.app-detail-text p{color:var(--muted); margin-bottom:14px;}

/* ===== WHY ELECTRA ===== */
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--border); border:1px solid var(--border); border-radius:12px; overflow:hidden;}
.why-item{padding:36px 30px; background:#fff;}
.why-icon{
  width:48px; height:48px; border-radius:10px; background:var(--surface); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--primary-dark);
}
.why-item h4{font-size:16.5px; margin-bottom:9px;}
.why-item p{font-size:14px; color:var(--muted);}

/* ===== PROCESS ===== */
.process{background:var(--dark); color:#fff; position:relative; overflow:hidden;}
.process-bg{position:absolute; inset:0; opacity:0.14;}
.process-bg img{width:100%; height:100%; object-fit:cover;}
.process > .wrap{position:relative; z-index:1;}
.process .section-head p{color:#8A95A1;}
.process .section-head h2{color:#fff;}
.process-row{display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative;}
.process-row::before{content:""; position:absolute; top:26px; left:5%; right:5%; height:1px; background:var(--dark-border);}
.process-step{padding:0 22px 0 0; position:relative;}
.step-num{
  width:54px; height:54px; border-radius:50%; background:var(--dark-2); border:1.5px solid var(--dark-border);
  display:flex; align-items:center; justify-content:center; font-family:'Manrope',sans-serif; font-weight:800;
  color:var(--accent); margin-bottom:24px; position:relative; z-index:2; font-size:16px;
}
.process-step h4{font-size:16.5px; margin-bottom:9px; color:#fff;}
.process-step p{font-size:13.5px; color:#8A95A1;}

/* ===== RFQ CTA ===== */
.rfq-section{padding:70px 0;}
.rfq{
  position:relative; color:#fff; border-radius:18px; overflow:hidden; padding:70px 64px;
  display:flex; align-items:center; justify-content:space-between; gap:40px;
}
.rfq-bg{position:absolute; inset:0; z-index:0;}
.rfq-bg img{width:100%; height:100%; object-fit:cover;}
.rfq-bg::after{content:""; position:absolute; inset:0; background:linear-gradient(110deg, rgba(11,16,23,0.95) 30%, rgba(11,16,23,0.6) 75%);}
.rfq-text{position:relative; z-index:2; max-width:520px;}
.rfq-text h2{font-size:33px; margin-bottom:14px; color:#fff;}
.rfq-text p{color:#C3CCD4; font-size:15.5px;}
.rfq-actions{position:relative; z-index:2; display:flex; gap:14px; flex-shrink:0; flex-wrap:wrap;}

/* ===== CONTACT PAGE ===== */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start;}
.contact-form{display:grid; gap:18px;}
.contact-form label{font-size:13.5px; font-weight:600; margin-bottom:6px; display:block;}
.contact-form input, .contact-form select, .contact-form textarea{
  width:100%; padding:13px 15px; border:1.5px solid var(--border); border-radius:var(--radius);
  font-family:'Inter',sans-serif; font-size:14.5px; color:var(--text); background:#fff;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{
  outline:none; border-color:var(--primary);
}
.contact-form textarea{min-height:130px; resize:vertical;}
.contact-form button{justify-self:start;}
.contact-form-notice{padding:14px 18px; border-radius:var(--radius); font-size:14px; margin-bottom:18px;}
.contact-form-notice.success{background:rgba(47,168,224,0.1); color:var(--primary-dark); border:1px solid rgba(47,168,224,0.3);}
.contact-form-notice.error{background:rgba(245,130,13,0.08); color:var(--accent-dark); border:1px solid rgba(245,130,13,0.3);}
.contact-info-card{background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:32px;}
.contact-info-card h3{font-size:18px; margin-bottom:18px;}
.contact-info-item{display:flex; gap:14px; margin-bottom:20px; align-items:flex-start;}
.contact-info-item .ic{width:38px; height:38px; border-radius:8px; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--primary-dark); flex-shrink:0;}
.contact-info-item .txt{font-size:14.5px; color:var(--muted);}
.contact-info-item .txt strong{display:block; color:var(--text); font-size:14.5px; margin-bottom:2px;}
.contact-map{border-radius:12px; overflow:hidden; margin-top:24px; border:1px solid var(--border);}
.contact-map iframe{width:100%; height:280px; border:0; display:block;}

/* ===== FOOTER ===== */
footer#siteFooter{background:var(--dark); color:#B7C2CC; padding:76px 0 0;}
.footer-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:56px; border-bottom:1px solid var(--dark-border);}
.footer-brand .logo{margin-bottom:18px;}
.footer-brand p{font-size:14px; color:#8A95A1; max-width:280px;}
.footer-col h5{color:#fff; font-size:14px; font-weight:700; margin-bottom:20px; font-family:'Manrope',sans-serif; letter-spacing:0.02em;}
.footer-col ul{display:grid; gap:13px;}
.footer-col a{font-size:14px; color:#8A95A1; transition:color .2s;}
.footer-col a:hover{color:var(--primary);}
.footer-contact li{font-size:14px; color:#8A95A1; display:flex; gap:10px; margin-bottom:15px; align-items:flex-start;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding:26px 0; font-size:13px; color:#5E6C79; flex-wrap:wrap; gap:12px;}
.footer-bottom a{color:#8A95A1;}

/* generic page content (WP editor content on inner pages) */
.entry-content{max-width:820px;}
.entry-content p{color:var(--muted); margin-bottom:16px; font-size:16px;}
.entry-content h2{font-size:28px; margin:32px 0 16px;}
.entry-content h3{font-size:20px; margin:24px 0 12px;}
.entry-content ul{list-style:disc; padding-left:22px; margin-bottom:16px; color:var(--muted);}
.entry-content a{color:var(--primary-dark); text-decoration:underline;}

@media (max-width:980px){
  .main-navigation, .header-phone{display:none;}
  .hamburger{display:flex;}
  .main-navigation.nav-open{display:flex;}
  .about, .why-grid, .process-row, .app-grid, .product-detail-grid, .contact-grid, .app-detail-row{grid-template-columns:1fr 1fr;}
  .cat-bento{grid-template-columns:1fr 1fr;}
  .cat-card.featured{grid-column:span 2; grid-row:span 1; min-height:300px;}
  .trust-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .rfq{flex-direction:column; align-items:flex-start; padding:48px 30px;}
  .about-img-float{display:none;}
}
@media (max-width:620px){
  .wrap{padding:0 20px;}
  .about, .cat-bento, .why-grid, .process-row, .trust-grid, .footer-grid, .app-grid, .product-detail-grid, .contact-grid, .app-detail-row{grid-template-columns:1fr;}
  .cat-card.featured{grid-column:span 1;}
  .process-row::before{display:none;}
  .hero-slider-nav{left:12px; right:12px; bottom:12px;}
  section{padding:76px 0;}
  .why-grid{border-radius:0; margin:0 -20px; width:calc(100% + 40px);}
  .app-detail-row.reverse .app-detail-img{order:0;}
}