/* ============================================================
   PREMIUM LUXURY CORPORATE THEME — Vishwakarma Fabrication
   ------------------------------------------------------------
   Palette: Charcoal Black + Deep Red + White. Metallic Gold is
   used ONLY as a subtle accent (thin borders, small icon touches,
   a hover glow) — never as a dominant fill or button color.

   Purely a COLOR/visual override. Loaded after style.css and
   color.css so it wins on cascade. No selectors here change
   layout, spacing, sizing, or structure — only colors,
   backgrounds, borders, shadows and hover states.
   ============================================================ */

:root {
    --lux-bg: #0D0D0D;          /* Charcoal Black */
    --lux-section-bg: #161616;
    --lux-card-bg: #1C1C1C;
    --lux-text: #FFFFFF;
    --lux-text-soft: #C4C4C4;
    --lux-red: #8B1A1A;         /* Deep Red — primary accent */
    --lux-red-hover: #A93226;
    --lux-gold: #C9A227;        /* subtle accent ONLY */
    --lux-border: #2A2A2A;
    --lux-divider: #333333;
}

/* ------------------------------------------------------------
   BASE / TYPOGRAPHY
   ------------------------------------------------------------ */
html, body {
    background: var(--lux-bg) !important;
    color: var(--lux-text-soft) !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--lux-text) !important;
    letter-spacing: 0.2px;
}

p, li, span, td, th, label {
    color: var(--lux-text-soft);
}

a {
    color: var(--lux-text);
}

a:hover,
a:focus {
    color: var(--lux-red) !important;
}

::selection {
    background: var(--lux-red);
    color: #fff;
}

/* ------------------------------------------------------------
   SECTION BACKGROUNDS (all light/white sections -> charcoal,
   with a slightly lighter tone for alternating rhythm)
   ------------------------------------------------------------ */
.light-bg,
.gray-bg,
.services-section,
.services-section.style-two,
.welcome-section,
.welcome-section-two,
.welcome-section-three,
.news-section,
.testimonials-section-two.style-two,
.newsletter-section .wrapper-box,
.cta-section,
.page-title,
.team-section,
.facts-section {
    background-color: var(--lux-bg) !important;
}

.services-section.style-two:before {
    background: var(--lux-section-bg) !important;
}

/* ------------------------------------------------------------
   CARDS / CONTENT BLOCKS
   Deep charcoal card with a fine border; a soft red-tinted
   shadow on hover gives premium lift without heavy color.
   ------------------------------------------------------------ */
.card,
.service-block .content,
.service-block .inner-box,
.team-block .content,
.news-block-two .content,
.news-block-three .content,
.testimonials-section .icon-box,
.testimonial-block-two .inner-box,
.blog-sidebar .widget,
.sidebar-page-container .author-box,
.comments-area .comment-box.reply-comment .comment-inner,
.project-details .project-info .column,
.welcome-section-two .experience-years,
.facts-section .content,
.accordion-box .block {
    background-color: var(--lux-card-bg) !important;
    border: 1px solid var(--lux-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important;
    transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.card:hover,
.service-block .inner-box:hover,
.team-block:hover .content,
.news-block-two:hover .content,
.news-block-three:hover .content,
.accordion-box .block:hover {
    border-color: rgba(139, 26, 26, 0.55) !important;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.55) !important;
    transform: translateY(-3px);
}

.card .card-title,
.card-text {
    color: var(--lux-text) !important;
}

/* ------------------------------------------------------------
   HEADER / NAVIGATION (charcoal with subtle glass effect)
   ------------------------------------------------------------ */
.header-top,
.main-header .header-upper,
.sticky-header,
.main-header .sticky-header .header-upper,
.main-menu .inner-container,
.main-menu .navigation > li > ul,
.main-menu .navigation > li > ul > li > ul,
.mobile-menu .menu-box {
    background-color: rgba(13, 13, 13, 0.94) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--lux-border) !important;
}

.main-menu .navigation > li > a,
.main-menu .navigation > li > ul > li > a,
.main-menu .navigation > li > ul > li > ul > li > a {
    color: var(--lux-text) !important;
}

.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a,
.main-menu .navigation > li > ul > li:hover > a {
    color: var(--lux-red) !important;
}

.header-top ul.contact-info,
.header-top ul.contact-info a {
    color: var(--lux-text-soft) !important;
}

/* subtle gold touch on small header icons only */
.header-top ul.contact-info li i,
.header-top .social-icon li a {
    color: var(--lux-gold) !important;
}

/* ------------------------------------------------------------
   BUTTONS (Deep Red, white text; brighter red on hover; a hint
   of gold glow on focus/hover keeps gold to a whisper, not a fill)
   ------------------------------------------------------------ */
.theme-btn,
.theme-accent-btn,
.btn-style-one,
.btn-primary,
.hero-btn-primary,
.styled-pagination li a.active,
.styled-pagination li a:hover,
.cta-section .link .theme-btn,
.service-block .content .theme-btn,
input[type="submit"],
button[type="submit"] {
    background-color: var(--lux-red) !important;
    border-color: var(--lux-red) !important;
    color: #fff !important;
    font-weight: 600;
    letter-spacing: 0.3px;
    box-shadow: 0 6px 16px rgba(139, 26, 26, 0.35);
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}

.theme-btn:hover,
.theme-accent-btn:hover,
.btn-style-one:hover,
.btn-primary:hover,
.hero-btn-primary:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
    background-color: var(--lux-red-hover) !important;
    border-color: var(--lux-gold) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(201, 162, 39, 0.2);
    transform: translateY(-2px);
}

