/* ----------------------------------------------------
   THEME CUSTOMISATION VARIABLES
   Edit these to restyle your entire site
---------------------------------------------------- */

/*
@import url("x-style_map-blue.css");
*/

/* Inter Variable (normal) */
@font-face {
/*  font-family: "Inter"; /*   */
/*    src: url("fonts/inter/Inter-Variable.woff2") format("woff2-variations"); /*   */
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Inter Variable (italic) */
@font-face {
/*  font-family: "Inter";  /*   */
/*  src: url("fonts/inter/Inter-Variable-Italic.woff2") format("woff2-variations");  /*   */
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}



:root {

/* ----------------------------------------------------
   NEUTRAL PALETTE — TRUE GREYS
   Used for: backgrounds, text, borders, surfaces.
   Ordered from lightest (100) to darkest (900).
---------------------------------------------------- */
--neutral-100: #ffffff;  /* pure white — page backgrounds */
--neutral-200: #f7f7f7;  /* light grey — panels, card backgrounds */
--neutral-300: #e5e5e5;  /* subtle dividers, light borders */
--neutral-400: #cccccc;  /* standard borders, UI chrome */
--neutral-500: #999999;  /* placeholders, muted text */
--neutral-600: #666666;  /* secondary text */
--neutral-700: #333333;  /* primary text */
--neutral-800: #1a1a1a;  /* dark surfaces, dark panels */
--neutral-900: #000000;  /* pure black — deep contrast areas */


--color-border: var(--neutral-100) ; 
--form-color-border : var(--brand-primary-light, #E5E5E5) ; 
/* ----------------------------------------------------
   TYPOGRAPHY
---------------------------------------------------- */
    /* --font-family: Arial, Helvetica, sans-serif; */
	/* --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */
	--font-family: "Inter", sans-serif;
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-heading: 28px;
    --font-size-subheading: 22px;

/* ----------------------------------------------------
   SPACING & LAYOUT
---------------------------------------------------- */
    --header-height: 120px;
    --spacing-inner: 20px;
    --spacing-section: 40px;
    --nav-gap: 20px;
    --submenu-gap: 40px; 
	
/* ----------------------------------------------------
   BORDERS & RADIUS
---------------------------------------------------- */
    --radius-small: 4px;
    --radius-medium: 6px;

/* ----------------------------------------------------
   SHADOWS
---------------------------------------------------- */
    --shadow-hover: 0 4px 12px #000000;

/* ----------------------------------------------------
   GRID
---------------------------------------------------- */
    --grid-gap: 20px;
    --grid-fluid-min: 200px;
}


/* ----------------------------------------------------
   GLOBAL RESET & BASE STYLES
---------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    height: 100%;
	background: var(--color-footer-bg);   /* KISSDAY */
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    
	font-family: var(--font-family);
    font-size: var(--font-size-base);
    line-height: 1.6;
  /*  background: ORANGE ; /* KISSDEL */
}


img {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------
   HEADER & NAVIGATION
---------------------------------------------------- */


/* TOP BAR — sits above the header and scrolls away */
.top-bar {
    width: 100%;
	background: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 6px 0;
    z-index: 1000;
}

.top-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.top-bar span {
    display: flex;
    align-items: center;
}

/* HEADER — sticks to the top when you scroll */
header {
    width: 100%;
    background: var(--color-header-bg);
    border-bottom: 1px solid var(--color-header-border);
    position: sticky;
    top: 0;
    z-index: 999;
}

.header-inner {
    max-width: 1200px;
    margin: auto;
    padding: 19px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* MOBILE STACKING */


@media (max-width: 600px) {
    .top-bar-inner {
        flex-direction: column;
		justify-content: center; 
        align-items: center;
        text-align: center;
        gap: 4px;
    }

    .top-phone,
    .top-hours {
        display: block;
        width: 100%;
		justify-content: center; 
        text-align: center;
    }
	.top-hours { font-size: 12px; } 
	.top-hours svg { display: none; }

}



.logo img {
    max-height: 60px;
}

/* DESKTOP NAVIGATION */
.desktop-nav ul {
    list-style: none;
    display: flex;
    gap: var(--nav-gap);
}

.desktop-nav a {
    text-decoration: none;
    /* color: var(--color-text);  */ 
	color: var(--color-header-text); /*KISSCODE*/
    font-weight: 400 ;
}

.desktop-nav a:hover {
    color: var(--color-primary);
}

/* Submenu */
.has-submenu {
    position: relative;
	
}

.has-submenu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: var(--submenu-gap);  /* the “gap” height */
    /* This area is invisible but keeps :hover alive */
}


.submenu {
    display: none;
    position: absolute;
    top: calc(100% + var(--submenu-gap));   /* KISSCODE */
	/*  top: 100%;  /* KISSCODE */
    left: 0;
    background: var(--color-submenu-bg);
    list-style: none;
    padding: 10px 0; /* KISSCODE */
    border: 1px solid var(--color-submenu-border); /* KISSCODE */ 
    min-width: 180px;
    z-index: 999;
	padding-bottom: var(--submenu-gap); /* kisscode */
}

.submenu li a {
    display: block;
    padding: 10px 15px;
   /* color: var(--color-text); */
	color: var(--color-header-text); /*KISSCODE*/
    text-decoration: none;
    white-space: nowrap;
}

.submenu li a:hover {
    background: var(--color-submenu-hover);
}

/* Hover dropdown (desktop only) */
.has-submenu:hover .submenu {
    display: block;
}

/* Prevent submenu inheriting flex */
.desktop-nav ul ul {
    display: none;
    position: absolute;
    left: 0;
    flex-direction: column;
    background: var(--color-submenu-bg);
    padding: 10px 0;
    border: 1px solid var(--color-submenu-border); /* KISSCODE */ 
    min-width: 180px;
    z-index: 999;
}

/* JS tap-open */
.has-submenu.submenu-open > .submenu {
    display: block;
}

/* Phones */
@media (max-width: 600px) {
    .desktop-nav { display: none; }
    .hamburger { display: flex; }
}

/* Tablets */
@media (min-width: 601px) and (max-width: 1024px) {
    .desktop-nav { display: flex; }
    .hamburger { display: none; }
}

/* Tablet tap-open */
@media (min-width: 769px) and (max-width: 1024px) {
    .has-submenu:hover > .submenu {
        display: none;
    }
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
    .has-submenu:hover > .submenu {
        display: none !important;
    }
    .has-submenu.submenu-open > .submenu {
        display: block !important;
    }
}

/* ----------------------------------------------------
   HAMBURGER MENU (MOBILE)
---------------------------------------------------- */
#mobile-menu {
    display: none;
    flex-direction: column;
	overflow-y: auto;
    background: var(--color-header-bg);
    padding: var(--spacing-inner);
    border-top: 1px solid var(--color-header-border);  /* KISSCODE */ 
}

#mobile-menu.open {
    display: flex;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger div {
    width: 25px;
    height: 2px;
  /*  background: var(--color-text);  */
	background: var(--color-header-text); /*KISSCODE*/
}

#mobile-menu ul {
    list-style: none;
   /*	padding: 0;  /* kisscode */
    margin: 0;
    display: flex;
    flex-direction: column;
}

