/* =========================================================
   Laser & CNC Cutting Page Styles (XFactor Signs)
   Uses theme component colors:
   green:   #32c5d2
   green-1: #52c9ba
   green-2: #5dc09c
   green-3: #84c68f
   dark:    #2f353b
   grey-1:  #f7f7f7
========================================================= */

:root{
  --xf-green:   #32c5d2;
  --xf-green1:  #52c9ba;
  --xf-green2:  #5dc09c;
  --xf-green3:  #84c68f;
  --xf-dark:    #2f353b;
  --xf-grey:    #eeeeee;
  --xf-grey1:   #f7f7f7;
  --xf-regular: #7f8c97;
  --xf-white:   #ffffff;
}

/* Wrapper section helpers */
.xf-laser-wrap{
  margin-top: 10px;
}

/* HERO CARD */
.xf-laser-hero{
  background: var(--xf-grey1);
  border: 1px solid rgba(47,53,59,0.08);
  border-radius: 10px;
  padding: 28px;
  box-shadow: 0 10px 22px rgba(47,53,59,0.10);
}

.xf-laser-hero p{
  color: var(--xf-dark);
  opacity: 0.9;
  line-height: 1.9;
}

/* BADGES */
.xf-badge-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin: 14px 0 0 0;
}

.xf-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  background: var(--xf-white);
  border: 1px solid rgba(47,53,59,0.08);
  font-weight: 700;
  color: var(--xf-dark);
}

.xf-badge i{
  color: var(--xf-green);
}

/* SECTION SPACING */
.xf-section{
  margin-top: 30px;
}

.xf-section-title{
  margin: 0 0 14px 0;
  font-weight: 900;
  color: var(--xf-dark);
}

/* GRID */
.xf-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 991px){
  .xf-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .xf-grid{ grid-template-columns: 1fr; }
}

/* CARD */
.xf-card{
  background: var(--xf-white);
  border-radius: 10px;
  padding: 22px;
  border: 1px solid rgba(47,53,59,0.08);
  box-shadow: 0 10px 18px rgba(47,53,59,0.08);
  height: 100%;
}

.xf-card h4{
  margin: 6px 0 8px 0;
  font-weight: 900;
  color: var(--xf-dark);
}

.xf-card p{
  margin: 0;
  color: var(--xf-regular);
  line-height: 1.8;
}

/* ICON CIRCLE */
.xf-card-icon{
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(50,197,210,0.16); /* green tint */
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom: 12px;
}

.xf-card-icon i{
  color: var(--xf-green);
  font-size: 20px;
}

/* TWO COLUMN BLOCKS */
.xf-two-col{
  display:grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 18px;
}

@media (max-width: 991px){
  .xf-two-col{ grid-template-columns: 1fr; }
}

/* LISTS */
.xf-list{
  margin: 0;
  padding-left: 18px;
  color: var(--xf-dark);
  opacity: 0.9;
  line-height: 1.95;
}

/* PROCESS GRID */
.xf-process{
  display:grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

@media (max-width: 1200px){
  .xf-process{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px){
  .xf-process{ grid-template-columns: repeat(2, 1fr); }
}

.xf-process .xf-card{
  text-align:center;
  padding: 18px;
}

.xf-process .xf-card-icon{
  margin: 0 auto 10px;
  background: rgba(93,192,156,0.18); /* green-2 tint */
}

.xf-process .xf-card-icon i{
  color: var(--xf-green2);
}

/* CTA */
.xf-cta{
  margin-top: 32px;
  background: var(--xf-green); /* primary theme green */
  border-radius: 12px;
  padding: 34px 28px;
  color: var(--xf-white);
  box-shadow: 0 12px 24px rgba(47,53,59,0.14);
}

.xf-cta h3{
  margin: 0;
  font-weight: 1000;
  font-size: 40px;
  line-height: 1.1;
}

.xf-cta p{
  margin: 14px 0 0 0;
  font-size: 16px;
  line-height: 1.9;
  opacity: 0.96;
}

.xf-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top: 18px;
}

.xf-phone{
  font-weight: 1000;
  font-size: 44px;
  letter-spacing: 1px;
}

@media (max-width: 767px){
  .xf-cta h3{ font-size: 30px; }
  .xf-phone{ font-size: 32px; }
}

/* CTA BUTTON */
.xf-btn-white{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--xf-white);
  color: var(--xf-dark) !important;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  text-decoration: none !important;
  border: 1px solid rgba(47,53,59,0.10);
}

.xf-btn-white i{
  color: var(--xf-green);
}

.xf-btn-white:hover{
  background: rgba(255,255,255,0.92);
}

/* OPTIONAL: anchor spacing so internal links don’t hide under sticky header */
.xf-anchor{
  scroll-margin-top: 110px;
}

/* ===============================
   MATERIALS GRID (ENHANCED)
================================ */
.xf-materials-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

@media (max-width: 991px){
  .xf-materials-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .xf-materials-grid{ grid-template-columns: 1fr; }
}

