/*!
Theme Name: Power Electrician Service Nepal Pvt. Ltd.
Theme URI: http://underscores.me/
Author: Web Creation
Author URI: https://www.webcreationnepal.com/
Description: Power Electrician Service Nepal Pvt. Ltd. is your trusted partner for safe, smart, and reliable electrical solutions in Nepal. Located in Bagbazar, Kathmandu, we specialize in professional electrical installation, repair, and maintenance services for homes, offices, and industries.
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: power_electrician
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Power Electrician Service Nepal Pvt. Ltd. is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */


/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}

/*own css*/
/* SECTION CONTAINER */
.hero-slider-section {
  display: flex;
  min-height: 80vh;
  width: 100%;
  overflow: hidden;
}

/* LEFT SIDE: BRAND TEXT */
.hero-text-side {
  flex: 1.1;
  background: linear-gradient(135deg, #1d036b 0%, #3508b3 50%, #4a11e8 100%);
  color: #ffffff;
  padding: 40px 0 20px 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
}

.glow-effect {
  position: absolute;
  top: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: rgba(255, 184, 0, 0.2);
  filter: blur(120px);
  border-radius: 50%;
  z-index: -1;
}

.sub-heading {
  display: inline-block;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #ffb800;
  font-size: 14px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 30px;
  margin-bottom: 20px;
  width: fit-content;
}

.main-heading {
  font-size: 40px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 20px;
}

.highlight-text {
  color: #ffb800;
}

.hero-description {
  font-size: 15px;
  line-height: 1.6;
  color: #e2d9ff;
  margin-bottom: 35px;
  max-width: 500px;
}

.cta-group {
  display: flex;
  gap: 18px;
  margin-bottom: 40px;
}

.btn {
  padding: 14px 28px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
}

.btn-accent {
  background-color: #ffb800 !important;
  color: #1a045c !important;
}

.btn-accent:hover {
  background-color: #e6a600 !important;
}

.btn-outline {
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}

.trust-features {
  display: flex;
  gap: 20px;
  font-size: 13px;
  font-weight: 600;
  color: #ffb800;
}

/* RIGHT SIDE: FULL-HEIGHT SLIDER */
.hero-slider-side {
  flex: 1;
  position: relative;
  overflow: hidden;
  margin-left: -5%; /* Seamless overlap with angled left section */
}

.slides-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}

.slide.active {
  opacity: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slide-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.85));
  color: #ffffff;
  padding: 25px 30px 20px;
  font-size: 15px;
  font-weight: 600;
}

/* NAVIGATION BUTTONS */
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.8);
  color: #3508b3;
  border: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  z-index: 10;
  transition: all 0.2s ease;
}

.slider-btn:hover {
  background: #ffb800;
  color: #1a045c;
}

.prev-btn { left: 40px; }
.next-btn { right: 30px; }

/* DOTS */
.slider-dots {
  position: absolute;
  bottom: 25px;
  right: 30px;
  display: flex;
  gap: 8px;
  z-index: 10;
}

.dot {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dot.active {
  background: #ffb800;
  width: 26px;
  border-radius: 10px;
}

@media (max-width: 992px) {
  .hero-slider-section { flex-direction: column; }
  .hero-text-side { clip-path: none; padding: 40px 20px; }
  .hero-slider-side { margin-left: 0; min-height: 350px; }
  .prev-btn { left: 15px; }
}

.divider {
  width: 1px;
  height: 60px;
  background: #ddd;
}

@media (max-width: 768px) {
  .divider {
    display: none;
  }
}


/* --- GLOBAL COLORS --- */
:root {
  --brand-purple: #3508b3;
  --brand-purple-dark: #1d036b;
  --brand-gold: #ffb800;
  --text-dark: #1e1b2e;
  --text-gray: #555555;
  --bg-light: #f8f9fc;
}

/* --- ABOUT SECTION --- */
.about-section {
  padding: 80px 20px;
  background-color: #ffffff;
}

.about-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 50px;
  align-items: center;
}

/* About Left Image Styling */
.about-image-wrapper {
  flex: 1;
  position: relative;
}

.about-image-card {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(53, 8, 179, 0.15);
  border: 4px solid var(--brand-purple);
}