#mobile-menu > ul {
    padding: 0;
}


#mobile-menu li {
  /* border-bottom: 1px solid var(--color-border); /* KISSCODE */ 
}

#mobile-menu a {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-header-border);
    text-decoration: none;
   /* color: var(--color-text);  */
	color: var(--color-header-text); /*KISSCODE*/
}

#mobile-menu a:hover {
    color: var(--color-primary);
}

/* Mobile breakpoint */


@media (max-width: 768px) {
    .desktop-nav { display: none; }

    .hamburger { display: flex; }

    #mobile-menu {
        min-height: 100vh;
        overflow-y: auto;
        box-sizing: border-box;
    }

    .submenu {
        position: static;
        display: block;
        border: none;
		
        padding-left: 20px;
        padding-bottom: 0;
        padding-top: 0;
    }
}


/* ----------------------------------------------------
   PAGE LAYOUT
---------------------------------------------------- */
.container {
    max-width: 1200px;
    margin: auto;
	flex: 1; /* KISSDAY */
    padding: var(--spacing-inner);
}

.container a {
  color: var(--brand-secondary-dark);
  text-decoration: none;
}

.container a:hover {
  color: var(--brand-secondary-main);
  text-decoration: none;
}

h1, h2, h3 {
    margin-top: 15px;
    margin-bottom: 10px;
    color: var(--color-text);
}

p {
    margin-bottom: 15px;
}



