/* ===================================================================================

* Theme Name: Biddut Child
* Theme URI: https://wp.hixstudio.net/biddut/
* Author: theme_pure 
* Author URI: https://themeforest.net/user/theme_pure
* Description: Biddut - Electricity Services WordPress Theme 
* Version: 1.0.0
* Template: biddut
* License: GNU General Public License version 3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
* Tags: one-column, right-sidebar, left-sidebar, custom-menu, featured-images, post-formats, sticky-post, translation-ready

* We encourage you to create Child theme for any modifications you will want to do.

* Why use Child theme?

* Because of future updates we may provide for this theme that will overwrite your
* modifications and all your custom work.

* If you are not familiar with Child Themes, you can read about it here:
* http://codex.wordpress.org/Child_Themes
* http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/

====================================================================================== */

/* ===================================================================================
   Fix: Elementor inline SVG icons render at their intrinsic viewBox size.

   Elementor 3.x replaces Font Awesome icon fonts with inline <svg class="e-font-icon-svg">.
   The parent theme styles these as icon fonts (font-size + color) and has no rules for
   SVGs, so they render huge and black instead of small and white.

   Sizing to 1em makes them honour the theme's existing font-size rules, and
   fill: currentColor makes them honour its color and :hover rules.
   ================================================================================== */

.e-font-icon-svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
}

