/*
Theme Name: Prospera Starter (Elementor Ready)
Theme URI: https://example.com/
Author: Prospera Constructions
Author URI: https://example.com/
Description: A modern, luxury and elegant starter theme for Prospera Constructions. Built as an Elementor-friendly starter theme using brand colours and fonts.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: prospera-starter
*/


/* Basic reset and body styles */
body {
    margin:0;
    font-family: 'Montserrat', Arial, sans-serif;
    color: #001D4A;
    background: #ffffff;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}

/* Brand colours */
:root {
    --oxford-blue: #001D4A;
    --air-blue: #7C98B3;
    --sand: #D6CBB6;
    --gold: #B59E6A;
    --white: #ffffff;
}

/* Header */
.site-header {
    background: linear-gradient(90deg, rgba(0,29,74,1) 0%, rgba(0,22,56,1) 100%);
    color: var(--white);
    padding: 24px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.site-branding img { max-height:64px; }

/* Nav */
.site-nav ul { list-style:none; margin:0; padding:0; display:flex; gap:20px; align-items:center; }
.site-nav a { color:var(--white); text-decoration:none; font-weight:600; }

/* Hero */
.hero {
    padding:80px 20px;
    background: linear-gradient(180deg, rgba(0,29,74,0.95) 0%, rgba(0,29,74,0.85) 100%);
    color:var(--white);
    text-align:left;
}
.hero h1 { font-family:'Bodoni Moda', serif; font-size:48px; margin:0 0 12px 0; letter-spacing:1px; }
.hero p { font-size:18px; max-width:800px; }

/* Section */
.section { padding:60px 20px; max-width:1200px; margin:0 auto; }

/* Grid for services/projects */
.grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap:24px; }

.card { background:var(--white); border:1px solid rgba(0,0,0,0.05); padding:20px; border-radius:8px; box-shadow:0 6px 18px rgba(0,0,0,0.06); }

/* Footer */
.site-footer { background:#00162F; color:var(--white); padding:28px 20px; text-align:center; }

/* Responsive */
@media (max-width:800px) {
    .hero h1 { font-size:32px; }
    .site-header { flex-direction:column; gap:12px; align-items:flex-start; }
}