/* ----------------------------------------------------
   FULL WIDTH SECTION
---------------------------------------------------- */
.full-width-box {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50%;
    margin-right: -50%;
    width: 100%;
    padding: 40px 0;
}



.full-width-box .content {
    max-width: 1200px;         /* match your .container width */
    margin: 0 auto;
    padding: 0 20px;
}


/* ----------------------------------------------------
   GRID SYSTEM
---------------------------------------------------- */
.grid-fluid {
    display: grid;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(var(--grid-fluid-min), 1fr));
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
    display: grid;
    gap: var(--grid-gap);
}

.grid-1 { grid-template-columns: 1fr; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }


.grid-2-85-15 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--grid-gap);
    align-items: stretch; /* key line */
}

.grid-2-85-15 > div:last-child {
 /*    display: flex;
    align-items: center;   /* vertically center the button */
  /*  justify-content: flex-end; /* push button to the right */
 /*	justify-content: center ; /* center button to the  */
 /*	background: var(--brand-secondary-light); */
	
}

.grid-2-85-15 .service-box:last-child {
  /*   text-align: center; */
}


.grid-2-85-15 .service-box a.btn {
    display: flex;
    align-items: center;      /* vertical centering */
    justify-content: center;  /* horizontal centering */

    width: calc(100% + 40px);
    height: calc(100% + 40px);
    margin: -20px;
}



/* Tablet portrait: wrap grid-6 */
@media (max-width: 1024px) {
    .grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
	
	.grid-fluid {
        grid-template-columns: repeat(2, 1fr);
    }

}

/* Phones: stack grids */
@media (max-width: 768px) {
    
		.grid-fluid {
        grid-template-columns: repeat(2, 1fr);
    }
	
	.grid-2, .grid-3, .grid-4, .grid-5, .grid-6 {
        grid-template-columns: 1fr;
    }


    .grid-2-85-15 {
        grid-template-columns: 1fr; /* one column */
		
    }

    .grid-2-85-15 .service-box { margin-bottom: 0px; } 

    .grid-2-85-15 > div:last-child {
	/*  justify-content: flex-start; /* optional: left-align button on mobile */
	/*   padding-top: var(--grid-gap); /* optional spacing */
        justify-content: center;   /* force centering on mobile */
        align-items: center;
        text-align: center;
    }	
}

/* Tablet portrait: wrap grid-6 */
@media (max-width: 600px) {
		.grid-fluid {
        grid-template-columns: repeat(1, 1fr);
    }

}


/* ----------------------------------------------------
   FLEX UTILITIES
---------------------------------------------------- */
.flex {
    display: flex;
    gap: var(--grid-gap);
}

.flex-2 > * {
    flex: 1;
}

/* ----------------------------------------------------
   SERVICE BOXES
---------------------------------------------------- */
.service-box {
    padding: var(--spacing-inner);
    border-radius: var(--radius-medium);
    background: var(--neutral-100, #ffffff) ;
    transition: 0.3s;
	margin-bottom: 50px; 

	position: relative;
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
	

}


.service-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: auto; 

	/* background: #CCCCFF50 ; /* KISSDEL */
	
}


.service-box * {
    pointer-events: none;
}


.service-box a,
.service-box button,
.service-box input,
.service-box textarea,
.service-box select,
.service-box label {
    pointer-events: auto;
    position: relative;
    z-index: 3;
}



.service-box:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-hover);
	background: var(--brand-primary-light) ; /* KISSDEL */
}

.service-uname {
  display: none;
}

@media (min-width: 1025px) {
    .service-uname {
        display: block;
    }
}

/* ----------------------------------------------------
   TABLES
---------------------------------------------------- */

table,
table.full-width {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  margin-bottom: 20px;
  background: var(--neutral-100);
  border: 1px solid var(--color-border); /* outer border */
}

th,
td {
  padding: 12px;
  border: 1px solid var(--color-border); /* cell borders */
}

table td:first-child {
  white-space: normal;
  word-break: break-word;
}

th {
  background: var(--neutral-300);
  text-align: left;
  font-weight: bold;
}



/* ----------------------------------------------------
   BULLETS & LISTS
---------------------------------------------------- */


.container ul,
.container ol {
  margin: 0;
  padding-left: 0;
  list-style-position: inside;
  list-style: none;   /* removes bullets/numbers */
}


.container li {
  background: var(--brand-primary-light);      /* your background colour */
  color: var(--brand-primary-dark);         /* your text colour */
 /* color: var(--colour-text); 					/* your text colour */
  border: 1px solid var(--color-border);   /* optional if you have a border var */
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 6px;
}