.about-image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Floating Experience Badge */
.experience-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background: linear-gradient(135deg, var(--brand-purple), var(--brand-purple-dark));
  color: #ffffff;
  padding: 20px 25px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border-left: 5px solid var(--brand-gold);
  display: flex;
  align-items: center;
  gap: 15px;
  max-width: 250px;
}

.exp-number {
  font-size: 36px;
  font-weight: 800;
  color: var(--brand-gold);
}

.exp-text {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
}

/* About Right Content */
.about-content {
  flex: 1.2;
}

.section-tag {
  color: var(--brand-purple);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
  display: inline-block;
  margin-bottom: 10px;
}

.section-title {
  font-size: 34px;
  color: var(--text-dark);
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.3;
}

.about-lead {
  font-size: 16px;
  color: var(--text-dark);
  font-weight: 500;
  margin-bottom: 15px;
  line-height: 1.6;
}

.about-body {
  font-size: 15px;
  color: var(--text-gray);
  margin-bottom: 25px;
  line-height: 1.6;
}

.about-features {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 30px;
}

.feature-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  background: var(--bg-light);
  padding: 15px 20px;
  border-radius: 10px;
}

.feature-box .icon {
  font-size: 24px;
}

.feature-box h4 {
  font-size: 16px;
  color: var(--text-dark);
  margin-bottom: 2px;
}

.feature-box p {
  font-size: 13px;
  color: var(--text-gray);
}

.btn-about {
  display: inline-block;
  background-color: var(--brand-purple);
  color: #ffffff;
  padding: 14px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  transition: all 0.3s ease;
}

.btn-about:hover {
  background-color: var(--brand-purple-dark);
  box-shadow: 0 6px 15px rgba(53, 8, 179, 0.3);
  color: #fff;
}

