/* =========================================================
   MATRIX — Custom Styles (Bootstrap 5 first, custom CSS minimal)

   Rules for this project:
   - Colors/fonts/weights/sizes: ONLY via the variables below. No hardcoded values.
   - Headings (h1–h6): share one common rule for font-family/weight/color/line-height.
     Only font-size differs per level, driven by the --fs-* scale.
   - Buttons: reusable .btn-matrix-* classes only (used with Bootstrap's .btn).
     New button styles get added below the existing ones, never a one-off class.
   - Section spacing: every <section> uses the shared .section-pt / .section-pb
     utility classes (100px) instead of one-off padding. See "Section spacing" below
     for the same-background rule.
   - No max-width anywhere in custom CSS (images stay img-fluid, no forced widths).
   - Each section gets one unique parent class; all its rules are scoped inside it.
   - Responsive/media-query rules live in responsive.css, not here.
   ========================================================= */

:root {
  /* Colors */
  --color-primary: #B22C31;
  --color-secondary: #252636;
  --color-white: #FFFFFF;
  --color-black: #000000;
  --color-border-gray: #CCCCCC;

  /* Font family (heading, body and buttons all use the same family) */
  --font-base: 'Lexend', sans-serif;

  /* Font weights — shared across all text, headings included */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Body typography */
  --body-font-size: 18px;
  --body-line-height: 36px;

  /* Heading typography — common to all heading levels (only size scales) */
  --heading-font-weight: var(--fw-bold);
  --heading-color: var(--color-secondary);
  --heading-line-height: 1.3;

  /* Heading size scale, measured from Figma */
  --fs-h1: 3.25rem;   /* 52px — hero only */
  --fs-h2: 2.5rem;    /* 40px — section headings */
  --fs-h3: 1.5rem;    /* 24px — card / block titles */
  --fs-h4: 1.25rem;   /* 20px — accordion questions, form heading */
  --fs-h5: 1.125rem;  /* 18px — footer column titles */
  --fs-h6: 1rem;      /* 16px */

  /* Buttons */
  --btn-font-weight: var(--fw-semibold);
  --btn-radius: 0.625rem; /* 10px, consistent across every button style */

  /* Section spacing */
  --section-spacing: 6.25rem; /* 100px */
}

/* =========================================================
   Base
   ========================================================= */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-base);
  font-size: var(--body-font-size);
  line-height: var(--body-line-height);
  font-weight: var(--fw-regular);
  color: var(--color-secondary);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base);
  font-weight: var(--heading-font-weight);
  color: var(--heading-color);
  line-height: var(--heading-line-height);
  margin: 0;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
h5 { font-size: var(--fs-h5); }
h6 { font-size: var(--fs-h6); }

p {
  margin: 0;
}

a {
  font-family: var(--font-base);
  text-decoration: none;
}

/* =========================================================
   Buttons — reusable everywhere, extend Bootstrap's .btn.btn-lg
   Usage: <a class="btn btn-lg btn-matrix-primary">Label</a>
   Add new variants BELOW the existing ones as new styles appear.
   ========================================================= */
.btn-matrix-primary,
.btn-matrix-secondary,
.btn-matrix-outline {
  font-family: var(--font-base);
  font-weight: var(--btn-font-weight);
  border-radius: var(--btn-radius);
}

/* Solid red — e.g. "Get Your Free Estimate" */
.btn-matrix-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.btn-matrix-primary:hover,
.btn-matrix-primary:focus {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

/* Solid dark — e.g. "More About Us", "Request a Free Quote" */
.btn-matrix-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}
.btn-matrix-secondary:hover,
.btn-matrix-secondary:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* Outline — e.g. "View More Services", "View all projects", "Request With Online Form" */
.btn-matrix-outline {
  background-color: transparent;
  border-color: var(--color-white);
  color: var(--color-white);
}
.btn-matrix-outline:hover,
.btn-matrix-outline:focus {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-secondary);
}

/* Solid white — e.g. "Call Now" on the blog sidebar CTA card */
.btn-matrix-white {
  background-color: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-secondary);
}
.btn-matrix-white:hover,
.btn-matrix-white:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

/* Call button — pairs with .btn-matrix-primary, adds a leading icon circle.
   Usage: <a class="btn btn-lg btn-matrix-primary btn-matrix-call">
            <span class="btn-icon-circle"><i class="bi bi-telephone-fill"></i></span>
            (647) 449-2385
          </a> */