/* ----------------------------------------------------
   FORMS
---------------------------------------------------- */
form {
    display: grid;
    gap: 15px;
    max-width: 600px;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--form-color-border, #f7f7f7);
    border-radius: var(--radius-small);
}

textarea {
    min-height: 120px;
}

button,
input[type="submit"], a.btn {
    background: var(--brand-secondary-main);
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: var(--radius-small);
	transition: background 0.3s ease, color 0.3s ease;
    cursor: pointer;
	text-decoration:none ; 
}

button:hover,
input[type="submit"]:hover, a.btn:hover {
    background: var(--brand-secondary-dark);
	color: #fff;
}

#uk-domain-form {
    display: none;
    transition: opacity .4s ease;
}
#uk-domain-form.show {
    display: block;
    opacity: 1;
}

/* ----------------------------------------------------
   SEMANTIC ELEMENTS — BASELINE RESET
---------------------------------------------------- */

header,
footer,
main,
nav,
article,
aside,
figure,
figcaption,
blockquote {
  margin: 0;
  padding: 0;
  display: block;
  font-family: inherit;
  color: inherit;
}

/* ----------------------------------------------------
   ARTICLE
---------------------------------------------------- */

article {
  margin: 2rem 0;
  padding: 1.5rem;
  background: var(--neutral-100);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
}

/* ----------------------------------------------------
   ASIDE
---------------------------------------------------- */

aside {
  margin: 1.5rem 0;
  padding: 1rem;
  background: var(--brand-primary-light);
  border-left: 4px solid var(--brand-primary-main);
  border-radius: var(--radius-small);
  color: var(--neutral-700);
}

/* ----------------------------------------------------
   BLOCKQUOTE
---------------------------------------------------- */

blockquote {
  margin: 2rem 0;
  padding: 1rem 1.5rem;
  border-left: 4px solid var(--color-border);
  color: var(--neutral-600);
  font-style: italic;
  background: var(--neutral-100);
  border-radius: var(--radius-small);
}

/* ----------------------------------------------------
   FIGURE + CAPTION
---------------------------------------------------- */

figure {
  margin: 2rem 0;
  text-align: center;
}

figure img {
  max-width: 100%;
  border-radius: var(--radius-medium);
}

figcaption {
  margin-top: 0.5rem;
  font-size: var(--font-size-small);
  color: var(--neutral-500);
}

/* ----------------------------------------------------
   HORIZONTAL RULE
---------------------------------------------------- */

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 2rem 0;
}

/* ----------------------------------------------------
   CODE BLOCKS
---------------------------------------------------- */

pre,
code {
  font-family: monospace;
}

pre {
  background: var(--neutral-800);
  color: var(--neutral-100);
  padding: 20px;
  border-radius: var(--radius-medium);
  overflow-x: auto;
  margin: 1.5rem 0;
}

code {
  background: var(--neutral-300);
  padding: 2px 4px;
  border-radius: var(--radius-small);
  color: var(--neutral-800);
}


/* ----------------------------------------------------
   BACK TO TOP ICON
---------------------------------------------------- */

.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
   /* background: var(--color-footer-bg); */
	background: #CCC;
    /* color: var(--color-footer-text); */
	color: #f5f5f5; 
    padding: 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
}




/* ----------------------------------------------------
   FOOTER
---------------------------------------------------- */
footer {
    background: var(--color-footer-bg);
    color: var(--color-footer-text);
    padding: 30px 20px;
    margin-top: 10px; /* KISSCODE */ 
}

footer .footer-inner {
    max-width: 1200px;
    margin: auto;
    text-align: center;
}

footer a {
    color: var(--color-footer-text);
    text-decoration: none;
    font-size: var(--font-size-small);
}

footer a:hover {
    text-decoration: none;
}

.footer-nav ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 25px;
}


/* ----------------------------------------------------
   HERO CONTENT AND BACKGROUND
   Handles layout, stacking, and background SVG behavior
---------------------------------------------------- */

.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0; /* background stays behind content */
}

.hero-inner {
/*  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  */
}


.hero-content {
  max-width: 1200px;
  margin: 0 auto ;  
  position: relative;
  z-index: 2; /* content sits above background */
  display: flex;
  gap: 60px;
  padding: 25px;  
}


