/* =========================================================
GLOBAL SCROLL + RESET BEHAVIOR
========================================================= */

/* Enables smooth animated scrolling when using anchor links */
html {
    scroll-behavior: smooth;
}

/* 
Prevents browser "rubber band" overscroll effect (especially on mobile)
Also removes default body margin to eliminate layout gaps
*/
html,
body {
    overscroll-behavior: none;
    margin: 0;
}

body {
    overflow-x: hidden;
}

/* Basic header/footer color placeholders */
header { background-color: #2a2829; }
footer { background-color: green; }

/* 
CSS variable used throughout layout.
Represents the exact height of the sticky header/nav.
Used for hero sizing and anchor offset correction.
*/
:root {
    --header-height: 82px;
}

/* 
Prevents sticky header from covering anchored sections when scrolling.
Adds invisible offset space equal to header height.
*/
section {
    scroll-margin-top: var(--header-height);
}

/* =========================================================
FULL-SCREEN HERO SYSTEM
========================================================= */

/*
Creates a hero that fills the viewport minus sticky header height.
Uses dvh (dynamic viewport height) to avoid mobile browser UI jump issues.
Flexbox centers hero content both vertically and horizontally.
Background is cropped to always show bottom portion of image.
*/
.hero-full {
    position: relative;

    /* ⭐ Stable hero height on mobile */
    min-height: calc(100svh - var(--header-height));

    display: flex;
    align-items: center;
    justify-content: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;

    /* ⭐ Prevent mobile repaint jitter */
    transform: translateZ(0);
}

/*
Controls hero text width for readability.
Balanced text wrapping improves headline appearance.
Padding creates breathing room inside full-height hero.
*/
.hero-full .container {
    position: relative;
    z-index: 2;

    max-width: 760px;
    text-wrap: balance;
    padding: 60px 20px;
}

/* ⭐ Stable dark overlay layer (prevents background flicker on scroll) */
.hero-full::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.45);
}

/*
Establishes positioning context for overlay layer.
*/
.hero-overlay {
    position: relative;
}

/*
Dark overlay improves text contrast on background images.
pointer-events disabled so overlay never blocks clicks.
*/
.hero-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.1);
    pointer-events: none;
}

/*
Ensures hero content sits above overlay layer.
*/
.hero-overlay > .container {
    position: relative;
    z-index: 1;
}

/* =========================================================
HERO SCROLL INDICATOR ARROW
========================================================= */

/*
Fixed positioning keeps arrow aligned to viewport bottom,
not hero container. This ensures consistent placement.
Centered horizontally via translateX.
Bounce animation encourages scroll interaction.
*/
.hero-scroll {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    color: #fff;
    font-size: 2.2rem;
    opacity: .75;
    text-decoration: none;
    z-index: 20;
    animation: heroBounce 2.2s infinite;
    transition: opacity .35s ease;
}

/* Slight visibility boost on hover */
.hero-scroll:hover {
    opacity: 1;
}

/* Used by JavaScript to fade arrow when hero leaves viewport */
.hero-scroll.is-hidden {
    opacity: 0;
    pointer-events: none;
}

/* Subtle bounce animation loop */
@keyframes heroBounce {
    0%,20%,50%,80%,100% { transform: translate(-50%,0); }
    40% { transform: translate(-50%,8px); }
    60% { transform: translate(-50%,4px); }
}

/* =========================================================
ALTERNATE HERO BACKGROUND STYLES
========================================================= */

/*
Colorful gradient hero option with dark overlay for readability.
*/
.hero-gradient {
    background:
        linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)),
        linear-gradient(120deg,#00b4d8,#5fdc4b,#ffd60a,#ff7a00,#ff2f92);
    color: #fff;
}

/*
Dark textured radial gradient hero option.
Adds subtle brand color lighting effects.
*/
.hero-dark {
    background:
        radial-gradient(circle at 20% 30%, rgba(0,180,216,.35), transparent 45%),
        radial-gradient(circle at 80% 70%, rgba(255,47,146,.35), transparent 45%),
        radial-gradient(circle at 60% 20%, rgba(255,122,0,.35), transparent 45%),
        radial-gradient(circle at 40% 80%, rgba(93,220,75,.35), transparent 45%),
        #2b2b2b;
    color: #fff;
}