/* Header top bar — slim strip with 15px social icons (matches .tp-header-top-space) */
.tp-header-top-area .tp-header-top-right-social a {
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.tp-header-top-area .tp-header-top-right-social a .e-font-icon-svg {
	width: 15px;
	height: 15px;
}

/* Keep the contact icons on the left aligned with their text */
.tp-header-top-area .tp-header-top-left-box ul li i,
.tp-header-top-area .tp-header-top-left-box ul li .e-font-icon-svg {
	line-height: 1;
}

/* ===================================================================================
   EnochGrace brand palette
   ================================================================================== */

:root {
	--eg-pine: #084734;   /* Emerald Pine — deep green, primary brand colour */
	--eg-lime: #CEF17B;   /* Lime Glow   — vibrant accent, high contrast on pine */
	--eg-tea:  #CDEDB3;   /* Green Tea   — soft tint for secondary/subtle surfaces */

	--eg-pine-hover: #0B5C43;  /* one step lighter, for hover on pine surfaces */
}

/* Repoint the theme's own accent variable so any element not covered by the
   rules below — service detail pages, 404, archives — picks up the brand colour
   instead of the demo red. The theme declares this as `html:root`, so match that
   specificity. Dark-background cases are handled explicitly further down, and
   those more specific rules still win over this fallback. */
html:root {
	--tp-theme-1: #084734;
}

/* ===================================================================================
   Buttons — recoloured from the theme's red (#dd0733) to the brand palette.

   The theme builds every button from --tp-theme-1 plus an ::after element that
   sweeps across on hover. Each variant below sets the resting colours and the
   sweep colour, and flips the label colour so contrast holds through the hover.
   ================================================================================== */

/* Primary — solid lime with deep green text. Reads clearly on both the dark
   header and light sections, and carries the strongest contrast in the palette. */
.tp-btn,
a.tp-btn {
	background-color: var(--eg-lime);
	color: var(--eg-pine);
}

.tp-btn::after,
.tp-btn.hover-2::after {
	background: var(--eg-pine);
}

.tp-btn:hover,
a.tp-btn:hover {
	color: var(--eg-lime);
}

/* Secondary — soft Green Tea surface, deep green label. */
.tp-btn.grey-bg,
a.tp-btn.grey-bg {
	background-color: var(--eg-tea);
	color: var(--eg-pine);
}

.tp-btn.grey-bg:hover,
a.tp-btn.grey-bg:hover {
	color: var(--eg-lime);
}

/* Dark button — deep green base, sweeping to lime on hover. */
.tp-btn-black,
a.tp-btn-black {
	background-color: var(--eg-pine);
	color: #fff;
}

.tp-btn-black::after {
	background: var(--eg-lime);
}

.tp-btn-black:hover,
a.tp-btn-black:hover {
	color: var(--eg-pine);
}

/* Outlined button (sits on dark imagery) — fills with lime on hover. */
.tp-btn-border::after {
	background: var(--eg-lime);
}

.tp-btn-border:hover {
	color: var(--eg-pine);
	border-color: var(--eg-lime);
}

/* Large light/dark buttons. */
.tp-btn-white-lg::after {
	background: var(--eg-pine);
}

.tp-btn-white-lg:hover {
	color: var(--eg-lime);
}

.tp-btn-dark-lg {
	background-color: var(--eg-pine);
	color: #fff;
}

.tp-btn-dark-lg::after {
	background: var(--eg-lime);
}

.tp-btn-dark-lg:hover {
	color: var(--eg-pine);
}

/* Service card arrow buttons — tinted circle, inverting to pine on hover. */
.tp-service-2-link a,
a.tp-el-rep-btn {
	color: var(--eg-pine);
	background-color: var(--eg-tea);
}

.tp-service-2-link a:hover,
a.tp-el-rep-btn:hover {
	color: var(--eg-lime);
	background-color: var(--eg-pine);
}

/* ===================================================================================
   Service cards.

   The theme's JS adds .active on mouseenter, so .active is the hover state — there
   are no :hover rules to override. Resting cards are white with a pine icon; the
   hovered card flips to a pine panel with a lime icon and light text.
   ================================================================================== */

.tp-service-2-icon span {
	color: var(--eg-pine);
}

.tp-service-2-item.active {
	background-color: var(--eg-pine);
}

.tp-service-2-item.active .tp-service-2-icon span {
	color: var(--eg-lime);
}

.tp-service-2-item.active .tp-service-2-title,
.tp-service-2-item.active .tp-service-2-title a {
	color: #fff;
}

.tp-service-2-item.active .tp-service-2-text p {
	color: rgba(255, 255, 255, 0.85);
}

.tp-service-2-item.active .tp-service-2-link a {
	background-color: var(--eg-lime);
	color: var(--eg-pine);
}

/* Back-to-top control. */
.back-to-top-wrapper .back-to-top-btn,
#back-to-top,
.tp-backtotop {
	background-color: var(--eg-pine);
	color: var(--eg-lime);
}

.back-to-top-wrapper .back-to-top-btn:hover,
#back-to-top:hover,
.tp-backtotop:hover {
	background-color: var(--eg-lime);
	color: var(--eg-pine);
}

/* ===================================================================================
   Feature boxes (Competitive Pricing / Quality Workmanship / …).

   These sit on a light band (#F2EDEB). The hover is a ::before panel that scales
   up behind the content, with a second block behind the icon — both were the
   theme red, and both are kept the same colour here so the block stays invisible
   against the panel exactly as the original design intended.

   Note: the theme's JS also adds .active on mouseenter, but nothing styles it.
   Only :hover is overridden — styling .active would leave the last hovered card
   stuck in its hover state.
   ================================================================================== */

.tp-feature-2-icon span {
	color: var(--eg-pine);
}

.tp-feature-2-item::before,
.tp-feature-2-icon::after {
	background-color: var(--eg-pine);
}

/* Icon and title flip to white over the pine panel (theme default kept). */
.tp-feature-2-item:hover .tp-feature-2-icon span,
.tp-feature-2-item:hover .tp-feature-2-title {
	color: #fff;
}

/* ===================================================================================
   "Why choose us" icon boxes.

   This band is white, so the deep pine reads strongly (9.7:1). The flaticon glyph
   is drawn in an ::before, which inherits colour — setting it on the wrapper and
   the <i> covers both.
   ================================================================================== */

.tp-choose-2-icon .tp-icon_box_icon-icon,
.tp-choose-2-icon .tp-icon_box_icon-icon i,
.tp-choose-2-icon i,
.tp-choose-2-icon span {
	color: var(--eg-pine);
}

/* ===================================================================================
   Remaining theme-red accents.

   Colour is chosen per surface: lime where the element sits on a dark band
   (pine would disappear there), pine where it sits on white or a photo.
   ================================================================================== */

/* --- Dark top bar: contact icons --- */
.tp-header-top-left-box i.flaticon-pin,
.tp-header-top-left-box i.flaticon-mail-1,
.tp-header-top-area i[class*="flaticon-"] {
	color: var(--eg-lime);
}

/* --- Header hamburger: pine, so the lime CTA beside it stays the primary action.
       Scoped through .tp-header-bar to outrank the theme's `.tp-header-bar button`. --- */
.tp-header-bar button.tp-menu-bar,
button.tp-menu-bar {
	background-color: var(--eg-pine);
	color: var(--eg-lime);
}

.tp-header-bar button.tp-menu-bar:hover,
button.tp-menu-bar:hover {
	background-color: var(--eg-lime);
	color: var(--eg-pine);
}

/* --- "Talk to an expert" phone icon (white circle) --- */
i.flaticon-phone-call {
	color: var(--eg-pine);
}

/* --- Section subtitle sparks and about-list check marks (light backgrounds) --- */
i.flaticon-flash,
i.fal.fa-badge-check {
	color: var(--eg-pine);
}

/* --- Dropdown submenu top border. The theme sets this via the long
       `.tp-header-main-menu nav ul li .submenu` selector, so match its depth. --- */
.tp-header-main-menu nav ul li .submenu,
.tp-header-main-menu nav ul li .tp-submenu,
.tp-submenu.submenu {
	border-top-color: var(--eg-pine);
}

/* --- Portfolio thumbnail hover icons: lime disc, pine glyph --- */
.tp-project-2-thumb-icon a {
	background-color: var(--eg-lime);
	color: var(--eg-pine);
}

.tp-project-2-thumb-icon a:hover {
	background-color: var(--eg-pine);
	color: var(--eg-lime);
}

/* --- Newsletter input in the CTA band.

       The theme hardcodes #c4062d here with an #e38b9d border, bypassing
       --tp-theme-1 entirely — which is why a search for the usual red missed it.
       The band behind is pine, so the field is a step lighter to stay legible. --- */
.tp-cta-right-box input {
	background-color: var(--eg-pine-hover);
	border-color: var(--eg-tea);
	color: #fff;
}

.tp-cta-right-box input::placeholder {
	color: rgba(255, 255, 255, 0.75);
}

.tp-cta-right-box input:focus {
	border-color: var(--eg-lime);
	outline: none;
}

/* --- Contact Form 7 submit controls --- */
.wpcf7-form button[type="submit"],
.wpcf7-form input[type="submit"] {
	background-color: var(--eg-pine);
	color: #fff;
}

.wpcf7-form button[type="submit"]:hover,
.wpcf7-form input[type="submit"]:hover {
	background-color: var(--eg-lime);
	color: var(--eg-pine);
}

/* ===================================================================================
   Logo sizing.

   The footer artwork is portrait (417x462) where the old demo logo was a wide
   strip, so at the widget's inherited width it dominated the column. Capping the
   width keeps it in proportion with the footer text.
   ================================================================================== */

/* Matched on the file itself: the footer template renders this inside plain
   Elementor containers, with no footer/.tp-footer-* wrapper to hook onto. */
img[src*="enochgrace-logo-full"] {
	width: 100%;
	max-width: 160px;
	height: auto;
}

/* Off-canvas (mobile) panel logo. */
.tpoffcanvas__logo img {
	max-width: 190px;
	height: auto;
}

/* ===================================================================================
   Fix: About section text wrapping below the images instead of sitting beside them.

   The row is 1140px wide, but its two columns add up to 1144.19px
   (547.19 images + 84 left margin + 513 text), so flex-wrap pushed the text
   onto a new line. Trimming the gutter and disabling wrap on desktop puts the
   copy back to the right of the images, vertically centred against them.

   Left to wrap normally below the tablet breakpoint so it still stacks on mobile.
   ================================================================================== */

@media (min-width: 992px) {

	#about .elementor-element-22a53c5 {
		flex-wrap: nowrap;
		align-items: center;
	}

	#about .elementor-element-142526e {
		margin-left: 40px;
		flex: 1 1 auto;
		min-width: 0;
	}
}