.btn-matrix-call {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.btn-matrix-call .btn-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-white);
  color: var(--color-primary);
  flex-shrink: 0;
}

/* =========================================================
   Section spacing — reusable everywhere, apply directly on the
   <section> element instead of one-off padding per section.
   Rule: every section gets .section-pt. Add .section-pb too,
   UNLESS the next section shares the exact same background —
   in that case only one 100px gap should exist between them,
   so the first of the pair skips .section-pb.
   ========================================================= */
.section-pt {
  padding-top: var(--section-spacing);
}
.section-pb {
  padding-bottom: var(--section-spacing);
}

/* =========================================================
   Section styles go below this line.
   Each new section: one parent class, rules scoped inside it.
   e.g.
   .hero-section { }
   .hero-section .some-child { }
   ========================================================= */

/* ---------- Header (top bar + navbar) ---------- */
.topbar {
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 0.875rem;
}

.topbar .topbar-link {
  color: var(--color-white);
}
.topbar .topbar-link:hover {
  color: var(--color-secondary);
}

.main-navbar {
  background-color: var(--color-secondary);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.main-navbar .navbar-brand {
  width: 90px;
}

.main-navbar .nav-link {
  color: var(--color-white);
  font-weight: var(--fw-medium);
}
.main-navbar .nav-link:hover,
.main-navbar .nav-link.active {
  color: var(--color-primary);
}

.main-navbar .navbar-toggler {
  border-color: var(--color-white);
}
.main-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Services mega menu — shown on hover at lg+, revealed as a plain
   stacked block on mobile since there's no hover there */
.main-navbar .nav-item.dropdown {
  position: relative;
}
.main-navbar .nav-link .bi-chevron-down {
  font-size: 0.7rem;
  margin-left: 0.25rem;
  transition: transform 0.2s ease;
}
.main-navbar .services-mega-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  max-width: 90vw;
  z-index: 1030;
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.25);
  margin: 0;
  padding: 2rem;
  background-color: var(--color-secondary);
  border-top: 3px solid var(--color-primary);
}
.main-navbar .nav-item.dropdown:hover .services-mega-menu,
.main-navbar .nav-item.dropdown:focus-within .services-mega-menu {
  display: block;
}
/* Single-column variant — Remodeling / Construction have far fewer
   links than Services, so they get a standard narrow dropdown width
   instead of the wide 4-column mega menu */
.main-navbar .services-mega-menu.services-mega-menu-narrow {
  width: 260px;
  padding: 1.5rem;
}
.main-navbar .nav-item.dropdown:hover .bi-chevron-down {
  transform: rotate(180deg);
}
.main-navbar .mega-menu-col {
  list-style: none;
  padding: 0;
  margin: 0;
}
.main-navbar .mega-menu-col li + li {
  margin-top: 1rem;
}
.main-navbar .mega-menu-col a {
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  font-size: 1rem;
}
.main-navbar .mega-menu-col a:hover {
  color: var(--color-primary);
}

/* ---------- Hero ---------- */
.hero-section {
  background-image: url("../img/hero-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding:190px 0;
}


/* ---------- Services ---------- */
.services-section {
  background-color: var(--color-black);
  background-image: url("../img/services-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
}
.services-section h2 {
  color: var(--color-primary);
}

.services-section .service-card-img {
  border-radius: 0.5rem;
  overflow: hidden;
}
.services-section .service-card h3 {
  color: var(--color-white);
}
.services-section .service-card p {
  color: var(--color-white);
}
.services-section .service-card {
  margin-top: 35px;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 1);
}
.services-section .service-read-more {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-primary);
  font-weight: var(--fw-medium);
}
.services-section .service-read-more:hover {
  color: var(--color-white);
}

/* ---------- Decision ("Every Decision Shapes The Final Result") ---------- */
.decision-section .decision-img {
  border-radius: 0.5rem;
  overflow: hidden;
}