.xf-mcard{
  background: var(--xf-white);
  border-radius: 12px;
  padding: 22px;
  border: 1px solid rgba(47,53,59,0.08);
  box-shadow: 0 10px 18px rgba(47,53,59,0.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
  overflow: hidden;
  height: 100%;
}

.xf-mcard:before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:6px;
  height:100%;
  background: var(--xf-green);
  opacity: 0.0;
  transition: opacity .18s ease;
}

.xf-mcard:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(47,53,59,0.14);
  border-color: rgba(50,197,210,0.35);
}

.xf-mcard:hover:before{ opacity: 1; }

.xf-mhead{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 10px;
}

.xf-swatch{
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(47,53,59,0.10);
  background: rgba(50,197,210,0.12);
}

.xf-swatch i{
  color: var(--xf-dark);
  opacity: 0.8;
  font-size: 16px;
}

.xf-mtitle{
  margin:0;
  font-weight: 1000;
  color: var(--xf-dark);
  line-height: 1.2;
}

.xf-mtitle small{
  display:block;
  margin-top: 3px;
  font-weight: 800;
  color: var(--xf-regular);
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 11px;
}

.xf-mdesc{
  margin: 0;
  color: var(--xf-regular);
  line-height: 1.85;
}

.xf-mmeta{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(47,53,59,0.12);
  color: var(--xf-dark);
  opacity: 0.85;
  font-size: 13px;
}

/* Material swatch presets */
.xf-swatch-wood    { background: rgba(138,127,104,0.18); } /* brown */
.xf-swatch-leather { background: rgba(104,94,71,0.20); }   /* brown-1 */
.xf-swatch-alum    { background: rgba(127,140,151,0.18); } /* regular */
.xf-swatch-foam    { background: rgba(238,238,238,0.85); } /* grey */
.xf-swatch-dibond  { background: rgba(47,53,59,0.10); }    /* dark tint */
.xf-swatch-acrylic { background: rgba(52,152,219,0.14); }  /* blue */


/* =========================================================
   MATERIALS GRID — POLISH PACK
   (1) Tint each dot per material
   (2) Hover animation for cards
   (3) Large faint background numerals
   + Charcoal background section so cards pop
   ========================================================= */

/* 0) Charcoal background for the whole materials section */
#materials-grid{
  background: #2f353b;          /* dark */
  padding: 50px 30px;
  border-radius: 14px;
  margin-top: 30px;
}

/* Make headings readable on charcoal */
#materials-grid .xf-section-title{
  color: #ffffff;
}
#materials-grid p{
  color: rgba(255,255,255,0.75) !important;
}

/* Ensure the cards pop on dark background */
#materials-grid .xf-card{
  background: #ffffff;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 14px 28px rgba(0,0,0,0.22);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

/* 2) Hover animation */
#materials-grid .xf-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0,0,0,0.30);
  border-color: rgba(50,197,210,0.35); /* green */
}

/* 3) Large faint number in the background */
#materials-grid .xf-card h4{
  position: relative;
  z-index: 2;
  margin-top: 0;
}

/* We will set data-num="01" etc on each card */
#materials-grid .xf-card:after{
  content: attr(data-num);
  position: absolute;
  top: -8px;
  right: 14px;
  font-size: 70px;
  font-weight: 1000;
  letter-spacing: -2px;
  color: rgba(47,53,59,0.08);   /* faint dark */
  z-index: 1;
  pointer-events: none;
}

/* Keep content above the big number */
#materials-grid .xf-card p{
  position: relative;
  z-index: 2;
}

/* Card icon: turn into a small dot badge rather than a big icon */
#materials-grid .xf-card-icon{
  width: 52px;
  height: 52px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
  border: 1px solid rgba(47,53,59,0.10);
  background: rgba(50,197,210,0.12); /* default tint */
}

/* Dot itself */
#materials-grid .xf-card-icon i{
  font-size: 14px;
  opacity: 0.95;
}

/* 1) Material-specific tints (apply class to card) */
#materials-grid .mat-wood    .xf-card-icon{ background: rgba(138,127,104,0.20); } /* brown */
#materials-grid .mat-wood    .xf-card-icon i{ color:#8a7f68; }

#materials-grid .mat-leather .xf-card-icon{ background: rgba(104,94,71,0.22); }   /* brown-1 */
#materials-grid .mat-leather .xf-card-icon i{ color:#685e47; }

#materials-grid .mat-alum    .xf-card-icon{ background: rgba(127,140,151,0.18); } /* regular */
#materials-grid .mat-alum    .xf-card-icon i{ color:#7f8c97; }

#materials-grid .mat-foam    .xf-card-icon{ background: rgba(238,238,238,0.95); } /* grey */
#materials-grid .mat-foam    .xf-card-icon i{ color:#677083; } /* grey-2 */

#materials-grid .mat-dibond  .xf-card-icon{ background: rgba(47,53,59,0.12); }    /* dark tint */
#materials-grid .mat-dibond  .xf-card-icon i{ color:#2f353b; }

