/*
Theme Name: Techkit Theme Child
Theme URI: https://liamsoft.com/
Description: Child theme for the Techkit Theme
Author: LiamSoft Co.
Author URI: https://liamsoft.com
Template: techkit
Version: 1.0 */

:root {
  --primary-50: #E6F2FE;
  --primary-100: #CFE9FE;
  --primary-200: #87C6FD;
  --primary-300: #5DB3FE;
  --primary-400: #37A0FB;
  --primary-500: #0582F0;
  --primary-600: #0477DC;
  --primary-700: #0468BF; /* Primary */
  --primary-800: #024C8D;
  --primary-900: #012B50;

  --gray-50: #F2F3F3;
  --gray-100: #DBDDDD;
  --gray-200: #C4CACA;
  --gray-300: #ADB6B7;
  --gray-400: #96A1A2;
  --gray-500: #7F8C8D; /* Secondary */
  --gray-600: #667071;
  --gray-700: #4C5455; /* Body */
  --gray-800: #333838;
  --gray-900: #191C1C;

  --pastel-blue-50: #F4F9FB;
  --pastel-blue-100: #DFECF2;
  --pastel-blue-200: #C6DCE6;
  --pastel-blue-300: #A9CBD9; /* Accent */
  --pastel-blue-400: #8BB8CC;
  --pastel-blue-500: #6AA3BD;
  --pastel-blue-600: #4E8CAA;
  --pastel-blue-700: #3A708C;
  --pastel-blue-800: #28546B;
  --pastel-blue-900: #1B3948;

  --teal-50: #E6FAFB;
  --teal-100: #C2F0F3;
  --teal-200: #8CE0E6;
  --teal-300: #4DCFD8;
  --teal-400: #1BBBC6;
  --teal-500: #04A9B5;
  --teal-600: #0496A0;
  --teal-700: #037E87; /* Teal */
  --teal-800: #02676F;
  --teal-900: #01474C;

  --cinnabar-50: #FDEDEA;
  --cinnabar-100: #FAD3CF;
  --cinnabar-200: #F5AFA7;
  --cinnabar-300: #F0837B;
  --cinnabar-400: #EB6159;
  --cinnabar-500: #E74C3C; /* Cinnabar */
  --cinnabar-600: #D74333;
  --cinnabar-700: #B53929;
  --cinnabar-800: #912E21;
  --cinnabar-900: #6E2419;


  --primary: var(--primary-700);
  --accent: var(--pastel-blue-300);
  --teal: var(--teal-700);
  --secondary: var(--gray-500);
  --cinnabar: var(--cinnabar-500);
	
  --body-color: var(--gray-700);
}

.site-header .main-navigation .sub-menu {
    width: max-content;
    min-width: 220px;
}

.header-menu .menu-wrap {
    flex-grow: 1;
    text-align: end;
    padding-right: 32px;
}

.menu .cta a {
    background-color: var(--primary);
    color: white !important;
    line-height: 0 !important;
    padding: 24px 16px !important;
	border-radius: 8px;
	margin-left: 16px;
	text-transform: none !important;
}

.menu .cta a:hover {
    background-color: var(--primary-800);
}

.menu .cta a::before {
    display: none;
}

.hero-description a:hover {
    color: var(--primary-500);
}
.hero-description a {
    color: var(--body-color);
	font-weight: 300;
}

.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 110%; 
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.tooltip:hover::after {
  opacity: 1;
}

form hr {
    background-color: var(--gray-300) !important;
}

@media (min-width: 1510px) {
    .header-style-2 .container-custom {
        padding-left: 16px !important;
    }
}