/* ---------- Gallery ("Craftsmanship You Can See") ---------- */
.gallery-section {
  background-color: var(--color-black);
  background-image: url("../img/services-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--color-white);
}
.gallery-section h2 {
  color: var(--color-primary);
}




/* ---------- FAQ ---------- */
.faq-section .accordion-item {
  border-radius: 0.5rem;
  margin-bottom: 1rem;
  overflow: hidden;
}
.faq-section .accordion-button {
  font-family: var(--font-base);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  color: var(--color-secondary);
}
.faq-section .accordion-button:not(.collapsed) {
  background-color: var(--color-white);
  color: var(--color-primary);
  box-shadow: none;
}
.faq-section .accordion-button:focus {
  box-shadow: none;
  border-color: rgba(0, 0, 0, 0.125);
}

/* ---------- CTA + Request Free Estimate form ---------- */
.cta-section {
  position: relative;
  background-image: url("../img/cta-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.cta-section .cta-content h2,
.cta-section .cta-content p {
  color: var(--color-white);
}
.cta-section .estimate-form-card {
  background-color: var(--color-black);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 0.75rem;
  padding: 2.5rem;
  margin-top: -5rem;
  position: relative;
  z-index: 2;
}
.cta-section .estimate-form-card h3 {
  color: var(--color-white);
}
.cta-section .estimate-form-card .form-label {
  color: var(--color-white);
  font-weight: var(--fw-medium);
}
.cta-section .estimate-form-card .form-control,
.cta-section .estimate-form-card .form-select {
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: var(--color-white);
  border-radius: var(--btn-radius);
  padding: 0.75rem 1rem;
}
.cta-section .estimate-form-card .form-control::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.cta-section .estimate-form-card .form-control:focus,
.cta-section .estimate-form-card .form-select:focus {
  background-color: transparent;
  border-color: var(--color-primary);
  color: var(--color-white);
  box-shadow: none;
}
.cta-section .estimate-form-card .form-select option {
  color: var(--color-secondary);
}

/* ---------- Footer ---------- */
.site-footer {
  background-color: var(--color-secondary);
  color: var(--color-white);
}
.site-footer .footer-logo-wrap {
  width: 170px;
}
.site-footer p,
.site-footer li,
.site-footer a {
  color: var(--color-white);
}
.site-footer h5 {
  color: var(--color-white);
}
.site-footer a:hover {
  color: var(--color-primary);
}
.site-footer .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
}
.site-footer .social-icon:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}
.site-footer .footer-phone {
  display: inline-block;
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
}
.site-footer .footer-phone:hover {
  color: var(--color-white);
}
.site-footer hr {
  border-color: rgba(255, 255, 255, 0.15);
}



/* * about us page styling */

.title-area-section{
  padding: 170px 0;
  background-image: url("../img/about/hero-bg.webp");
  background-size: cover;
  background-position: center;
}

.title-area-section.gallery-page{
  background-image: url("../img/gallery/hero-bg-1x.webp");
}
.title-area-section.testimonial-page{
  background-image: url("../img/testimonials/hero-bg.webp");
}
.title-area-section.blogs-page{
  background-image: url("../img/blog/hero-bg-1x.webp");
}
.title-area-section.contact-page{
  background-image: url("../img/contact/hero-bg.webp");
}
.title-area-section.services-page{
  background-image: url("../img/services/hero-bg-1x.webp");
}
.title-area-section.carpentry-page{
  background-image: url("../img/services/carpentry/hero-bg-1x.webp");
}
.title-area-section.concrete-work-page{
  background-image: url("../img/services/concrete-work/hero-bg-1x.webp");
}
.title-area-section.custom-cabinets-page{
  background-image: url("../img/services/custom-cabinets/hero-bg-1x.webp");
}
.title-area-section.custom-countertops-page{
  background-image: url("../img/services/custom-countertops/hero-bg-1x.webp");
}
.title-area-section.doors-page{
  background-image: url("../img/services/doors/hero-bg-1x.webp");
}
.title-area-section.electrical-page{
  background-image: url("../img/services/electrical/hero-bg-1x.webp");
}
.title-area-section.flooring-page{
  background-image: url("../img/services/flooring/hero-bg-1x.webp");
}
.title-area-section.gutters-page{
  background-image: url("../img/services/gutters/hero-bg-1x.webp");
}
.title-area-section.home-repairs-page{
  background-image: url("../img/services/home-repairs/hero-bg-1x.webp");
}
.title-area-section.hvac-page{
  background-image: url("../img/services/hvac/hero-bg-1x.webp");
}
.title-area-section.painting-page{
  background-image: url("../img/services/painting/hero-bg-1x.webp");
}
.title-area-section.plumbing-page{
  background-image: url("../img/services/plumbing/hero-bg-1x.webp");
}
.title-area-section.roof-waterproofing-page{
  background-image: url("../img/services/roof-waterproofing/hero-bg-1x.webp");
}
.title-area-section.roofing-page{
  background-image: url("../img/services/roofing/hero-bg-1x.webp");
}
.title-area-section.roofing-repair-page{
  background-image: url("../img/services/roofing-repair/hero-bg-1x.webp");
}
.title-area-section.tile-flooring-page{
  background-image: url("../img/services/tile-flooring/hero-bg-1x.webp");
}
.title-area-section.windows-page{
  background-image: url("../img/services/windows/hero-bg-1x.webp");
}
.title-area-section.wood-flooring-page{
  background-image: url("../img/services/wood-flooring/hero-bg-1x.webp");
}
.title-area-section.remodeling-page{
  background-image: url("../img/remodeling/hero-bg-1x.webp");
}
.title-area-section.residential-remodeling-page{
  background-image: url("../img/remodeling/residential-remodeling/hero-bg-1x.webp");
}
.title-area-section.commercial-remodeling-page{
  background-image: url("../img/remodeling/commercial-remodeling/hero-bg-1x.webp");
}
.title-area-section.basement-remodeling-page{
  background-image: url("../img/remodeling/basement-remodeling/hero-bg-1x.webp");
}
.title-area-section.bathroom-remodeling-page{
  background-image: url("../img/remodeling/bathroom-remodeling/hero-bg-1x.webp");
}
.title-area-section.kitchen-remodeling-page{
  background-image: url("../img/remodeling/kitchen-remodeling/hero-bg-1x.webp");
}
.title-area-section.construction-page{
  background-image: url("../img/construction/hero-bg-1x.webp");
}
.title-area-section.commercial-construction-page{
  background-image: url("../img/construction/commercial-construction/hero-bg-1x.webp");
}
.title-area-section.framing-page{
  background-image: url("../img/construction/framing/hero-bg-1x.webp");
}
.title-area-section.patio-construction-page{
  background-image: url("../img/construction/patio-construction/hero-bg-1x.webp");
}
.title-area-section.siding-page{
  background-image: url("../img/construction/siding/hero-bg-1x.webp");
}
.title-area-section.deck-construction-page{
  background-image: url("../img/construction/deck-construction/hero-bg-1x.webp");
}
.title-area-section.home-additions-page{
  background-image: url("../img/construction/home-additions/hero-bg-1x.webp");
}
.title-area-section.residential-construction-page{
  background-image: url("../img/construction/residential-construction/hero-bg-1x.webp");
}

.about-detail{
  background: #f4f4f4;
}

.about-service-areas .service-pill {
  display: inline-flex;
  align-items: center;
  box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.16);
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border-radius: 50rem;
  background-color: var(--color-white);
  font-weight: var(--fw-medium);
  -webkit-border-radius: 50rem;
  -moz-border-radius: 50rem;
  -ms-border-radius: 50rem;
  -o-border-radius: 50rem;
}
.about-service-areas .service-pill i {
  color: var(--color-primary);
}