.left-panel {
  flex: 0 0 calc(60% - 30px);
}

.right-panel {
  flex: 0 0 calc(40% - 30px);
  
}

.dashboard img {
  width: calc(100% + 40px);
  display: block;
  transition: transform 0.25s ease;
  transform-origin: center top;
}

.dashboard img:hover {
  transform: scale(1.95); /* enlarge by 5 percent */
}



/* ----------------------------------------------------
   LEFT PANEL TYPOGRAPHY AND CONTENT
   Controls headings, paragraphs, and text layout
   
#FF6600		ORANGE
---------------------------------------------------- */

.left-panel {
  /* flex: 1; */
  color: #f9fafb;
}

.left-panel h1 {
 /* font-size: clamp(1.45rem, 5vw, 2.4rem); /* 32px to 50px */
  font-size: clamp(2.0rem, 6vw, 2.5rem); /* 32px TO 64px KISSCODE */ 
  font-weight: 600;
  color: #f9fafb;
  margin-top: 0px;  
  margin-bottom: 0px;
}

.left-panel h2 {
 /* font-size: clamp(1.3rem, 4.5vw, 2.0rem); /* 28px to 44px */
  font-size: clamp(1.5rem, 3.5vw, 2.2rem); /* 22px TO 35px */
  font-weight: 400;
  color: #f9fafb;
 /* margin-bottom: 0px; */
}

.left-panel p:nth-of-type(1) {
 /* font-size: clamp(1.2rem, 2.5vw, 1.25rem); /* 18px to 24px */
  font-size: clamp(1.1rem, 2.5vw, 1.5rem); /* 17.6px TO 24px */
  font-weight: 400;
  color: #e5e7eb;
  /* margin-bottom: 10px; */
}

.left-panel p:nth-of-type(2),
.left-panel p:nth-of-type(3) {
  font-size: clamp(1.0rem, 2vw, 1.0rem); /* 16px to 18px */
  color: #cbd5f5;
  margin-bottom: 0px;
}


/* ----------------------------------------------------
   FEATURE LIST
   Bullet list with icons and descriptive text
---------------------------------------------------- */

.feature-list {
  list-style: none;
  padding: 0;
  margin-top: 40px;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  color: #e5e7eb;
  font-weight: 300 ; 
  font-size: clamp(0.95rem, 2.5vw, 1.125rem); /* 16px to 18px */
}

.feature-list li svg,
.feature-list li img {
  flex-shrink: 0;
}

/* ----------------------------------------------------
   RIGHT PANEL AND DASHBOARD CONTAINER
   Holds the metrics panel and SVG dashboard
---------------------------------------------------- */

.right-panel {
 /* flex: 1; */
}

.dashboard {
  background: #020617;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #1f2937;
}

.dashboard-svg {
  width: 100%;
  height: auto;
  margin-top: 20px;
}


/* ----------------------------------------------------
   DASHBOARD TYPOGRAPHY
   Controls heading, subheading, and SVG text styles
---------------------------------------------------- */

.dashboard h3 {
  font-size: clamp(1.275rem, 3vw, 1.4rem); /* 22px to 28px */
  font-weight: 600;
  color: #f9fafb;
  margin-top: 0px;
  margin-bottom: 5px;
}

.dashboard .sub {
  font-size: clamp(0.875rem, 1.5vw, 1rem); /* 14px to 16px */
  color: #9ca3af;
  margin-bottom: 10px;
}


/* ----------------------------------------------------
   SVG TEXT STYLING
   Applies to labels and KPI values inside the dashboard SVG
---------------------------------------------------- */


.dashboard-svg .dashboard-list {
  font-size: clamp(1.5rem, 2vw, 2.5rem);
  font-weight:  ; 
} 

.dashboard-svg text {
  font-family: system-ui;
  fill: #9ca3af;
  font-size: clamp(1rem, 2vw, 1.125rem); /* 16px to 18px */
}

.dashboard-svg text[font-size="14"] {
  fill: ; /* use color defined in SVG */ 
  font-size:20px; 
  font-weight: 600; /* KPI value emphasis */  
}

.dashboard-svg text[font-size="16"] {
  fill: inherit; /* use color defined in SVG */ 
}

.dashboard-svg text[font-size="26"] {
  font-size:30px; 
    font-weight: 700; /* KPI value emphasis */
}




/* Responsive stacking */
@media (max-width: 1100px) {
  .hero-content {
    flex-direction: column;
    padding: 60px 20px;
  }
}