/* =========================================================
HEADER UI ELEMENTS
========================================================= */

#top-bar { background-color: #444444; }

/*
Mobile nav toggle styling.
Removes default button visuals and improves hover feel.
*/
.nav-toggle {
    color: white;
    background: none;
    border: none;
    font-size: 1.6rem;
}

.nav-toggle:focus {
    outline: none;
    box-shadow: none;
}

.nav-toggle i {
    transition: .25s;
}

.nav-toggle:hover i {
    transform: scale(1.15);
}

/* =========================================================
BRAND ACCENT COLOR UTILITIES
========================================================= */

.icon-cyan   { color:#00b4d8; }
.icon-green  { color:#5fdc4b; }
.icon-orange { color:#ff7a00; }
.icon-pink   { color:#ff2f92; }
.icon-yellow { color:#ffd60a; }

/* =========================================================
FEATURE SECTION STYLES
========================================================= */

/* Decorative gradient divider for headings */
.feature-divider {
    width:250px;
    height:3px;
    background:linear-gradient(90deg,#00b4d8,#ff7a00,#ff2f92);
    border-radius:3px;
    margin-bottom:20px;
}

/* Gradient border highlight panel effect */
.highlight-panel {
    border:2px solid transparent;
    background:
        linear-gradient(#fff,#fff) padding-box,
        linear-gradient(120deg,#00b4d8,#5fdc4b,#ffd60a,#ff7a00,#ff2f92) border-box;
}

/* Icon container styling used in feature rows */
.feature-icon {
    width:60px;
    height:60px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    background:rgba(0,0,0,.04);
    font-size:26px;
    margin-right:18px;
}

/* =========================================================
PRIMARY CTA BUTTON GRADIENT SYSTEM
========================================================= */

/*
Dark gradient base for strong contrast against hero.
White border improves visibility on busy backgrounds.
*/
.btn-gradient {
    background: linear-gradient(120deg,#005766,#267a1f,#9c7800,#8a3c00,#86124a);
    border: 2px solid white;
    color: #fff;
    font-weight: 700;
    letter-spacing: .5px;
    text-shadow: 0 1px 2px rgba(0,0,0,.6);
    transition: background .35s ease, filter .2s ease;
}

/* Slightly lighter gradient on hover for interactive feedback */
.btn-gradient:hover {
    background: linear-gradient(120deg,#007c94,#3da12f,#c49a00,#b85700,#a31761);
    filter: brightness(1.05);
    border: 2px solid white;
}

/* Pressed state */
.btn-gradient:active {
    filter: brightness(.92);
    border: 2px solid white;
}


.dm-card {
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,.08);
    transition: all .35s ease;
    position: relative;
}

.dm-card:hover {
    transform: translateY(-10px) rotate(-0.5deg);
    box-shadow: 0 25px 50px rgba(0,0,0,.15);
}

.dm-card-bar {
    height: 8px;
}

.dm-card-body {
    padding: 30px;
}

.dm-icon {
    font-size: 48px;
    margin-bottom: 15px;
    display: inline-block;
}

/* PRINT COLORS */

.dm-print .dm-card-bar {
    background: linear-gradient(90deg,#ff004c,#ff7a00,#ffd800);
}

.dm-print .dm-icon {
    color: #ff004c;
}

/* EMBROIDERY COLORS */

.dm-embroider .dm-card-bar {
    background: linear-gradient(90deg,#0066ff,#00d4ff,#00ffa2);
}

.dm-embroider .dm-icon {
    color: #0066ff;
}

/* PROMO COLORS */

.dm-promo .dm-card-bar {
    background: linear-gradient(90deg,#7b00ff,#c400ff,#ff00aa);
}

.dm-promo .dm-icon {
    color: #7b00ff;
}



.dm-testimonial {
    position: relative;
    padding: 40px;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    transition: all .35s ease;
    overflow: hidden;
}

.dm-testimonial:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(0,0,0,.15);
}

.dm-quote {
    font-size: 90px;
    line-height: 1;
    position: absolute;
    top: -10px;
    left: 20px;
    opacity: .08;
    font-weight: 900;
}

.dm-testimonial p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 20px;
}

.dm-name {
    font-weight: 800;
    letter-spacing: 2px;
    font-size: 14px;
}

/* COLOR PERSONALITY */

.dm-testimonial-print {
    border-top: 6px solid #ff004c;
}

.dm-testimonial-embroider {
    border-top: 6px solid #0066ff;
}

.dm-testimonial-promo {
    border-top: 6px solid #7b00ff;
}


.dm-btn-section {
    display: inline-block;
    padding: 15px 34px;
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(180deg,#4da3ff,#1f78e0);
    border-radius: 6px;
    border: 1px solid #1f78e0;
    letter-spacing: .4px;
    transition: background .2s ease;
}

.dm-btn-section:hover {
    background: linear-gradient(180deg,#3c93f0,#1666c2);
    color: #fff;
}


.dm-backtotop {
    position: fixed;
    right: 20px;
    bottom: 25px;
    width: 48px;
    height: 48px;
    background: linear-gradient(180deg,#4da3ff,#1f78e0);
    color: #fff;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
    z-index: 999;
}

.dm-backtotop:hover {
    background: linear-gradient(180deg,#3c93f0,#1666c2);
    color: #fff;
}

.dm-backtotop.show {
    opacity: 1;
    visibility: visible;
}


.dm-social-card {
    padding: 40px 20px;
    background: #ffffff;
    border-radius: 18px;
    text-decoration: none;
    color: #222;
    box-shadow: 0 12px 30px rgba(0,0,0,.08);
    transition: all .3s ease;
    border-top: 6px solid transparent;
}

.dm-social-card i {
    font-size: 48px;
}

.dm-social-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 55px rgba(0,0,0,.15);
}

/* Facebook Color Energy */

.dm-social-card[href*="facebook"] {
    border-top-color: #1877f2;
}

.dm-social-card[href*="facebook"]:hover {
    color: #1877f2;
}

/* Instagram Gradient Energy */

.dm-social-card[href*="instagram"] {
    border-top-color: #e1306c;
}

.dm-social-card[href*="instagram"]:hover {
    color: #e1306c;
}

.dm-card,
.dm-testimonial {
    position: relative;
    overflow: hidden;
}


.dm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 1055;
    display: flex;
    align-items: center;
    justify-content: center;
}

.work-item img {
    transition: transform .3s ease;
}

.work-item:hover img {
    transform: scale(1.05);
}

.dm-lightbox-body {
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lightboxImg {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
}

/* uncomment if you want a background color in the modal
.modal-content.bg-dark {
    background-color: #000 !important;
}
*/

/* ========================================
HEADER SHRINK ON SCROLL
======================================== */

header {
    transition: all .25s ease;
}

/* Default logo size */
.navbar-brand img {
    transition: all .25s ease;
    height: 70px;
}

/* Shrunk state */
header.header-shrink {
    box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

header.header-shrink .navbar-brand img {
    height: 42px;
}

header.header-shrink .navbar {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

/* ========================================
NAV ACTIVE STATE
======================================== */

.navbar .nav-link {
    position: relative;
    transition: color .2s ease;
}

.navbar .nav-link.active {
    color: #fff;
    font-weight: 600;
}

/* subtle underline indicator */
.navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: #ff7a00;
    border-radius: 2px;
}

.tooltip-word {
  text-decoration: underline dotted;
  font-weight: bold;
  color: rgba(0, 0, 0, 0.75);
  cursor: help;
  position: relative;
  z-index: 2;
}

.tooltip-wide .tooltip-inner {
  max-width: 320px;
  text-align: left;
  line-height: 1.4;
}

.fade-field {
    opacity: 0;
    transform: translateY(6px);
    transition: all 0.25s ease;
}

.fade-field.show {
    opacity: 1;
    transform: translateY(0);
}

.highlight-input {
    border-color: #e25425; /* your brand orange */
    box-shadow: 0 0 0 0.25rem rgba(226, 84, 37, 0.25);
    transition: all 0.2s ease;
}