/* ============================================================
   GLOBAL & COLOR PALETTE (From MAXIT Logo)
   Pure Black: #000000 | White: #FFFFFF | Gold: #C48F37
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap');

:root {
    --primary-black: #000000;
    --primary-white: #FFFFFF;
    --accent-gold: #C48F37; /* Rich Gold from Logo X */
    --accent-gold-hover: #D7A34E; /* Lighter Gold on hover */
    --nav-dark: #111111; /* Slightly lighter black for contrast */
    --card-dark: #191919; /* Dark Gray for depth on Pure Black background */
}

html { 
    scroll-behavior: smooth; /* Modern scroll feel */
    scroll-padding-top: 90px; /* Offset sticky navbar */
}

body { 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Fallback sans-serif */
    background-color: var(--primary-black) !important;
    overflow-x: hidden;
}

/* Add specialized sleek font - Montserrat (Free Google Font) */
body, button, input, textarea {
    font-family: 'Montserrat', sans-serif;
}

/* Utilities */
.ls-1 { letter-spacing: 1px; }
.ls-2 { letter-spacing: 2px; }
.ls-3 { letter-spacing: 3px; }
.py-6 { padding-top: 100px; padding-bottom: 100px; }
.text-gold { color: var(--accent-gold) !important; }
.bg-custom-dark { background-color: var(--nav-dark); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.navbar-custom {
    transition: background 0.3s ease;
}

.navbar-custom .navbar-brand img {
    transition: transform 0.3s ease;
}

.navbar-custom .navbar-brand img:hover {
    transform: scale(1.05); /* Slight pop on hover */
}

.navbar-custom .nav-link {
    color: var(--primary-white) !important;
    font-size: 0.9rem;
    position: relative;
    transition: 0.3s;
}

.navbar-custom .nav-link:hover {
    color: var(--accent-gold) !important;
}

/* Contact button in navigation */
.navbar-custom .btn-outline-gold {
    border: 2px solid var(--accent-gold);
    color: var(--accent-gold) !important;
    transition: 0.3s ease;
    font-weight: 700;
}

.navbar-custom .btn-outline-gold:hover {
    background-color: var(--accent-gold);
    color: var(--primary-black) !important;
    border-color: var(--accent-gold);
}

/* ============================================================
   HERO SECTION
   A high-end, architectural, dark image (like a sleek black house)
   ============================================================ */
.hero {
    height: 90vh;
    background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.7)), url('images/MAXIT\ Properties\ Hero.jpg');
    background-size: cover;
    background-position: center;
}

/* Large display typography on mobile */
@media (max-width: 991px) {
    .hero { height: auto; padding: 120px 0; }
    .hero .display-2 { font-size: 3.5rem; }
}

/* ============================================================
   COMPONENTS (Gold Buttons, Dark Cards, Dark Forms)
   ============================================================ */

/* Primary Gold Button */
.btn-gold {
    background-color: var(--accent-gold);
    color: var(--primary-black) !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s ease;
    border: 2px solid var(--accent-gold);
}

.btn-gold:hover {
    background-color: var(--accent-gold-hover);
    border-color: var(--accent-gold-hover);
    transform: translateY(-2px); /* Slight lift on hover */
}

/* Dark Cards for services/testimonials */
.card-dark {
    background-color: var(--card-dark);
    transition: transform 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent !important;
}

.card-dark:hover {
    transform: translateY(-5px);
    border-color: var(--accent-gold) !important; /* Gold border appears on hover */
}

/* Specialized inputs for the dark form */
.form-dark {
    background-color: #222222;
    border: 1px solid #333333;
    color: var(--primary-white);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.form-dark:focus {
    background-color: #262626;
    border-color: var(--accent-gold);
    color: var(--primary-white);
    box-shadow: 0 0 0 0.2rem rgba(196, 143, 55, 0.25); /* Gold focus halo */
}

.form-dark::placeholder {
    color: #888888;
}

/* ============================================================
   RESPONSIVE OVERRIDES
   ============================================================ */

/* Center Navbar links on mobile when toggled open */
@media (max-width: 991px) {
    .navbar-custom .navbar-nav {
        text-align: center;
        background-color: var(--nav-dark);
        padding: 30px;
        border-radius: 15px;
        margin-top: 15px;
    }
    .navbar-custom .nav-item.ms-lg-3 {
        margin-top: 15px;
        margin-left: 0 !important;
    }
    .py-6 { padding-top: 70px; padding-bottom: 70px; }
}

/* Footer Adjustments */
.footer-logo {
    transition: opacity 0.3s ease, transform 0.3s ease;
    filter: grayscale(100%); /* Makes it sleek and monochrome */
}

.footer-logo:hover {
    opacity: 1 !important;
    filter: grayscale(0%); /* Brings back the gold on hover */
    transform: scale(1.05);
}