@media (max-width: 900px) {
  .hero-content {
    flex-direction: column;
  }

  .left-panel,
  .right-panel {
    flex: 0 0 100%;
  }

  
}


/* ----------------------------------------------------
   CONTACT FORMS
---------------------------------------------------- */

.contact-form-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}


.contact-form-columns {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.contact-form-col {
    flex: 1 1 300px;
    min-width: 300px;
}


.contact-form-col label {
    display: block;
    margin: 8px 0 4px;
}

.contact-form-col input,
.contact-form-col textarea {
    width: 100%;
    box-sizing: border-box;
}

.contact-form-col textarea {
    height: 220px;   /* set any height you want */
    resize: vertical; /* optional: allow user to resize only vertically */
}

/* Row for Total / Business / Ecommerce */
.website-count-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px; /* space between the two items */
    flex-wrap: nowrap; /* keep everything on one line */
}

.website-count-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px; /* space between label and input */
    white-space: nowrap; /* prevent label wrapping */
}

.website-count-item input {
    width: 70px; /* control input size */
}

.services-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem; /* horizontal spacing */
    row-gap: 0.1rem;  /* smaller vertical spacing */
	/* margin-bottom: 15px; /* */
}

.services-row label {
    display: flex;          /* keeps radio + text side-by-side */
    align-items: center;    /* vertically aligned */
    gap: 0.4rem;            /* space between radio and text */
}





/* ----------------------------------------------------
   SLIDER ANIMATION 
---------------------------------------------------- */
.slide {  margin-top: 0px;  } 

.hero-bg { 
background: var(--brand-secondary-main) ;
 }   

/* ---------------------------------------------
   OVERRIDE HERO LAYOUT INSIDE SLIDER
   (Make left-panel full width)
--------------------------------------------- */
.text-slider .left-panel {
  flex: 0 0 100%;
  max-width: 100%;
}


.text-slider h1 {
  line-height: 1.4 ;   /* tighter, hero-style KISSCODE */
  background:  ; 
}

.text-slider h2 {
  line-height: 1.2 ;   /* tighter, hero-style */
}


/* ---------------------------------------------
   HERO CONTENT SPACING INSIDE SLIDER
--------------------------------------------- */
.text-slider .slide .hero-content {
  padding: 30px 25px; /* same as hero */
}

/* ---------------------------------------------
   TEXT SLIDER — FULL HERO HEIGHT
--------------------------------------------- */
.text-slider {
  position: relative;
  width: 100%;
  height: 100%;
 /* min-height: 30vh; /* full hero height */
   min-height: 275px; /* full hero height */
  overflow: hidden;
}



/* ---------------------------------------------
   SLIDE POSITIONING + ANIMATION
--------------------------------------------- */
.text-slider .slide {
  position: absolute;
  inset: 0;
  height: 100%; /* ensures full hero height */

  display: flex;
  align-items: flex-start;   /* hero-style alignment */
  justify-content: flex-start;

  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;

  animation: fadeSlide 30s infinite both;
}

/* Slide timing */
.text-slider .slide:nth-child(1) { animation-delay: 0s; }
.text-slider .slide:nth-child(2) { animation-delay: 10s; }
.text-slider .slide:nth-child(3) { animation-delay: 20s; }


/* ---------------------------------------------
   FADE + SLIDE KEYFRAMES
--------------------------------------------- */
@keyframes fadeSlide {
  0%   { opacity: 0; transform: translateY(20px); }
  5%   { opacity: 1; transform: translateY(0); }
  30%  { opacity: 1; transform: translateY(0); }
  35%  { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 0; transform: translateY(-20px); }
}

/* ---------------------------------------------
   TABLET — ADD A LITTLE EXTRA HEIGHT
--------------------------------------------- */
@media (min-width: 768px) and (max-width: 1024px) {
  .text-slider {
	min-height: 400px; /* full hero height */
  }
}

/* ---------------------------------------------
   MOBILE — LET CONTENT DEFINE HEIGHT
   (so you see more than just the title)
--------------------------------------------- */
@media (max-width: 767px) {
  .text-slider {
	min-height: 450px; /* full hero height */
  }
}


.CTA	{ background:  var(--brand-accent) ; }


 

.iconimg img { width: 188px ; border: 1px solid #CCCCCC ; padding: 20px; } /* DELETE THIS WHEN INISHED */