/* * blogs page styling */

.blogs .blog-card {
  height: 100%;
  background-color: var(--color-white);
  border: 1px solid #252636;
  border-radius: 0.5rem;
  overflow: hidden;
}
.blogs .blog-card-body {
  padding: 1.5rem;
}
.blogs .blog-date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  color: var(--color-secondary);
}
.blogs .blog-card h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.blogs .blog-read-more {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--color-secondary);
  font-weight: var(--fw-semibold);
}
.blogs .blog-read-more:hover {
  color: var(--color-primary);
}

.blogs .blog-pagination .page-arrow,
.blogs .blog-pagination .page-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  color: var(--color-white);
  font-weight: var(--fw-medium);
}
.blogs .blog-pagination ul {
  background-color: var(--color-primary);
  border-radius: 50rem;
  padding: 0.5rem;
}
.blogs .blog-pagination .page-num.active,
.blogs .blog-pagination .page-num:hover,
.blogs .blog-pagination .page-arrow:hover {
  background-color: var(--color-white);
  color: var(--color-primary);
}

/* * blog detail page styling */

.blog-detail-header .blog-meta {
  color: var(--color-secondary);
  font-weight: var(--fw-medium);
}
.blog-detail-header .blog-meta i {
  color: var(--color-primary);
  margin-right: 0.375rem;
}
.blog-detail-header .blog-lead {
  max-width: 55rem;
}

.blog-detail .blog-featured-img-wrap {
  border-radius: 0.5rem;
  overflow: hidden;
}

