/* ==========================================
   Global Variables
========================================== */
:root {
    /* Fonts */
    --font-headings: 'DM Sans', sans-serif;
    --font-text: 'Inter', sans-serif;

    /* Colors */
    --heading-color: #FFFFFF;        /* H1 Color */
    --heading-accent-color: #FFBA33; /* H1 Highlight Span Color */
    --dark-heading-color: #1A202C;   /* H2, H3, H4 / Dark Color */
    --h3-color: #D1D5DB;
    --h5-color: #D1D5DB;             /* H5 / Light Gray Color */
    --h6-color: #e06109;             /* H6 / Orange Color */
    --text-color: #bbbbbb;           /* Paragraph Text Color (Dark, but not harsh black) */

    /* Desktop Typography Sizes */
    --h1-size: 86px !important;
    --h1-weight: 700;
    
    --h2-size: 42px;                 
    --h2-weight: 600;

    --text-size: 16px;               /* Updated base paragraph size to 16px */
    --text-weight: 400;
}

/* ==========================================
   Global Fonts (Headings & Paragraphs)
========================================== */
h1, h2, h3, h4, h5, h6,
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-headings) !important;
}

/* ==========================================
   Global H1 (White)
========================================== */
h1,
.elementor-widget-heading h1.elementor-heading-title {
    font-size: var(--h1-size) !important;
    font-weight: var(--h1-weight);
    color: var(--heading-color) !important;
    line-height: 1.2;
    margin: 0;
}

/* Highlight Span Inside H1 */
h1 span,
.elementor-widget-heading h1.elementor-heading-title span {
    color: var(--heading-accent-color);
}

/* ==========================================
   H2 to H4 (Dark Color)
========================================== */
h2,h4,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title {
    color: var(--dark-heading-color) !important;
}

/* Desktop-only specific layout rules for H2 */
h2, .elementor-widget-heading h2.elementor-heading-title {
    font-size: var(--h2-size) !important;
    font-weight: var(--h2-weight);
    line-height: 1.3;
    margin: 0;
}

/* ==========================================
   Global H5 (Variable Driven)
========================================== */
h3, h5,
.elementor-widget-heading h5.elementor-heading-title {
    color: var(--h5-color) !important;
    margin: 0;
}

/* ==========================================
   H6 (#e06109 Orange)
========================================== */
h6,
.elementor-widget-heading h6.elementor-heading-title {
    color: var(--h6-color) !important;
}

/* ==========================================
   Global Text Editor & Paragraphs
========================================== */
p,
.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor div,
.elementor-widget-text-editor li {
    font-family: var(--font-text) !important;
    font-size: var(--text-size) !important; 
    font-weight: var(--text-weight);
    color: var(--text-color) !important; 
    line-height: 1.8;
}

/* ==========================================
   Tablet (Max-width 1024px)
========================================== */
/* ==========================================
   Tablet (Max-width 1024px)
========================================== */
@media (max-width: 1024px) {

    h1,
    .elementor-widget-heading h1.elementor-heading-title {
        font-size: 58px !important;
    }

    h2,
    .elementor-widget-heading h2.elementor-heading-title {
        font-size: 34px !important;
    }

    h3,
    .elementor-widget-heading h3.elementor-heading-title {
        font-size: 26px !important;
    }

    h4,
    .elementor-widget-heading h4.elementor-heading-title {
        font-size: 22px !important;
    }

    h5,
    .elementor-widget-heading h5.elementor-heading-title {
        font-size: 18px !important;
    }

    h6,
    .elementor-widget-heading h6.elementor-heading-title {
        font-size: 16px !important;
    }

    p,
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p,
    .elementor-widget-text-editor div,
    .elementor-widget-text-editor li {
        font-size: 16px !important;
    }
}


/* ==========================================
   Large Mobile (Max-width 767px)
========================================== */
@media (max-width: 767px) {

    h1,
    .elementor-widget-heading h1.elementor-heading-title {
        font-size: 48px !important;
    }

    h2,
    .elementor-widget-heading h2.elementor-heading-title {
        font-size: 30px !important;
    }

    h3,
    .elementor-widget-heading h3.elementor-heading-title {
        font-size: 24px !important;
    }

    h4,
    .elementor-widget-heading h4.elementor-heading-title {
        font-size: 20px !important;
    }

    h5,
    .elementor-widget-heading h5.elementor-heading-title {
        font-size: 17px !important;
    }

    h6,
    .elementor-widget-heading h6.elementor-heading-title {
        font-size: 15px !important;
    }

    p,
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p,
    .elementor-widget-text-editor div,
    .elementor-widget-text-editor li {
        font-size: 15px !important;
        line-height: 1.7;
    }
}


/* ==========================================
   Small Mobile (Max-width 480px)
========================================== */
@media (max-width: 480px) {

    h1,
    .elementor-widget-heading h1.elementor-heading-title {
        font-size: 40px !important;
        line-height: 1.15;
    }

    h2,
    .elementor-widget-heading h2.elementor-heading-title {
        font-size: 26px !important;
    }

    h3,
    .elementor-widget-heading h3.elementor-heading-title {
        font-size: 22px !important;
    }

    h4,
    .elementor-widget-heading h4.elementor-heading-title {
        font-size: 18px !important;
    }

    h5,
    .elementor-widget-heading h5.elementor-heading-title {
        font-size: 16px !important;
    }

    h6,
    .elementor-widget-heading h6.elementor-heading-title {
        font-size: 14px !important;
    }

    p,
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p,
    .elementor-widget-text-editor div,
    .elementor-widget-text-editor li {
        font-size: 14px !important;
        line-height: 1.6;
    }
}