/* =====================================================================
   aeps — media.css
   Responsive overrides ONLY. No desktop/base styling here.
   Bootstrap 5 breakpoints:
     1200px+   (xl) base desktop
     992–1199  (lg)
     768–991   (md)
     576–767   (sm)
     0–575     (xs)
   ===================================================================== */

/* Laptop (small) */

@media (max-width: 1440px) {
	.stat-card .stat-value {
		font-size: 35px;
	}

	.stats-grid {
		gap: 50px;
	}

	.stat-card {
		padding: 2rem;
	}
}

@media (max-width: 1370px) {

	/* Tighten body copy on laptop screens (p, li, inline links). */
	:root {
		--text-size: 1rem;
	}

	.hero-inner {
		padding-top: 165px;
	}

	.site-brand .brand-name {
		padding-left: 100px;
	}

	.site-brand .brand-logo {
		height: 78px;
		width: 78px;
		top: 0;
		bottom: 0;
		margin: auto;
		left: auto;
	}
}

@media (min-width: 1200px) {
	.site-header.is-sticky .site-brand .brand-logo {
		width: 75px;
		height: 75px;
	}

	.site-header.is-sticky .site-brand .brand-name {
		padding-left: 100px;
	}

}

@media (max-width:1300px) {
	.site-brand .brand-name {
		font-size: 1.2rem;
		padding-left: 75px;
	}

	.site-brand .brand-logo {
		height: 60px;
		width: 60px;
		/* top: 5px; */
	}

	.header-inner {
		min-height: 94px;
		justify-content: space-between;
	}

	.site-brand {
		/* flex-grow: unset; */
	}

	/* Same squeeze as the <=1199.98px block below, pulled up to 1300px:
	   without it, the full-size nav + phone number overflow the viewport
	   between 1200-1300px (nav-link/gap/phone sizes below aren't reduced
	   until 1199.98px, but the header is already tight at 1300px). */
	.primary-nav .nav-link {
		padding: 0.5rem 0.3rem;
		font-size: 1.1rem;
	}

	.primary-nav .aeps-menu {
		gap: 0;
	}

	.header-actions {
		gap: 0.9rem;
	}

	.header-call .phone {
		font-size: 1.2rem;
	}
}

/* ===============================================================
   Large desktops down (max-width: 1199.98px)
   =============================================================== */
@media (max-width: 1199.98px) {
	:root {
		--h1-size: 2.75rem;
		--h2-size: 2.1rem;
		--h3-size: 1.5rem;
		--h4-size: 1.2rem;
		--section-spacing: 70px;
	}

	/* Header: tighten so the full single-row nav still fits before the
	   mobile toggler takes over at <= 991px. */
	.site-brand .brand-name {
		font-size: .9rem;
		padding: 0.5rem 0;
	}

	.site-brand img,
	.site-brand .brand-logo {
		width: 56px;
		height: 56px;
		position: static;
	}

	.primary-nav .nav-link {
		padding: 0.5rem 0.3rem;
		font-size: 1.1rem;
	}

	.header-actions {
		gap: 0.9rem;
	}
.primary-nav .sub-menu .nav-link, .primary-nav .dropdown-item {
    font-size: 0.8rem;
}
	.header-call .phone {
		font-size: 1.2rem;
	}

	.projects-gallery {
		grid-template-columns: repeat(3, 1fr);
	}

	.primary-nav .aeps-menu {
		gap: 0;
	}

	.hero-inner {
	}

	.stats-grid {
		gap: 75px;
	}
}


@media (max-width: 1030px){
   footer .col-md-6 {
        flex: 0 0 auto;
        width: 50%;
    }    
    section.highlights-section .row {
    gap: 30px;
}

section.highlights-section .col-lg-6 {
    width: 100%;
}
    .site-brand {
        flex-grow: unset;
    }
}

/* ===============================================================
   Tablets / collapsed nav (max-width: 991.98px)
   =============================================================== */
