/* 
   Lightbox Cabinets - Premium Dark Theme 
   Typography: Inter / Roboto (using system fonts stack for performance initially, can add google fonts link in HTML)
*/

:root {
    --bg-color: #010101;
    --surface-color: #1a1a1a;
    --surface-hover: #252525;
    --primary-color: #d4af37;
    /* Metallic Gold */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --accent-glow: rgba(212, 175, 55, 0.2);
    --font-heading: 'Inter', system-ui, -apple-system, sans-serif;
    --font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --transition-speed: 0.3s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-color);
    color: var(--text-primary);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    /* Ensure stacking context */
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/page-bg.jpg');
    background-position: center -275px;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 1;
    /* Low opacity for subtle texture */
    z-index: -1;
    pointer-events: none;
}

body.no-bg::before {
    display: none;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-speed);
}

ul {
    list-style: none;
}

/* Typography */
h1,
h2,
h3 {
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 {
    font-size: 3.5rem;
    letter-spacing: -0.02em;
    background: linear-gradient(to right, #fff, #999);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-size: 2.5rem;
    color: var(--primary-color);
}

/* Navigation */
.navbar {
    display: flex;
    justify-content: center;
    /* Center nav links */
    align-items: center;
    padding: 0.5rem 2%;
    background-color: rgba(13, 13, 13, 0.95);
    backdrop-filter: blur(10px);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo {
    position: absolute;
    /* Remove from flex flow */
    left: 2%;
    /* Position left */
    font-size: 1rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.logo span {
    color: var(--primary-color);
}

.nav-links {
    display: flex;
    gap: 1.5rem;
}

.nav-links a {
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    position: relative;
    padding-bottom: 5px;
}

/* Dropdown Menu */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--surface-color);
    min-width: 140px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 4px;
    top: 100%;
    left: 0;
}

.dropdown-content a {
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.dropdown-content a:last-child {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: var(--surface-hover);
    color: var(--primary-color);
}

.dropdown:hover .dropdown-content {
    display: block;
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-color);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: width var(--transition-speed);
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}

/* Hamburger Menu */
.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.hamburger div {
    width: 25px;
    height: 3px;
    background-color: var(--text-primary);
    transition: all 0.3s ease;
}

/* Toggle Animation */
.hamburger.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.toggle .line2 {
    opacity: 0;
}

.hamburger.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Hero Section */
.hero {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 5%;
    background: radial-gradient(circle at center, rgba(31, 31, 31, 0.4) 0%, rgba(13, 13, 13, 0.5) 100%);
    position: relative;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    opacity: 0.15;
    mix-blend-mode: overlay;
    pointer-events: none;
}

.hero-content {
    max-width: 800px;
    z-index: 1;
    animation: fadeIn 1s ease-out;
}

.hero p {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero .slogan {
    font-size: 3rem;
    font-weight: 800;
    margin-top: 2rem;
    color: #FFFF00;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    background-color: var(--primary-color);
    color: #000;
    font-weight: 700;
    text-transform: uppercase;
    border-radius: 4px;
    letter-spacing: 0.05em;
    transition: transform var(--transition-speed), box-shadow var(--transition-speed);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2);
}

.btn-outline {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    margin-left: 1rem;
}

.btn-outline:hover {
    background-color: var(--primary-color);
    color: #000;
}

/* Sections */
.section {
    padding: 0 5% 4rem 5%;
}

.section-dark {
    background-color: var(--surface-color);
}

.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    align-items: start;
}

.card {
    background-color: var(--bg-color);
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: transform 0.3s, border-color 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-color);
}

.card h3 {
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 0.5rem;
}

.card p {
    color: var(--text-secondary);
    font-size: 0.95rem;
}

/* Footer */
footer {
    padding: 3rem 5%;
    background-color: #000;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
    color: var(--text-secondary);
}

footer p {
    font-size: 0.9rem;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
/* Responsive */
@media (max-width: 768px) {
    body {
        overflow-x: hidden;
    }

    .navbar {
        justify-content: space-between;
        padding: 1rem 5%;
        align-items: center;
    }

    .logo {
        position: static;
        margin: 0;
        font-size: 1.2rem;
    }

    .hamburger {
        display: flex;
        z-index: 1001;
    }

    .nav-links {
        position: fixed;
        right: 0px;
        height: 100vh;
        top: 0;
        background-color: rgba(13, 13, 13, 0.98);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
        z-index: 1000;
        padding-top: 0;
    }

    .nav-links.nav-active {
        transform: translateX(0%);
    }

    .nav-links a {
        font-size: 1.5rem;
        margin: 1.5rem 0;
        opacity: 1;
        /* Ensure visible */
    }

    /* Hero Responsive */
    /* .hero .hero-content styles removed as they were empty */

    /* Override inline styles via specific selector if needed, 
       but inline style on div wins typically. 
       We will need to add !important or better yet, avoid inline styles.
       However, since user asked for inline specific moves, we might need a class update in HTML.
       For now, let's try to counteract it with a stronger rule or assume we remove inline later?
       Actually, we can target the div inside .hero */

    .hero>div {
        transform: translateY(0) !important;
        /* Reset vertical offset for mobile */
    }

    h1 {
        font-size: 2.2rem;
        /* Smaller H1 */
    }

    .hero .slogan {
        font-size: 1.2rem;
        margin-top: 2rem;
        position: static;
        /* Reset absolute positioning if problematic, or adjust */
    }

    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .btn {
        width: 100%;
        margin-bottom: 1rem;
    }

    .btn-outline {
        margin-left: 0;
    }
}

/* WhatsApp Button */
/* WhatsApp Button */
/* WhatsApp Button */
/* WhatsApp Button */
.whatsapp-btn {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background-color: #25D366;
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    min-width: 160px;
}

.whatsapp-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.whatsapp-icon {
    width: 24px;
    height: 24px;
    fill: white;
}

/* Phone Button */
.phone-btn {
    position: fixed;
    bottom: 6rem;
    /* Stacked above WhatsApp button */
    right: 2rem;
    background-color: var(--primary-color);
    color: #000;
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    min-width: 160px;
}

.phone-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.phone-icon {
    width: 24px;
    height: 24px;
    fill: #000;
}

/* Email Button */
.email-btn {
    position: fixed;
    bottom: 10rem;
    /* Stacked above Phone button */
    right: 2rem;
    background-color: #4a4a4a;
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    min-width: 160px;
}

.email-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

.email-icon {
    width: 24px;
    height: 24px;
    fill: white;
}

/* Zoom effect for images */
.zoom-on-hover {
    transition: transform 0.3s ease;
    cursor: pointer;
}

.zoom-on-hover:hover {
    transform: scale(3.0);
    z-index: 10;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}