.blog-detail .blog-quote {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background-color: #f4f4f4;
  border-left: 4px solid var(--color-primary);
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin: 0;
}
.blog-detail .blog-quote i {
  font-size: 2rem;
  line-height: 1;
  color: var(--color-primary);
}
.blog-detail .blog-quote p {
  font-style: italic;
}

/* Sidebar CTA card */
.blog-detail .blog-cta-card {
  background-image: url("../img/blog/blog-cta-bg.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 0.5rem;
  padding: 2rem;
  min-height: 400px;
}
.blog-detail .blog-cta-card h4,
.blog-detail .blog-cta-card p {
  color: var(--color-white);
}

/* Sticky sidebar: the CTA card sticks while the article scrolls, then
   releases and scrolls up once the sidebar's own content (CTA + recent
   posts) runs out — standard position:sticky behavior within .blog-sidebar. */
.blog-detail .blog-sidebar .blog-cta-card {
  position: sticky;
  top: 180px;
}

/* Recent posts list (reuses the .blogs page's card look, scoped locally) */
.blog-detail .blog-sidebar .blog-card {
  background-color: var(--color-white);
  border: 1px solid rgba(37, 38, 54, 0.12);
  border-radius: 0.5rem;
  overflow: hidden;
}
.blog-detail .blog-sidebar .blog-card-body {
  padding: 1.25rem;
}
.blog-detail .blog-sidebar .blog-date {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: var(--fw-medium);
  color: var(--color-secondary);
}
.blog-detail .blog-sidebar .blog-card h3 {
  font-size: var(--fs-h4);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}
.blog-detail .blog-sidebar .blog-read-more {
  display: inline-block;
  margin-top: 0.75rem;
  color: var(--color-secondary);
  font-weight: var(--fw-semibold);
}
.blog-detail .blog-sidebar .blog-read-more:hover {
  color: var(--color-primary);
}

/* Article body lists — scoped to .blog-content only, so it never touches
   the sidebar's .list-unstyled cards or any list on other pages */
.blog-detail .blog-content ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.blog-detail .blog-content ul li {
  position: relative;
  padding-left: 1.2rem;
}
.blog-detail .blog-content ul li + li {
  margin-top: 0.75rem;
}
.blog-detail .blog-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8rem;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--color-primary);
  border-radius: 2px;
}

/* Article body tables */
.blog-detail .blog-content table {
  margin: 0;
}
.blog-detail .blog-content thead th {
  background-color: var(--color-secondary);
  color: var(--color-white);
  font-weight: var(--fw-semibold);
  border: none;
  padding: 0.875rem 1rem;
}
.blog-detail .blog-content thead th:first-child {
  border-top-left-radius: 0.5rem;
}
.blog-detail .blog-content thead th:last-child {
  border-top-right-radius: 0.5rem;
}
.blog-detail .blog-content tbody td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid rgba(37, 38, 54, 0.12);
  vertical-align: middle;
}
.blog-detail .blog-content tbody tr:nth-child(even) {
  background-color: #f4f4f4;
}
.blog-detail .blog-content tbody tr:last-child td {
  border-bottom: none;
}

/* * contact us page styling */

.contact-section .contact-icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border: 1.5px solid var(--color-primary);
  border-radius: 50%;
  color: var(--color-primary);
  background-color: transparent;
}
.contact-section a.contact-icon-circle:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.contact-section .contact-form-card {
  background-color: var(--color-white);
  border: 2px solid rgba(0, 0, 0, 0.12);
  border-radius: 0.75rem;
  padding: 2.5rem;
  -webkit-border-radius: 0.75rem;
  -moz-border-radius: 0.75rem;
  -ms-border-radius: 0.75rem;
  -o-border-radius: 0.75rem;
}
.contact-section .contact-form-card .form-control,
.contact-section .contact-form-card .form-select {
  border: 1px solid rgba(37, 38, 54, 0.2);
  border-radius: var(--btn-radius);
  padding: 0.75rem 1rem;
}
.contact-section .contact-form-card .form-control:focus,
.contact-section .contact-form-card .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: none;
}

.contact-map-section {
  line-height: 0;
}
.contact-map-section iframe {
  width: 100%;
  height: 450px;
  border: 0;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}

/* * privacy policy page styling */

.privacy-policy.content-area h2 {
  text-align: left;
}