@media (max-width: 1030px) {
	:root {
		--h1-size: 2.5rem;
		--h2-size: 1.9rem;
		--h3-size: 1.4rem;
		--section-spacing: 60px;
	}

	/* Header: switch to mobile nav */
	.header-inner {
		flex-wrap: wrap;
		min-height: 72px;
		gap: 0;
		justify-content: flex-start;
	}

	.navbar-toggler.aeps-toggler {
		display: inline-flex;
		order: 3;
		margin-left: 1rem;
	}

	.header-actions {
		order: 2;
		margin-left: auto;
	}

	.primary-nav {
		order: 4;
		flex-basis: 100%;
		/* Collapsed by default. Animating grid-template-rows 0fr→1fr lets the
		   menu slide open/closed smoothly without measuring its height in JS. */
		display: grid;
		grid-template-rows: 0fr;
		opacity: 0;
		visibility: hidden;
		transition: grid-template-rows 0.35s ease, opacity 0.3s ease, visibility 0s linear 0.35s;
	}

	.primary-nav.is-open {
		grid-template-rows: 1fr;
		opacity: 1;
		visibility: visible;
		transition: grid-template-rows 0.35s ease, opacity 0.3s ease, visibility 0s linear 0s;
	}

	.primary-nav .aeps-menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
		min-height: 0;
		overflow: hidden;
		padding: 0;
	}

	.primary-nav.is-open .aeps-menu {
		padding: 0.5rem 0 1rem;
	}

	.primary-nav .nav-item {
		width: 100%;
	}

	.primary-nav .nav-item.active>.nav-link::after,
	.primary-nav .nav-link.active::after,
	.primary-nav .current-menu-item>.nav-link::after,
	.primary-nav .current-menu-ancestor>.nav-link::after {
		display: none;
	}

	.primary-nav .menu-item-has-children::after,
	.primary-nav .dropdown::after {
		display: none;
	}

	.primary-nav .nav-link {
		display: flex;
		width: 100%;
		min-height: 46px;
		align-items: center;
		padding: 0.7rem 3rem 0.7rem 0;
	}

	.primary-nav .menu-item-has-children>.nav-link,
	.primary-nav .dropdown-toggle {
		padding-right: 3rem;
	}

	.primary-nav .menu-item-has-children>.nav-link::before,
	.primary-nav .dropdown-toggle::after {
		display: none;
	}

	.primary-nav .submenu-toggle {
		position: absolute;
		top: 0.2rem;
		right: 8px;
		z-index: 2;
		display: inline-flex;
		width: 30px;
		height: 30px;
		align-items: center;
		justify-content: center;
		border: 0;
		border-radius: var(--radius-sm);
		background-color: rgba(255, 255, 255, 0.11);
		color: var(--white);
	}
	.primary-nav .submenu-toggle::before {
		content: "";
		width: 0.55rem;
		height: 0.55rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-2px) rotate(45deg);
		transition: transform 0.25s ease;
	}

	.primary-nav .submenu-toggle[aria-expanded="true"]::before {
		transform: translateY(2px) rotate(225deg);
	}

	.primary-nav .dropdown-menu {
		position: static !important;
		transform: none !important;
		box-shadow: none;
		background-color: rgba(255, 255, 255, 0.1);
		padding-left: 1rem;
	}

	.primary-nav .sub-menu,
	.primary-nav .dropdown-menu {
		position: static;
		min-width: 0;
		width: 100%;
		box-shadow: none;
		border-radius: 0;
		background-color: rgba(255, 255, 255, 0.09);
		display: block;
		max-height: 0;
		opacity: 0;
		visibility: visible;
		pointer-events: auto;
		transform: none;
		padding: 0;
		overflow: hidden;
		transition: max-height 0.35s ease, opacity 0.25s ease, padding 0.3s ease;
	}

	.primary-nav .sub-menu::before,
	.primary-nav .dropdown-menu::before {
		display: none;
	}

	.primary-nav .menu-item-has-children.submenu-open>.sub-menu,
	.primary-nav .dropdown.submenu-open>.dropdown-menu,
	.primary-nav .dropdown-menu.show {
		max-height: 2200px;
		opacity: 1;
		padding: 0.25rem 0 0.35rem 0.75rem;
	}

	.primary-nav .sub-menu>li,
	.primary-nav .dropdown-menu>li {
		min-height: 42px;
		overflow: visible;
	}

	.primary-nav .sub-menu .sub-menu {
		margin-left: 0.75rem;
		background-color: rgba(0, 0, 0, 0.13);
	}

	.primary-nav .sub-menu .nav-link,
	.primary-nav .dropdown-item {
		min-height: 42px;
		color: var(--white);
		white-space: normal;
		padding: 0.55rem 3rem 0.55rem 0.85rem;
	}

	.primary-nav .sub-menu .nav-link:hover,
	.primary-nav .sub-menu .nav-link:focus-visible,
	.primary-nav .dropdown-item:hover {
		background-color: transparent;
		color: rgba(255, 255, 255, 0.8);
	}

	.primary-nav .sub-menu .menu-item-has-children>.nav-link::before {
		display: none;
	}

	.hero-section {
		min-height: 100%;
	}

	.hero-content {
		max-width: 100%;
	}

	.hero-features {
		gap: 1.5rem 2rem;
	}

	/* About badge spacing */
	.about-media {
		margin-bottom: 2.5rem;
	}

	/* Stats grid */
	.stats-grid {
		margin-top: 2.5rem;
		gap: 1.5rem;
	}

	.stats-electrician {
		margin-top: 21rem;
	}

	.stats-medallion {
		display: none;
	}

	/* Expert band */
	.expert-band {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}

	/* Reviews */
	.reviews-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
	}

	/* Footer */
	.footer-bottom {
		justify-content: center;
		text-align: center;
	}

	.footer-legal {
		gap: 1.25rem;
	}
}

/* ===============================================================
   Landscape phones / small tablets (max-width: 767.98px)
   =============================================================== */
