/* ============================================================
   SR FORGINGS — custom.css
   ------------------------------------------------------------
   ALL custom overrides live in THIS file, never in style.css.
   It loads after style.css, so anything here wins.
   If the site ever looks wrong, delete this ONE file and the
   theme returns to normal. style.css is never touched again.
   ============================================================ */


/* --- 1. Floating WhatsApp button ----------------------------
   The restored style.css has no .whats-fix rule, so the button
   renders as a blank box. This restores it: green circle,
   bottom-left, white icon.
   To move it to the right instead, change "left: 15px" to
   "right: 80px" (80 keeps it clear of the back-to-top button).
   ------------------------------------------------------------ */

.whats-fix {
  position: fixed;
  left: 15px;
  bottom: 15px;
  z-index: 999;
}

.whats-fix a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #25d366;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  text-decoration: none;
  transition: .4s;
}

.whats-fix a:hover {
  background-color: #128c7e;
}

.whats-fix a svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}


/* --- 2. Back-to-top button (the red square) -----------------
   The markup uses class "ti-arrow-up" (Themify Icons), but that
   icon font is not loaded on this site, so the arrow has always
   been invisible. It only became obvious once block 3 below
   gave the button a red background. This substitutes the Font
   Awesome up-arrow, which IS loaded, and rounds the button.
   ------------------------------------------------------------ */

.fixed-tp {
  border-radius: 50%;
}

.fixed-tp .ti-arrow-up::before {
  content: "\f062";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 15px;
}


/* --- 3. Missing theme variable ------------------------------
   style.css uses var(--theme-color2) in three places but never
   defines it. Without this, the back-to-top button has no
   background at all.
   ------------------------------------------------------------ */

:root {
  --theme-color2: #cf0000;
}


/* --- 4. H1 sizing -------------------------------------------
   The homepage H1 replaced the <h2> in the About block.
   These lines make it render identically to that H2:
   Teko heading font, 55px, 55px line-height.
   ------------------------------------------------------------ */

.sec2-left h1 {
  font-family: var(--heading-font-family);
  font-size: 55px;
  line-height: 55px;
}


/* --- 5. Product page H1 -------------------------------------
   On inner pages the H1 replaces the <h2> in the top banner.
   This matches the theme's .inner-banner h2 exactly.
   ------------------------------------------------------------ */

.inner-banner h1 {
  font-family: var(--heading-font-family);
  color: #fff;
  font-size: 65px;
  text-transform: uppercase;
}