.privacy-policy.content-area ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.privacy-policy.content-area ul li {
  position: relative;
  padding-left: 1.75rem;
}
.privacy-policy.content-area ul li + li {
  margin-top: 0.75rem;
}
.privacy-policy.content-area ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--color-primary);
  border-radius: 2px;
}
.privacy-policy.content-area ul a {
  color: var(--color-primary);
}
.privacy-policy.content-area ul a:hover {
  color: var(--color-secondary);
}

/* * gallery page styling */

.gallery-images .gallery-item {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 0.5rem;
  overflow: hidden;
}
.gallery-images .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-images .gallery-item::after {
  content: "\f62c";
  font-family: "bootstrap-icons";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: var(--color-white);
  background-color: rgba(37, 38, 54, 0.5);
  opacity: 0;
}
.gallery-images .gallery-item:hover::after {
  opacity: 1;
}

/* Lightbox captions disabled site-wide — no data-title/description is
   passed to GLightbox, and this is a belt-and-suspenders hide in case
   one ever is. */
.gslide-description {
  display: none !important;
}

/* * services page styling */

.services-list .service-row {
  padding: 4.5rem 0;
}
.services-list .service-row-alt {
  background-color: #f4f4f4;
}
.services-list .service-row-img-inner {
  border-radius: 0.5rem;
  overflow: hidden;
}

/* Buttons default to a plain neutral look; color is revealed either
   when JS marks the row .is-active (scrolled to viewport center) or
   on direct :hover, whichever happens first. */
.services-list .service-row .btn-matrix-primary,
.services-list .service-row .btn-matrix-secondary,
.services-list .service-row .btn-matrix-white {
  background-color: var(--color-white);
  border-color: var(--color-border-gray);
  color: var(--color-black);
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.services-list .service-row .btn-matrix-call .btn-icon-circle {
  background-color: var(--color-white);
  color: var(--color-black);
  transition: color 0.3s ease;
}

.services-list .service-row.is-active .btn-matrix-primary,
.services-list .service-row .btn-matrix-primary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}
.services-list .service-row.is-active .btn-matrix-primary .btn-icon-circle,
.services-list .service-row .btn-matrix-primary:hover .btn-icon-circle {
  color: var(--color-primary);
}
.services-list .service-row.is-active .btn-matrix-secondary,
.services-list .service-row .btn-matrix-secondary:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}
.services-list .service-row.is-active .btn-matrix-white,
.services-list .service-row .btn-matrix-white:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

/* * service detail page styling */

.service-detail-intro p {
  font-weight: var(--fw-medium);
}

.service-detail .service-detail-img {
  text-align: center;
}
.service-detail .service-detail-block {
  margin-bottom: 4.5rem;
}
.service-detail .service-detail-block:last-child {
  margin-bottom: 0;
}

.service-detail .service-detail-checklist {
  list-style: none;
  padding-left: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.service-detail .service-detail-checklist li {
  min-width: 50%;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-weight: var(--fw-semibold);
  margin-top: 0.75rem;
}
.service-detail .service-detail-checklist i {
  color: var(--color-primary);
  font-size: 1.125rem;
  line-height: var(--body-line-height);
  flex-shrink: 0;
}

/* Service detail — process steps */
.service-process-section .process-step {
  height: 100%;
  padding: 2rem 1.5rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border-gray);
  border-radius: 0.75rem;
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  -webkit-border-radius: 0.75rem;
  -moz-border-radius: 0.75rem;
  -ms-border-radius: 0.75rem;
  -o-border-radius: 0.75rem;
}
.service-process-section .process-step:hover {
  box-shadow: 0px 0px 10px rgba(178, 44, 49, 0.5);
  -webkit-box-shadow: 0px 0px 10px rgba(178, 44, 49, 0.5);
  -moz-box-shadow: 0px 0px 10px rgba(178, 44, 49, 0.5);
  -ms-box-shadow: 0px 0px 10px rgba(178, 44, 49, 0.5);
  -o-box-shadow: 0px 0px 10px rgba(178, 44, 49, 0.5);
  transition: 0.3s ease;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transform: translateY(-5px);
  -webkit-transform: translateY(-5px);
  -moz-transform: translateY(-5px);
  -ms-transform: translateY(-5px);
  -o-transform: translateY(-5px);
}
.service-process-section .process-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-base);
  font-weight: var(--fw-bold);
  font-size: 1.25rem;
}
.service-process-section .process-step h3 {
  margin-top: 1.25rem;
}
.service-process-section .process-step p {
  margin-top: 0.5rem;
}



.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output{
  color: #dc3232;
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output{
  color: #ffb900;
}