:root {
/* ----------------------------------------------------
   BRAND PALETTE - START 
---------------------------------------------------- */

/* ========================================= */
/* CORE PALETTE SELECTION & TONE:           */
/* Primary Accent: #037ef3 (Vivid Blue)      */
/* Secondary Accent: #f85a40 (Bold Red/Orange)*/
/* Tertiary Accent: #00c16e (Vivid Green)    */
/* Neutral Base: #f3f4f7 (Light Gray)        */
/* Dark Contrast: #52565e (Slate Gray)      */
/* ========================================= */


/* ----------------------------------------- */
/* HEADER (Primary Brand Color - Blue)       */
--header-bg: #5A6E8C;       /* Muted Slate Blue Background */
--header-border: #708296;   /* Lighter shade of the base for definition */
--header-text: #F4F7FA;     /* Very light, soft off-white text (High Contrast) */
--header-text-link: #e0e2e6; /* Vivid Coral Accent */
--header-text-hover: #accaf5; /* Hover state uses the background color for subtle effect */


/* ----------------------------------------- */
/* FOOTER (Darker Contrast - Deep Slate)     */
--footer-bg: #3a3d40; /* A dark shade derived from the palette's tone for depth */
--footer-border: #2e2f31; 
--footer-text: #caccd1; /* Light contrast text */
--footer-text-link: #e0e2e6; /* Using the vivid green accent */
--footer-text-hover: #b0bac2; /* A contrasting purple/indigo for hover */


/* ----------------------------------------- */
/* SERVICE BOX (Neutral & Clean)            */
--servicebox-bg: #f3f4f7;
--servicebox-border: #e0e2e6; /* Very subtle border for definition */
--servicebox-text: #52565e;   /* Dark slate gray for readability */
--servicebox-text-link: #e5eef7; /* Using the primary blue accent for links */
--servicebox-text-hover: #e5eef7; /* A warm orange/yellow for hover pop */


/* ----------------------------------------- */
/* CTA (Call to Action - Bold)          */
--cta-bg: #f85a40;
--cta-border: #c64732; /* Slightly darker shade of red for depth */
--cta-text: #ffffff;   /* White text for contrast on red background */
--cta-text-link: #e5eef7; /* Using the primary blue accent for links */
--cta-text-hover: #e5eef7; /* Bright yellow/gold for hover effect */ 



/* -------------------------------------- */
/* ADDITIONAL CUSTOMISATION  */
/* -------------------------------------- */

--body-bg: #F7F7F7;


--top-bar-bg: var(--neutral-800);
--top-bar-border: var(--neutral-800);
--top-bar-text: var(--neutral-400);
--top-bar-text-link: #000;      /* UNUSED */
--top-bar-text-hover: #000;     /* UNUSED */


--container-bg: #transparent;
--container-border: #eeeeee;    /* UNUSED */
--container-text: #fff;         /* UNUSED */
--container-text-link: #000;    /* UNUSED */
--container-text-hover: #000;   /* UNUSED */


--hero-bg: #818167;     /* UNUSED */
--hero-border: #5c519b;    
--hero-h1: #1fbe27;    
--hero-h2: #bb7183;   
--hero-h3: #b6c07e;  
--hero-text: #5e0909;         


--submenu-bg: var(--header-bg);
--submenu-border: (var(--header-border));
--submenu-text-link: var(--header-text-link);
--submenu-text-hover: var(--header-text-hover);

}

/* ----------------------------------------------------
   TYPOGRAPHY - START 
---------------------------------------------------- */

/* ============================================== */
/* HEADINGS STYLES (Responsive Scaling Hierarchy)*/
/* clamp(MIN_SIZE, VIEWPORT_SCALE, MAX_SIZE)    */
/* Min/Max sizes are shown in PX for reference.  */
/* ============================================== */


h1 { 
    font-size: clamp(1.375rem, 4vw, 1.625rem);  /* H1 Target Range: 22px to 26px */
    font-weight: 500; 
}


h2 { 
    font-size: clamp(1.125rem, 3vw, 1.375rem);  /* H2 Target Range: 18px to 22px */
    font-weight: 600; 
}


h3 { 
    font-size: clamp(1.00rem, 2.5vw, 1.125rem); /* H3 Target Range: 14px to 18px */
    font-weight: 600; 
}


h4 { 
    font-size: clamp(0.75rem, 2vw, 0.875rem);   /* H4 Target Range: 12px to 14px */
    font-weight: 600; 
}


h5 { 
    font-size: clamp(0.625rem, 1.8vw, 0.75rem); /* H5 Target Range: 10px to 12px */
    font-weight: 500; /* Slightly lighter weight for visual hierarchy */
}



h6 { 
    font-size: clamp(0.5rem, 1.2vw, 0.625rem);  /* H6 Target Range: 8px to 10px */
    font-weight: 400; /* Lightest weight to distinguish it from body text */
}



p { /* Global Paragraph (Body Text) */ 
    font-size: clamp(1rem, 1.5vw, 1.125rem); /* P Target Range: 16px to 18px */
    line-height: 1.6; 
    font-weight: 400; 
    margin-bottom: 1.5em; 
}

/* FORM TWEAK */
.service-box input, .service-box textarea, .service-box select {
border:   ; 
}


/* MEDIA TWEAK */

@media (max-width: 729px) {
  .grid-2-85-15 {
    text-align: center;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {

    .grid-fluid {
        grid-template-columns: repeat(3, 1fr); /* Columns on tablet */
    }
}