/* ===================================
   CSS Variables & Global Styles
   =================================== */

:root {
    /* Primary Colors */
    --primary-green: #009688;
    --secondary-green: #4caf50;
    --accent-green: #81c784;
    --light-green: #f1f8e9;
    --darker-green: #1b5e20;
    
    /* Neutral Colors */
    --warm-beige: #f5f3f0;
    --soft-white: #fefefe;
    --text-dark: #2e2e2e;
    --text-light: #666666;
    
    /* Gold/Accent Colors */
    --gold: #d4a574;
    --gold-light: #e8c18a;
    --gold-dark: #b8956a;
    
    /* Shadows */
    --shadow-light: rgba(45, 125, 50, 0.08);
    --shadow-medium: rgba(45, 125, 50, 0.15);
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-green) 0%, var(--secondary-green) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-green) 0%, var(--secondary-green) 100%);
    --gradient-gold: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
}

/* ===================================
   CSS Reset & Base Styles
   =================================== */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #fefcf7;
    color: var(--text-dark);
    overflow-x: hidden;
}

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

a {
    text-decoration: none;
    transition: all 0.3s ease;
}

button {
    cursor: pointer;
    border: none;
    outline: none;
    transition: all 0.3s ease;
}

/* ===================================
   Utility Classes
   =================================== */

.container-custom {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-center {
    text-align: center;
}

/* Loading Animation */
.loading {
    opacity: 0;
    animation: fadeIn 0.8s ease forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}

/* Fade Animations */
.fade-up {
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.fade-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.fade-right {
    opacity: 0;
    transform: translateX(60px);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
}

.fade-up.animate,
.fade-left.animate,
.fade-right.animate {
    opacity: 1;
    transform: translate(0, 0);
}

/* Section Title Styling */
.section-title {
    text-align: center;
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: bold;
    color: var(--gold);
    margin-bottom: 60px;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: var(--gradient-gold);
    border-radius: 2px;
}