.hero-btn-secondary {
    background: transparent !important;
    border: 1px solid var(--lux-red) !important;
    color: #fff !important;
}

.hero-btn-secondary:hover {
    background: var(--lux-red) !important;
    border-color: var(--lux-gold) !important;
    color: #fff !important;
}

.scroll-to-top {
    color: var(--lux-red) !important;
    border-color: var(--lux-red) !important;
}

.scroll-to-top:hover {
    background-color: var(--lux-red-hover) !important;
    color: #fff !important;
}

/* ------------------------------------------------------------
   ICONS (small glyphs get the metallic gold touch — this is the
   ONE place gold is used broadly, and it is always a small element)
   ------------------------------------------------------------ */
.icon-box .icon,
.consult-widget .icon,
.welcome-section .icon-box .icon,
.welcome-section-two .experience-years .icon,
.service-block .icon,
[class*="flaticon-"] {
    color: var(--lux-gold) !important;
}

.consult-widget .icon,
.consult-widget .phone,
.consult-widget .phone:before {
    background: var(--lux-card-bg) !important;
}

/* Footer contact widget (address/phone/email rows): icon is a small
   glyph only — never give it a background, or it stretches to the
   full height of the multi-line text next to it and shows as a
   solid block instead of a small icon. */
.contact-widget .icon-box {
    border-bottom: 1px solid var(--lux-divider) !important;
    align-items: flex-start !important;
}

.contact-widget .icon {
    background: none !important;
    color: var(--lux-gold) !important;
    display: flex !important;
    align-items: flex-start !important;
    padding-top: 3px;
}

.contact-widget .text,
.contact-widget .text a {
    color: var(--lux-text-soft) !important;
}

/* ------------------------------------------------------------
   SEC-TITLE / HEADINGS ACCENT
   ------------------------------------------------------------ */
.sec-title .sub-title {
    color: var(--lux-red) !important;
    border-color: var(--lux-gold) !important;
}

/* ------------------------------------------------------------
   FORM FIELDS (charcoal, red focus border with a whisper of gold)
   ------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select,
.form-control,
.contact-form textarea,
.contact-form input,
.comment-form .form-group select,
.newsletter-section input {
    background-color: var(--lux-card-bg) !important;
    border: 1px solid var(--lux-border) !important;
    color: var(--lux-text) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--lux-text-soft) !important;
    opacity: 1;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
    border-color: var(--lux-red) !important;
    box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.18) !important;
    outline: none !important;
}

/* ------------------------------------------------------------
   DIVIDERS / BORDERS
   ------------------------------------------------------------ */
hr,
.footer-bottom,
.styled-pagination li a {
    border-color: var(--lux-divider) !important;
}

.styled-pagination li a {
    background: var(--lux-card-bg) !important;
    color: var(--lux-text) !important;
}

/* ------------------------------------------------------------
   FOOTER (Charcoal Black with deep-red highlights, subtle gold
   used only on the widget title underline and small icon touches)
   ------------------------------------------------------------ */
.main-footer,
.footer-bottom {
    background-color: #0A0A0A !important;
}

.footer-bottom {
    border-top: 1px solid var(--lux-divider) !important;
}

.widget .widget_title {
    color: var(--lux-text) !important;
    border-color: var(--lux-gold) !important;
}

.about-widget .text,
.footer-bottom .copyright-text,
.footer-bottom .copyright-text a {
    color: var(--lux-text-soft) !important;
}

.links-widget .list li a:hover,
.footer-bottom .copyright-text a:hover {
    color: var(--lux-red) !important;
}

.footer-bottom .social-icon li a {
    background: var(--lux-card-bg) !important;
    color: var(--lux-gold) !important;
    border: 1px solid var(--lux-border) !important;
}

.footer-bottom .social-icon li a:hover {
    background: var(--lux-red) !important;
    color: #fff !important;
    border-color: var(--lux-red) !important;
}

.contact-widget .icon {
    background: var(--lux-red) !important;
    color: #fff !important;
}

/* ------------------------------------------------------------
   MISC (progress bars, tags, widgets, pop-ups)
   ------------------------------------------------------------ */
.progress-levels .progress-box .bar {
    background: var(--lux-border) !important;
}

.progress-levels .progress-box .bar .bar-fill {
    background: var(--lux-red) !important;
}

.tag-widget a,
.post-tag ul.tag li a,
.category-widget-two li a {
    background: var(--lux-card-bg) !important;
    color: var(--lux-text-soft) !important;
    border: 1px solid var(--lux-border) !important;
}

.tag-widget a:hover,
.post-tag ul.tag li a:hover,
.category-widget-two li a:hover,
.category-widget-two li.active a {
    background: var(--lux-red) !important;
    color: #fff !important;
    border-color: var(--lux-red) !important;
}

.search-popup .search-form fieldset,
.mobile-menu .menu-backdrop {
    background: rgba(13, 13, 13, 0.96) !important;
}

/* ------------------------------------------------------------
   STICKY HEADER ON SCROLL
   ------------------------------------------------------------
   The theme's JS already toggles a "fixed-header" class on
   .main-header once the user scrolls past 100px, but no CSS
   rule ever made .main-header actually stick — so it never
   visually happened. This adds that missing rule only; the
   scroll-triggering JS itself is untouched.
   ------------------------------------------------------------ */
.fixed-header .main-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    background-color: #0D0D0D !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.55);
    animation: luxHeaderSlideDown 0.35s ease;
}

@keyframes luxHeaderSlideDown {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}