@media (max-width: 767.98px) {
	:root {
		--h1-size: 2.15rem;
		--h2-size: 1.7rem;
		--h3-size: 1.3rem;
		--h4-size: 1.15rem;
		--section-spacing: 50px;
		/* Keep body copy at the 16px minimum on phones (p, li, inline links). */
		--text-size: 1rem;
	}

	/* ---------------------------------------------------------------
	   Footer columns as accordions (Quick links / services).
	   Links stay hidden until the title is tapped. Animating
	   grid-template-rows 0fr -> 1fr keeps the reveal smooth with no
	   height measuring in JS (same technique as the mobile nav).
	   --------------------------------------------------------------- */
	.footer-col--collapsible .footer-title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 1rem;
		cursor: pointer;
		margin-bottom: 0;
		padding: 0.9rem 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		user-select: none;
	}

	.footer-col--collapsible .footer-col-toggle-icon {
		display: inline-block;
		font-size: 0.85rem;
		transition: transform 0.3s ease;
	}

	.footer-col--collapsible.is-open .footer-col-toggle-icon {
		transform: rotate(180deg);
	}

	.footer-col--collapsible .footer-col-body {
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.3s ease;
	}

	.footer-col--collapsible.is-open .footer-col-body {
		grid-template-rows: 1fr;
	}

	.footer-col--collapsible .footer-col-body>* {
		min-height: 0;
		overflow: hidden;
		margin: 0;
	}

	.footer-col--collapsible.is-open .footer-col-body>* {
		margin-top: 1rem;
	}

	.site-brand .brand-name {
		font-size: 1.15rem;
	}

	.site-brand img,
	.site-brand .brand-logo {
		width: 50px;
		height: 50px;
	}

	.header-call,
	.header-divider {
		display: none;
	}

	.features-card {
		padding: 2.25rem 1.5rem;
	}

	.projects-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.contact-bar {
		padding: 1.5rem;
	}

	.contact-bar .contact-divider {
		display: none;
	}

	.contact-bar .contact-item {
		margin-bottom: 1rem;
		justify-content: center;
	}

	.quote-form {
		flex-direction: column;
		align-items: stretch;
	}

	.quote-form .form-control,
	.quote-form .form-select,
	.quote-form .btn {
		width: 100%;
		flex-basis: auto;
		justify-content: center;
	}
.quote-form .btn {
		margin-top: 1rem;
	}
	.stats-electrician .electrician-img img {
		height: 260px;
	}

	.expert-band {
		padding: 2rem 1.5rem;
	}

	.product-actions {
		gap: 1rem;
	}

	.contact-bar .contact-item {
		justify-content: center;
	}
}

/* ===============================================================
   Phones (max-width: 575.98px)
   =============================================================== */
@media (max-width: 575.98px) {
	:root {
		--h1-size: 1.9rem;
		--h2-size: 1.5rem;
		--h3-size: 1.2rem;
		--section-spacing: 44px;
	}

	.container {
		--bs-gutter-x: 2.5rem;
	}

	.hero-actions .btn,
	.product-actions .btn,
	.expert-actions .btn {
		width: 100%;
		justify-content: center;
	}

	.hero-features {
		gap: 1rem;
	}

	.projects-gallery {
		grid-template-columns: 1fr;
	}

	/* Keep the counter cards two-up on phones. */
	.stats-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
	}

	.stat-card {
		padding: 1.5rem 0.75rem;
	}

	.stat-card .stat-value {
		font-size: 38px;
	}

	.features-card {
		padding: 1.75rem 1.25rem;
	}

	.service-card,
	.feature-block,
	.step-card,
	.review-card {
		padding: 1.75rem 1.5rem;
	}

	.footer-legal {
		flex-direction: column;
		gap: 0.5rem;
	}

	.site-brand .brand-name {
		min-width: auto;
		max-width: 228px;
	}
	footer .col-md-6 {
        flex: 0 0 auto;
        width: 100%;
    }
	    .hero-inner {
			padding:130px 10px 30px;
    }
	.hero-text {
    font-size: 1rem;
    max-width: 100%;
}
.hero-actions {
    margin-bottom: 2rem;
}
.hero-feature {
    gap: 0.4rem;
}
.highlight-item {
    gap: 2rem;
    flex-direction: column;
}
.highlight-item .icon{
    height: 80px;
}
.highlight-item .icon img{
    width:100px;
}
.contact-bar .col-md-6 {
    justify-content: center;
    display: flex;
}
.about-section .about-media::before {
    top: -12px;
    right: -12px;
}
.quote-form .form-control, .quote-form .form-select {
    justify-content: space-between;
}
.about-section .about-media::before{
    display: none;
}
.search-form {
    gap: .4rem;
}
.sp-form-status {
    display: none;
}
.contact-form-section {
    margin-bottom:20px;

}

@media (max-width:460px) {
	.site-brand .brand-name {
		max-width: 150px;
	}
}