/* Enter Your Custom CSS Here */

.mainSlider .slide .slide-content .container .tt-title-01 {
 	 
}

.mainSlider .slide .slide-content .container .tt-title-01,
.mainSlider .slide .slide-content .container .tt-title-02 {
      color: #0e8fee;
      background-color: #00000099;
    text-shadow: 1px 1px black;
      background-color: #262626a8;
    padding: 8px 16px;
    display: inline-block
}

.mainSlider .slide .slide-content .container .tt-title-01 {
  font-size: 35px;
}

.elementor-element-c7651bd .section-indent {
 margin-top: -19px !important; 
}

@media screen and (max-width: 700px) {
 .mainSlider .slide .slide-content .container .tt-title-01 {
  	font-size: 17px;
  }
}

@media screen and (max-width: 790px) {
  	.mainSlider .slide .slide-content .container .tt-title-01
    .mainSlider .slide .slide-content .tt-title-02 {
        font-size: 24px;
        line-height: 30px;
        margin-top: 16px;
    }
}

/* ==========================================================================
   iTech Electrical Group — FULL Additional CSS (paste this whole file)
   Palette: Ink #0A0A0A · Gold #B0956A · Background #FFFFFF

   This is the ORIGINAL Additional CSS content (backed up in
   original-additional-css-backup.css) with the brand recolor merged in on
   top. Paste THIS file into Appearance → Customize → Additional CSS as a
   full replacement — not site-recolor.css alone — otherwise you'd lose the
   original's layout fixes (the -19px section-indent nudge, the two
   responsive font-size breakpoints on the slider title).

   HOW TO ADD:
   WP Admin → Appearance → Customize → Additional CSS → paste → preview →
   Publish. (Elementor Pro's Site Settings → Custom CSS works the same way
   if you'd rather add it from inside Elementor.)
   ========================================================================== */


/* --------------------------------------------------------------------------
   ORIGINAL RULES — unchanged, except the hero slider title color/background
   below, which was bright blue (#0e8fee) and is now brand gold on near-black
   to match the reversed logo's own gold-on-dark tagline treatment.
   -------------------------------------------------------------------------- */

.mainSlider .slide .slide-content .container .tt-title-01 {

}

.mainSlider .slide .slide-content .container .tt-title-01,
.mainSlider .slide .slide-content .container .tt-title-02 {
      color: #B0956A; /* was #0e8fee */
      background-color: #00000099;
    text-shadow: 1px 1px black;
      background-color: #0A0A0Aa8; /* was #262626a8 */
    padding: 8px 16px;
    display: inline-block
}

.mainSlider .slide .slide-content .container .tt-title-01 {
  font-size: 35px;
}

.elementor-element-c7651bd .section-indent {
 margin-top: -19px !important;
}

@media screen and (max-width: 700px) {
 .mainSlider .slide .slide-content .container .tt-title-01 {
      font-size: 17px;
  }
}

@media screen and (max-width: 790px) {
      .mainSlider .slide .slide-content .container .tt-title-01
    .mainSlider .slide .slide-content .tt-title-02 {
        font-size: 24px;
        line-height: 30px;
        margin-top: 16px;
    }
}


/* --------------------------------------------------------------------------
   NEW — brand recolor override
   -------------------------------------------------------------------------- */

/* 1. Elementor Global Colors
   If the site already uses Elementor's Global Colors consistently,
   repointing these four is the single highest-leverage change — check
   Elementor → Site Settings → Global Colors for the real swatch names
   first, these are just Elementor's default slugs. */
:root {
  --e-global-color-primary: #0A0A0A;
  --e-global-color-secondary: #B0956A;
  --e-global-color-text: #0A0A0A;
  --e-global-color-accent: #B0956A;
}

/* 2. Base text + links (was dark grey text / blue links) */
body,
p,
li,
.elementor-widget-text-editor {
  color: #0A0A0A;
}

a {
  color: #0A0A0A;
  text-decoration-color: #B0956A;
}

a:hover,
a:focus {
  color: #B0956A;
}

/* 3. Headings */
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
  color: #0A0A0A;
}

/* 4. Buttons / CTAs (was bright yellow) */
.elementor-button,
.elementor-button-link,
a.button,
button[type="submit"] {
  background-color: #B0956A !important;
  border-color: #B0956A !important;
  color: #0A0A0A !important;
}

.elementor-button:hover,
.elementor-button-link:hover,
a.button:hover {
  background-color: #0A0A0A !important;
  border-color: #0A0A0A !important;
  color: #FFFFFF !important;
}

/* 5. Header / navigation (currently dark — flip to white to match
   the new light logo). Now that the theme-panel CSS confirms this is
   the "Total" theme, #tt-header/#tt-nav are the real wrapper/nav IDs —
   the generic header/.site-header/#masthead selectors are kept
   alongside as harmless extra coverage in case any page uses raw
   Elementor markup instead. Delete whichever end up unused. */
#tt-header,
header,
.site-header,
#masthead,
.elementor-location-header {
  background-color: #FFFFFF !important;
}

#tt-header a,
#tt-nav > ul > li > a,
header a,
.site-header a,
#masthead a,
.elementor-location-header a,
.elementor-nav-menu .elementor-item {
  color: #0A0A0A !important;
}

#tt-header a:hover,
header a:hover,
.site-header a:hover,
#masthead a:hover,
.elementor-nav-menu .elementor-item:hover {
  color: #B0956A !important;
}

/* mobile hamburger icon */
.elementor-menu-toggle {
  color: #0A0A0A !important;
}

/* 6. Icon widgets carrying the old accent colour */
.elementor-icon,
.elementor-icon svg {
  color: #B0956A;
  fill: #B0956A;
}

/* 7. Section-level overrides go here once identified — e.g. any
   Elementor section/container explicitly painted with the old
   dark/blue background. Add the specific .elementor-element-XXXXXXX
   class (visible in the Inspector) so it doesn't clash with other
   sections that should stay as-is.
   Example:
   .elementor-element-abc1234 { background-color: #FFFFFF !important; }
*/


