/* --- CSS Variables --- */
:root {
    --primary-gold: #D4AF37;
    --dark-gold: #b59021;
    --light-bg: #faf8f0;
    --dark-text: #222222;
    --light-text: #ffffff;
    --section-padding: 80px 0;
}

/* --- Resets --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.6;
    color: var(--dark-text);
    
    /* --- BACKGROUND IMAGE SETTINGS --- */
    background-image: url('background.jpg'); 
    background-attachment: fixed; 
    background-size: cover;      
    background-position: center;
    background-repeat: no-repeat;
    background-color: #f0e6d2; /* Fallback color */
}

/* --- Typography --- */
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; font-weight: 700; }
a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }
.container { width: 90%; max-width: 1100px; margin: auto; }
.section-padding { padding: var(--section-padding); }
.text-center { text-align: center; }

/* Section Titles (Black text for visibility on gold bg) */
.section-title {
    text-align: center; 
    font-size: 2.5rem; 
    margin-bottom: 40px; 
    color: #000000; 
    font-weight: 800;
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.6); /* White glow for contrast */
}
.text-white { color: #ffffff; text-shadow: none; } /* Reset for dark section titles */

/* --- Buttons --- */
.btn {
    display: inline-block; padding: 12px 35px; border-radius: 50px;
    font-weight: 600; text-transform: uppercase; letter-spacing: 1px;
}
.btn-gold {
    background-color: var(--primary-gold); color: var(--light-text); border: 2px solid var(--primary-gold);
}
.btn-gold:hover { background-color: transparent; color: var(--primary-gold); }

/* --- Navbar (White background for readability) --- */
.navbar {
    background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 0.5rem 0; position: fixed; width: 100%; top: 0; z-index: 1000;
}
.nav-flex { display: flex; justify-content: space-between; align-items: center; }

/* Logo Styling */
.logo-img { height: 50px; width: auto; display: block; }

.nav-links { display: flex; gap: 30px; }
.nav-links a { font-size: 0.9rem; font-weight: 600; text-transform: uppercase; color: #333; }
.nav-links a:hover { color: var(--primary-gold); }

/* --- Hero Section --- */
/* --- Hero Section --- */
.hero-section {
    background-image: url('https://images.unsplash.com/photo-1511795409834-ef04bbd61622?ixlib=rb-4.0.3&auto=format&fit=crop&w=1469&q=80');
    background-size: cover; 
    background-position: center;
    
    /* This calculates the height perfectly */
    height: calc(100vh - 60px); 
    
    /* These lines below are what center the text! */
    display: flex; 
    align-items: center; 
    justify-content: center;
    
    position: relative; 
    color: var(--light-text); 
    margin-top: 60px; 
    text-align: center;
}
.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
}
.hero-content { position: relative; z-index: 2; }
.hero-content h1 { font-size: 4rem; margin-bottom: 10px; color: var(--primary-gold); }
.tagline { font-size: 1.5rem; margin-bottom: 30px; font-style: italic; }

/* --- About Section --- */
#about {
    /* Makes the section at least as tall as the screen */
    min-height: 80vh; 
    
    /* Centers the content vertically */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.intro-text {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.8;
    color: #000000;
    max-width: 900px;
    margin: auto;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7);
}

/* --- Services (Cards with white background) --- */
/* We keep the white background here so the detailed lists are easy to read */
/* --- Services Section Background --- */
.bg-gold-light { 
    /* Changed opacity from 0.85 to 0.15 for better visibility */
    background-color: rgba(250, 248, 240, 0.15); 
    
    /* Optional: You can remove this line if you want the background to be crisp, not blurry */
    backdrop-filter: blur(5px); 
    
    border-top: 1px solid rgba(212, 175, 55, 0.3);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3);
}
.services-grid-detailed {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 40px;
}
.service-box {
    background: rgba(255, 255, 255, 0.95); /* White card */
    padding: 40px; 
    border-radius: 12px;
    border: 1px solid var(--primary-gold);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.service-icon { font-size: 2.5rem; color: var(--primary-gold); margin-bottom: 20px; }
.service-box h3 { margin-bottom: 15px; font-size: 1.5rem; }
.service-box p { margin-bottom: 20px; color: #666; }
.service-list li {
    margin-bottom: 10px; padding-left: 25px; position: relative; color: #444; font-weight: 500;
}
.service-list li::before {
    content: "•"; color: var(--primary-gold); font-size: 1.5rem;
    position: absolute; left: 0; top: -5px;
}

/* --- Offerings Section (Bold Black Lists / No Box) --- */
.offerings-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 50px;
}
.offering-col {
    background: transparent; padding: 10px;
}
.offering-col h3 { 
    margin-bottom: 25px; 
    border-bottom: 3px solid #000; 
    display: inline-block; 
    padding-bottom: 5px;
    font-size: 1.6rem;
    color: #000;
    text-shadow: 2px 2px 0px rgba(255, 255, 255, 0.6);
}
.check-list li {
    margin-bottom: 12px; padding-left: 35px; position: relative;
    font-weight: 700; font-size: 1.15rem; color: #000000;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.7);
}
.check-list li::before {
    content: "\f00c"; /* FontAwesome Checkmark */
    font-family: "Font Awesome 6 Free"; font-weight: 900;
    color: #000; position: absolute; left: 0; top: 2px;
}

/* --- Contact Section --- */
.bg-dark { 
    /* Changed from solid #222 to 75% opacity black */
    background-color: rgba(34, 34, 34, 0.75); 
    color: #fff; 
	backdrop-filter: blur(5px);
}
.contact-flex { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; }

/* Clickable Contact Card Styling */
.contact-card {
    background: #333; 
    padding: 30px; 
    flex: 1 1 250px; 
    border-radius: 8px; 
    text-align: center;
    display: block;      
    text-decoration: none; 
    color: #fff;           
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}
.contact-card:hover {
    transform: translateY(-5px); 
    box-shadow: 0 10px 20px rgba(212, 175, 55, 0.2); 
    border-color: var(--primary-gold);
    cursor: pointer;
}
.contact-card i { color: var(--primary-gold); font-size: 2rem; margin-bottom: 15px; }
.contact-card h4 { margin-bottom: 10px; color: var(--primary-gold); }

/* --- Footer --- */
footer { background: #111; color: #777; padding: 20px 0; text-align: center; font-size: 0.9rem;}

/* --- Mobile --- */
@media (max-width: 768px) {
    .nav-links { display: none; }
    .hero-content h1 { font-size: 2.5rem; }
    .tagline { font-size: 1.1rem; }
    .section-title { font-size: 2rem; }
	body {
        /* Points to your specific mobile file */
        background-image: url('background mobile.png');
        
        /* Optional: 'scroll' is often smoother than 'fixed' on mobile phones */
        background-attachment: fixed; 
		
		/* Ensure the image covers the whole phone screen */
        background-size: cover;
        background-position: center;
    }
}