/* =====================================================
   CSS VARIABLES & GLOBAL STYLES
   ===================================================== */

:root {
    --primary-color: #2C5282; /* Elegant deep blue */
    --primary-dark: #1A365D; /* Darker blue for hover states */
    --primary-light: #4299E1; /* Light blue for accents */
    --secondary-color: #1A202C; /* Dark slate for contrast */
    --accent-color: #3182CE; /* Medium blue for highlights */
    --gold-accent: #D69E2E; /* Gold for premium touches */
    --light-bg: #F7FAFC; /* Very light blue-gray */
    --medium-bg: #EDF2F7; /* Light blue-gray */
    --white: #ffffff;
    --text-dark: #1A202C;
    --text-medium: #4A5568;
    --text-light: #718096;
    --border-radius: 8px;
    --box-shadow: 0 4px 20px rgba(44, 82, 130, 0.1);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --container-width: 1200px;
}

/* Add Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* Apply a natural box layout model to all elements */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    color: var(--text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, var(--white) 0%, var(--light-bg) 100%);
}

img {
    max-width: 100%;
    height: auto;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
} 