#materials-grid .mat-acrylic .xf-card-icon{ background: rgba(52,152,219,0.16); }  /* blue */
#materials-grid .mat-acrylic .xf-card-icon i{ color:#3498DB; }

/* Responsive padding on section */
@media (max-width: 767px){
  #materials-grid{
    padding: 35px 18px;
    border-radius: 12px;
  }
  #materials-grid .xf-card:after{
    font-size: 56px;
    top: -6px;
  }
}

/* FORCE CARD TEXT TO BE BLACK */
#materials-grid .xf-card,
#materials-grid .xf-card h4,
#materials-grid .xf-card p,
#materials-grid .xf-card strong{
  color: #2f353b !important;
}

.xf-corner-tab{
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 9999;
  background: #32c5d2;          /* theme green */
  color: #ffffff;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  box-shadow: 0 14px 28px rgba(0,0,0,0.22);
  line-height: 1.15;
  max-width: 220px;
}

.xf-corner-tab strong{
  font-weight: 1000;
}

.xf-corner-tab:hover{
  background: #52c9ba;          /* green-1 */
  color: #ffffff;
  transform: translateY(-1px);
}

@media (max-width: 767px){
  .xf-corner-tab{
    top: auto;
    bottom: 16px;
    right: 16px;
    border-radius: 999px;
    padding: 12px 16px;
    max-width: none;
    line-height: 1.1;
  }
  .xf-corner-tab span{
    display: inline-block;
    text-align: center;
  }
  .xf-corner-tab br{
    display:none;
  }
}

/* =========================================================
   MATERIALS GRID — MOBILE STACK FIX
   ========================================================= */

/* Ensure the grid goes 1-per-row on small screens */
@media (max-width: 767px){

  /* Reduce the charcoal section padding so it doesn't feel cramped */
  #materials-grid{
    padding: 26px 14px !important;
    border-radius: 12px;
  }

  /* Force single column (stack) */
  #materials-grid .xf-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Make cards a bit tighter + more readable */
  #materials-grid .xf-card{
    padding: 18px !important;
    border-radius: 12px !important;
  }

  /* Make the big background number smaller so it doesn't overpower */
  #materials-grid .xf-card:after{
    font-size: 44px !important;
    top: -6px !important;
    right: 12px !important;
    color: rgba(47,53,59,0.06) !important;
  }

  /* Improve typography spacing */
  #materials-grid .xf-card h4{
    font-size: 18px !important;
    margin-bottom: 6px !important;
  }

  #materials-grid .xf-card p{
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  /* "Best for" line keeps neat */
  #materials-grid .xf-card p strong{
    font-weight: 900;
  }
}

/* ===============================
   LASER GALLERY (LIGHTBOX)
================================ */

.xf-gallery-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 18px;
}

@media (max-width: 991px){
  .xf-gallery-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px){
  .xf-gallery-grid{ grid-template-columns: 1fr; }
}

.xf-gallery-item{
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(47,53,59,0.10);
  box-shadow: 0 10px 18px rgba(47,53,59,0.08);
  transition: transform .18s ease, box-shadow .18s ease;
}

.xf-gallery-item:hover{
  transform: translateY(-4px);
  box-shadow: 0 16px 28px rgba(47,53,59,0.14);
}

.xf-gallery-item img{
  width: 100%;
  height: 220px;          /* makes them feel more landscape */
  object-fit: cover;      /* crops nicely */
  display: block;
}

@media (max-width: 600px){
  .xf-gallery-item img{ height: 220px; }
}

/* ===============================
   OWL GALLERY (LANDSCAPE)
================================ */
.xf-owl-gallery{
  margin-top: 18px;
}

.xf-owl-item{
  display: block;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid rgba(47,53,59,0.10);
  box-shadow: 0 10px 18px rgba(47,53,59,0.08);
}

.xf-owl-item img{
  width: 100%;
  height: 240px;     /* landscape feel */
  object-fit: cover;
  display: block;
}

/* Make the slider dots/arrows sit nicely */
.xf-owl-gallery .owl-controls{
  margin-top: 12px;
}

@media (max-width: 600px){
  .xf-owl-item img{ height: 220px; }
}

/* ===============================
   FIX: Fancybox overlay behind header/slider (z-index)
   =============================== */
.fancybox-overlay,
.fancybox-wrap,
.fancybox-skin,
.fancybox-opened{
  z-index: 999999 !important;
}

.fancybox-overlay{
  position: fixed !important;
}

/* If your sticky header/top bar is sitting above everything */
.c-layout-header,
.xf-top-bar{
  z-index: 9990; /* keep high, but below fancybox */
}

/* OPTIONAL: prevent slider from creating weird stacking contexts */
.c-layout-revo-slider,
.tp-banner-container,
.tp-banner,
.rev_slider_wrapper{
  z-index: 1;
  position: relative;
}

.xf-section img {
    transition: all 0.3s ease;
}

.xf-section img:hover {
    transform: scale(1.03);
}