/*
Theme Name: DT Mining Theme
Theme URI: https://dtmining-ks.com/
Author: Dielli Demjaha
Author URI: https://example.com
Description: Custom WordPress theme for DT Mining website.
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dtmining
*/



    :root{
      --brand-orange: #f28c28; /* tweak if you have the exact hex */
      --text-dark: #0f172a;
      --muted: #6b7280;
      --card-radius: 22px;
    }
  body{
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-dark);
  opacity: 1 !important;           /* never hide the whole page */
  transition: none;                 /* don’t rely on JS to reveal the page */
}

/* Kill any accidental horizontal scroll */
html, body { overflow-x: hidden; }

    .brand-mark span{color: var(--brand-orange);}

    /* Hero */
    .hero-wrap{padding: 72px 0 40px;}
    .hero-title{
      font-size: clamp(2rem, 4vw + 1rem, 64px);
      font-weight: 800; line-height: 1.1;
    }
    .hero-title .accent{color: var(--brand-orange);}
    .btn-orange{
      --bs-btn-bg: var(--brand-orange);
      --bs-btn-border-color: var(--brand-orange);
      --bs-btn-hover-bg: #e67f1b;
      --bs-btn-hover-border-color: #e67f1b;
      --bs-btn-color: #fff;
    }
    .link-muted{color: #111; opacity:.75; font-weight:600;}
    .link-muted:hover{opacity:1; color:#111;}

    /* Media Cards */
    .stack-card{
      border: 0;
      border-radius: var(--card-radius);
      overflow: hidden;
      box-shadow: 0 12px 35px rgba(0,0,0,.08);
      background: #fff;
    }
    .stack-card .media{
      position: relative;
      width: 100%;
      aspect-ratio: 4/5;              /* keeps consistent tall look */
      overflow: hidden;
    }
    .stack-card img, .stack-card video{
      width: 100%; height: 100%; object-fit: cover; display: block;
    }
    .stack-card .caption{
      position: absolute;
      left: 16px; right: 16px; bottom: 16px;
      background: #fff;
      border-radius: 14px;
      padding: 18px 18px;
      box-shadow: 0 10px 25px rgba(0,0,0,.12);
    }
    .hash{color: var(--brand-orange); font-weight: 800; margin-right:.25rem;}
    .caption h5{margin:0; font-weight: 800;}
    .caption p{margin:8px 0 0; color: var(--muted);}
    /* Stagger the cards on lg+ like the screenshot */


    @media (min-width: 992px){
      .stagger-1{margin-top: 56px;}
      .stagger-2{margin-top: 0;}
      .stagger-3{margin-top: 32px;}
    }
    /* softer rounded corners similar to the reference */
    .rounded-xxl{border-radius: var(--card-radius) !important;}


    .footer-link:hover {
  color: #f28c28 !important;
}

.footer .bi {
  vertical-align: middle;
}

.footer a:hover {
  color: #f28c28 !important;
}

.footer hr {
  opacity: 0.2;
}

.img-contain {
  max-width: 100%;
  max-height: 100vh;
  object-fit: contain;
  display: block;
}

.thumb img {
  transition: transform .25s ease, filter .25s ease;
  cursor: zoom-in;
}
.thumb:hover img {
  transform: scale(1.03);
  filter: brightness(1.05);
}

   .section-heading { font-weight: 700; margin-bottom: 1rem; }
    .lead-text { font-size: 1.1rem; line-height: 1.7; }
    .rounded-4 { border-radius: 1rem; }

    /* CTA Banner */
    .cta-banner {
      background: var(--brand-orange);
      color: #fff;
      padding: 3rem 1rem;
      border-radius: .75rem;
      text-align: center;
      margin-bottom: 3rem;
    }
    .cta-banner h2 { font-weight: 700; }
    .cta-banner p { opacity: 0.95; }

    /* Product Cards */
    .product-card img {
      border-radius: .75rem;
      box-shadow: 0 6px 18px rgba(0,0,0,0.12);
      transition: transform 0.3s ease;
       object-fit: cover;  
      
    }
    .product-card img:hover {
      transform: scale(1.05);
    }

      /* Make thumbs maintain nice crops */
  .cover-img { object-fit: cover; width: 100%; height: 100%; }
  /* If your thumbs have inconsistent aspect ratios, force one: */
  .thumb .cover-img { aspect-ratio: 4 / 3; display: block; }

  /* Modal image should fit inside (contain) without stretching */
  #lightbox-img { max-width: 100%; max-height: 100%; object-fit: contain; }


/* gallery css */
:root { --brand-orange:#f28c28; }

.pagination .page-link {
  border-radius: .5rem;
  border: 1px solid rgba(0,0,0,.1);
  color: #111;
}
.pagination .page-link:hover {
  color: #111;
  border-color: rgba(0,0,0,.2);
  background: rgba(0,0,0,.04);
}
.pagination .page-item.active .page-link {
  background-color: var(--brand-orange);
  border-color: var(--brand-orange);
  color: #fff;
}
.pagination .page-item.disabled .page-link {
  color: #6c757d;
  background-color: #f8f9fa;
  border-color: rgba(0,0,0,.1);
  pointer-events: none;
}

/* =======================================
   Disable transitions/animations on mobile
   ======================================= */
@media (max-width: 1024px) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }

  html, body {
    scroll-behavior: auto !important;
  }
}