/* 1. Theme and Elementor Global Colors Mapping */
:root {
    /* Custom Global Colors */
    --cs-primary: #FD8311;
    --cs-navy: #052B5F;
    --cs-deep-navy: #031B3D;
    --cs-footer: #07111F;
    --cs-gold-orange: #F4A51C;
    --cs-hover-orange: #C9790F;
    --cs-white: #FFFFFF;
    --cs-cream: #FAF7F0;
    --cs-beige: #E8DCC8;
    --cs-border: #E7DED0;
    --cs-text: #111827;
    --cs-paragraph: #4B5563;
    --cs-whatsapp: #25D366;

    /* Override Astra Colors */
    --ast-global-color-0: var(--cs-primary); /* Primary */
    --ast-global-color-1: var(--cs-navy);    /* Secondary */
    --ast-global-color-2: var(--cs-text);    /* Text */
    --ast-global-color-3: var(--cs-paragraph); /* Body Text */
    --ast-global-color-4: var(--cs-border);  /* Borders */
    
    /* Global Fonts */
    --cs-font-headings: 'Playfair Display', serif;
    --cs-font-ui: 'Poppins', sans-serif;
    --cs-font-body: 'Lato', 'Roboto', sans-serif;
}

/* 2. Global Typography Overrides */
body, p {
    font-family: var(--cs-font-body) !important;
    color: var(--cs-paragraph);
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
    font-family: var(--cs-font-headings) !important;
    color: var(--cs-navy);
}

/* 3. Button Styles */
.elementor-button,
.ast-button,
button,
input[type="submit"] {
    background-color: var(--cs-primary) !important;
    color: var(--cs-white) !important;
    font-family: var(--cs-font-ui) !important;
    font-weight: 500 !important;
    border-radius: 4px;
    padding: 12px 24px;
    border: none;
    transition: all 0.3s ease;
}

.elementor-button:hover,
.ast-button:hover,
button:hover,
input[type="submit"]:hover {
    background-color: var(--cs-hover-orange) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(5, 43, 95, 0.15);
}

/* 4. Card Styles */
.cs-card,
.elementor-widget-image-box .elementor-image-box-wrapper {
    background-color: var(--cs-white);
    border: 1px solid var(--cs-border);
    border-radius: 8px;
    padding: 24px;
    transition: all 0.3s ease;
}

.cs-card:hover,
.elementor-widget-image-box .elementor-image-box-wrapper:hover {
    box-shadow: 0 8px 24px rgba(5, 43, 95, 0.08);
    transform: translateY(-4px);
    border-color: var(--cs-gold-orange);
}

/* 5. Motion and Interactions */
.cs-animate-fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

.cs-animate-slide-up {
    animation: slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

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

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}