/*
 Theme Name:   Astra Child
 Theme URI:    https://wpastra.com/
 Description:  Astra Child Theme
 Author:       Saad Naeem
 Author URI:   https://yourwebsite.com
 Template:     astra
 Version:      1.0.0
*/

/* Primary Color Classes */
.dynamic-primary-text {
    color: var(--e-global-color-primary, #2F06EA) !important; /* Fallback to vibrant blue */
}
.dynamic-primary-bg {
    background-color: var(--e-global-color-primary, #2F06EA) !important; /* Fallback to vibrant blue */
}
.dynamic-primary-border {
    border-color: var(--e-global-color-primary, #2F06EA) !important; /* Fallback to vibrant blue */
}

/* Secondary Color Classes */
.dynamic-secondary-text {
    color: var(--e-global-color-secondary, #09F289) !important; /* Fallback to bright green */
}
.dynamic-secondary-bg {
    background-color: var(--e-global-color-secondary, #09F289) !important; /* Fallback to bright green */
}
.dynamic-secondary-border {
    border-color: var(--e-global-color-secondary, #09F289) !important; /* Fallback to bright green */
}

/* Custom Widget Classes */
.custom-container {
    background-color: var(--e-global-color-primary, #2F06EA) !important; /* Container background */
}
.custom-heading .elementor-heading-title,
.custom-heading .elementor-image-box-title,
.custom-heading .elementor-icon-box-title,
.custom-heading .hfe-infocard-title,
.custom-heading .elementor-widget-heading h1,
.custom-heading .elementor-widget-heading h2,
.custom-heading .elementor-widget-heading h3,
.custom-heading .elementor-widget-heading h4,
.custom-heading .elementor-widget-heading h5,
.custom-heading .elementor-widget-heading h6 {
    color: var(--e-global-color-secondary, #09F289) !important; /* Headings in Heading, Image Box, Icon Box, Info Card */
}
.custom-button .elementor-button {
    background-color: var(--e-global-color-primary, #2F06EA) !important;
    color: #ffffff !important;
    border-color: var(--e-global-color-primary, #2F06EA) !important;
}
.custom-button .elementor-button:hover {
    background-color: var(--e-global-color-secondary, #09F289) !important;
    border-color: var(--e-global-color-secondary, #09F289) !important;
}
.custom-icon .elementor-icon i,
.custom-icon .elementor-icon svg,
.custom-icon .elementor-icon-list-icon i,
.custom-icon .elementor-icon-list-icon svg {
    color: var(--e-global-color-secondary, #09F289) !important; /* Icon and Icon List color */
    fill: var(--e-global-color-secondary, #09F289) !important; /* For SVG icons */
}

/* Loading Animation Styles */
.website-generator-loading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    color: #ffffff;
    font-family: Arial, sans-serif;
}
.website-generator-loading.show {
    display: flex;
}
.website-generator-loading .spinner {
    border: 8px solid #f3f3f3;
    border-top: 8px solid var(--e-global-color-primary, #2F06EA);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}
.website-generator-loading p {
    font-size: 19px;
    font-weight: bold;
    text-align: center;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.gradient-button {
  background: linear-gradient(to right, #2F06EA, #09F289);
  transition: background 0.5s ease;
	color: white; /* Ensure text white */
}

.gradient-button:hover {
  background: linear-gradient(to left, #2F06EA, #09F289);
	color: white; /* Ensure text stays white on hover */
}

/* Notes for Developers:
   - Add these classes to Elementor widgets in the Advanced > CSS Classes field:
     - 'custom-container' for container widget background (primary color).
     - 'custom-heading' for Heading, Image Box, Icon Box, or Info Card widget headings (secondary color).
     - 'custom-button' for button widget background and hover effects.
     - 'custom-icon' for Icon or Icon List widget color (secondary color).
     - Use 'dynamic-*' classes for additional flexibility (e.g., 'dynamic-primary-text' for text).
*/