/* 
   COLOR OVERRIDE - EERGX PLUGIN
   Changes default layout colors (Green) to Blue palette.
   Also enforces Montserrat typography globally and specifically.
*/

:root {
    /* Typography Override - Defines the variables used by the theme/plugin */
    --urbanist: "Montserrat", sans-serif;
    --inter: "Montserrat", sans-serif;
    --font-primary: "Montserrat", sans-serif;
    --font-secondary: "Montserrat", sans-serif;

    /* Color Palette - Blue Theme */
    --egx-pr-1: rgb(37, 99, 235);
    /* Primary Blue */
    --egx-pr-2: #3b82f6;
    /* Lighter Blue */

    /* Gradients */
    --egx-gd-1: linear-gradient(180deg, rgb(96, 165, 250) 0%, rgb(59, 130, 246) 30%, rgb(30, 64, 175) 100%);
    --egx-gd-2: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
}

/* Base Override - Use !important here to set the baseline */
body {
    font-family: "Montserrat", sans-serif !important;
}

/* 
   Specific Classes Override - NO !IMPORTANT here 
   This allows Elementor controls (which use inline styles or high specificity) to overwrite them.
   We just set the default family for these classes to Montserrat.
*/
.egx-para-1,
.disc,
.egx-heading-1,
.hero-title,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
a {
    font-family: "Montserrat", sans-serif;
}

/* 
   Apply Blue Theme to Specific Elements 
*/

.egx-btn-1,
.egx-btn-2,
.egx-btn-3 {
    background: var(--egx-pr-1);
    border-color: var(--egx-pr-1);
}

.egx-btn-1:hover,
.egx-btn-2:hover,
.egx-btn-3:hover {
    background: var(--egx-pr-2);
}

.gradient-text,
.egx-subtitle-1 .gradient,
.egx-subtitle-2 {
    color: var(--egx-pr-1);
    background: none;
    -webkit-text-fill-color: initial;
}

/* Backgrounds */
.bg-default {
    background-color: #f0f9ff;
    /* Light blue tint */
}

/* 
   FIX MOVING TEXT (MARQUEE) 
   Force single line and hide overflow
*/
.egx-marque-2-area,
.egx-1-marquee {
    overflow: hidden !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    max-height: 100px;
}

/* Ensure the wrapper created by marquee.js is also flex */
.js-marquee-wrapper {
    display: flex !important;
    align-items: center !important;
}

.egx-1-marquee .item {
    display: inline-flex !important;
    align-items: center;
    margin-right: 30px;
}