/* --- COUNTER SECTION --- */
.counter-section {
  background: linear-gradient(135deg, #1d036b 0%, #3508b3 100%);
  padding: 60px 20px;
  color: #ffffff;
}

.counter-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.counter-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.counter-box {
  flex: 1;
  text-align: center;
  padding: 15px;
  min-width: 200px;
}

.counter-box h2 {
  font-size: 42px;
  font-weight: 800;
  color: #ffb800; /* Gold Brand Accent */
  margin-bottom: 8px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
}

.counter-box h2 .plus {
  color: #ffb800;
}

.counter-box p {
  font-size: 15px;
  font-weight: 500;
  color: #e2d9ff;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Vertical Divider Between Counters */
.counter-wrapper .divider {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
}

/* Responsive Mobile Fixes */
@media (max-width: 768px) {
  .counter-wrapper {
    flex-direction: column;
    gap: 30px;
  }

  .counter-wrapper .divider {
    width: 60%;
    height: 1px;
    margin: 0 auto;
  }
}

/* --- SERVICES SECTION WITH IMAGES --- */
.services-section {
  padding: 80px 20px;
  background-color: #f8f9fc;
}

.services-header {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 20px auto;
}

.services-header .section-tag {
  color: #3508b3;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1px;
}

.services-header h2 {
  font-size: 32px;
  color: #1e1b2e;
  font-weight: 800;
  margin-top: 5px;
}

.services-header p {
  color: #555555;
  margin-top: 10px;
  font-size: 15px;
}

.services-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

/* Card Styling */
.service-card {
  background: #ffffff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-bottom: 4px solid #3508b3;
  display: flex;
  flex-direction: column;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 30px rgba(53, 8, 179, 0.15);
}

/* Image Container & Hover Zoom Effect */
.service-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.service-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-card:hover .service-image img {
  transform: scale(1.08);
}

/* Badges on Top of Images */
.service-badge {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #3508b3;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 20px;
}

.service-badge.emergency {
  background-color: #ffb800;
  color: #1d036b;
}

/* Card Content Area */
.service-body {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.service-icon {
  font-size: 28px;
  background-color: #f0ecff;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin-top: -50px;
  margin-bottom: 15px;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.service-body h3 {
  font-size: 20px;
  color: #1e1b2e;
  font-weight: 700;
  margin-bottom: 10px;
}

.service-body p {
  font-size: 14px;
  color: #555555;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.service-link {
  color: #3508b3;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  display: inline-block;
  transition: color 0.2s ease;
}

.service-link:hover {
  color: #ffb800;
}

.footer-style-two {
  background-color: #3508b3 !important;
}
.mt-30 {
    margin-top: 30px;
}
/* --- RESPONSIVE MOBILE FIXES --- */
@media (max-width: 992px) {
  .about-container {
    flex-direction: column;
  }

  .experience-badge {
    bottom: 10px;
    right: 10px;
  }

  
}

/* --- SERVICE DETAIL HERO --- */
.service-detail-hero {
  background: linear-gradient(135deg, #1d036b 0%, #3508b3 100%);
  color: #ffffff;
  padding: 60px 20px;
  text-align: center;
}

.service-detail-hero .badge {
  background: rgba(255, 184, 0, 0.2);
  color: #ffb800;
  border: 1px solid #ffb800;
  padding: 5px 15px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
}

.service-detail-hero h1 {
  font-size: 36px;
  font-weight: 800;
  margin: 15px 0 10px;
}

.service-detail-hero p {
  color: #e2d9ff;
  font-size: 16px;
  max-width: 650px;
  margin: 0 auto;
}

/* --- LAYOUT STRUCTURE --- */
.service-detail-section {
  padding: 60px 20px;
  background-color: #f8f9fc;
}

.service-layout {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 40px;
}

.service-main-content {
  flex: 2;
  background: #ffffff;
  padding: 35px;
  border-radius: 14px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.service-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 25px;
}

/* --- FEATURED IMAGE --- */
.service-featured-image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 25px;
  border: 3px solid #3508b3;
}

.service-featured-image img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  display: block;
}

.image-tag {
  position: absolute;
  bottom: 15px;
  left: 15px;
  background: #3508b3;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 6px;
}

.service-detail-section .sub-heading {
  font-size: 22px;
  color: #1e1b2e;
  margin: 30px 0 15px;
  border-left: 4px solid #ffb800;
  padding-left: 12px;
}

/* --- FEATURES GRID --- */
.service-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.feature-card {
  background: #f8f9fc;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #e8e5f5;
}

.feature-card .icon {
  font-size: 28px;
}

.feature-card h4 {
  font-size: 16px;
  color: #1e1b2e;
  margin: 10px 0 5px;
}

.feature-card p {
  font-size: 13px;
  color: #666;
  line-height: 1.5;
}

/* --- PROCESS STEPS --- */
.process-steps {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.step-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: #f8f9fc;
  padding: 18px;
  border-radius: 10px;
}

.step-num {
  font-size: 20px;
  font-weight: 800;
  color: #ffffff;
  background: #3508b3;
  padding: 8px 14px;
  border-radius: 8px;
}

/* --- SIDEBAR STYLING --- */
.sidebar-card {
  background: #ffffff;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.booking-card {
  border-top: 5px solid #ffb800;
  background: linear-gradient(180deg, #ffffff 0%, #f4f0ff 100%);
}

.booking-card h3 {
  font-size: 20px;
  color: #1e1b2e;
  margin-bottom: 8px;
}

.booking-card p {
  font-size: 14px;
  color: #555;
  margin-bottom: 20px;
}

.btn {
  display: block;
  text-align: center;
  padding: 14px;
  border-radius: 8px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 12px;
  transition: transform 0.2s ease;
}

.btn-call {
  background: #ffb800;
  color: #1a045c;
}

.btn-whatsapp {
  background: #25d366;
  color: #ffffff;
}

.btn:hover {
  transform: translateY(-2px);
}

.guarantee-list {
  list-style: none;
  padding: 0;
  margin-top: 15px;
  font-size: 13px;
  color: #3508b3;
  font-weight: 600;
}

.guarantee-list li {
  margin-bottom: 6px;
}

/* Services Navigation */
.services-list-card ul {
  list-style: none;
  padding: 0;
}

.services-list-card li a {
  display: block;
  padding: 12px 15px;
  border-radius: 6px;
  color: #444;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.2s ease;
}

.services-list-card li.active a,
.services-list-card li a:hover {
  background: #3508b3;
  color: #ffffff;
}

/* --- RESPONSIVE MOBILE FIXES --- */
@media (max-width: 992px) {
  .service-layout {
    flex-direction: column;
  }
}