/*
Theme Name: technique
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
:root {

  /* =========================================
     COLORS
  ========================================= */

  --tt-color-primary: #F97316;
  --tt-color-primary-hover: #EA580C;
  --tt-color-primary-light: #FB923C;

  --tt-color-success: #22C55E;
  --tt-color-danger: #EF4444;
  --tt-color-warning: #FACC15;

  --tt-color-bg: #0F1115;
  --tt-color-surface: #171A21;
  --tt-color-surface-hover: #1E2430;
  --tt-color-header: #0B0D12;
  --tt-color-footer: #090B0F;

  --tt-color-text: #CBD5E1;
  --tt-color-text-muted: #94A3B8;
  --tt-color-heading: #F8FAFC;

  --tt-color-border: #2A313C;
  --tt-color-divider: rgba(255, 255, 255, .08);

  /* =========================================
     TYPOGRAPHY
  ========================================= */

  /* --tt-font-primary: "Inter", sans-serif;
  --tt-font-secondary: "Roboto Condensed", sans-serif; */

  --tt-font-weight-regular: 400;
  --tt-font-weight-medium: 500;
  --tt-font-weight-semibold: 600;
  --tt-font-weight-bold: 700;
  --tt-font-weight-black: 800;

  --tt-text-xs: 0.75rem;
  /* 12 */
  --tt-text-sm: 0.875rem;
  /* 14 */
  --tt-text-md: 1rem;
  /* 16 */
  --tt-text-lg: 1.125rem;
  /* 18 */
  --tt-text-xl: 1.5rem;
  /* 24 */
  --tt-text-2xl: 2rem;
  /* 32 */
  --tt-text-3xl: 3rem;
  /* 48 */
  --tt-text-4xl: 4rem;
  /* 64 */

  /* =========================================
     LINE HEIGHT
  ========================================= */

  --tt-line-height-none: 1;
  --tt-line-height-tight: 1.15;
  --tt-line-height-snug: 1.3;
  --tt-line-height-normal: 1.5;
  --tt-line-height-relaxed: 1.65;
  --tt-line-height-loose: 1.8;

  /* =========================================
     LETTER SPACING
  ========================================= */

  --tt-letter-spacing-tight: -0.02em;
  --tt-letter-spacing-normal: 0;
  --tt-letter-spacing-wide: 0.03em;

  /* =========================================
     SPACING
  ========================================= */

  --tt-space-2xs: 0.25rem;
  /* 4 */
  --tt-space-xs: 0.5rem;
  /* 8 */
  --tt-space-sm: 0.75rem;
  /* 12 */
  --tt-space-md: 1rem;
  /* 16 */
  --tt-space-lg: 1.5rem;
  /* 24 */
  --tt-space-xl: 2rem;
  /* 32 */
  --tt-space-2xl: 3rem;
  /* 48 */
  --tt-space-3xl: 4rem;
  /* 64 */
  --tt-space-4xl: 6rem;
  /* 96 */

  /* =========================================
     ICONS
  ========================================= */

  --tt-icon-xs: 0.875rem;
  /* 14 */
  --tt-icon-sm: 1.125rem;
  /* 18 */
  --tt-icon-md: 1.375rem;
  /* 22 */
  --tt-icon-lg: 1.75rem;
  /* 28 */
  --tt-icon-xl: 2rem;
  /* 32 */
  --tt-icon-2xl: 2.25rem;
  /* 36 */

  --tt-icon-stroke: 1.75px;

  /* =========================================
     BORDER RADIUS
  ========================================= */

  --tt-radius-sm: 0.5rem;
  /* 8 */
  --tt-radius-md: 0.75rem;
  /* 12 */
  --tt-radius-lg: 1.125rem;
  /* 18 */
  --tt-radius-xl: 1.5rem;
  /* 24 */
  --tt-radius-2xl: 2rem;
  /* 32 */
  --tt-radius-full: 9999px;

  /* =========================================
     SHADOW
  ========================================= */

  --tt-shadow-sm: 0 0.25rem 0.75rem rgba(0, 0, 0, .12);
  --tt-shadow-md: 0 0.625rem 1.875rem rgba(0, 0, 0, .18);
  --tt-shadow-lg: 0 1.25rem 3.125rem rgba(0, 0, 0, .28);

  /* =========================================
     TRANSITIONS
  ========================================= */

  --tt-transition-fast: .2s ease;
  --tt-transition-base: .35s cubic-bezier(.4, 0, .2, 1);
  --tt-transition-slow: .5s cubic-bezier(.4, 0, .2, 1);

  /* =========================================
     LAYOUT
  ========================================= */

  --tt-container-width: 90rem;
  /* 1440 */
  --tt-container-padding: 2rem;

  --tt-header-height: 5.25rem;
  /* 84 */
  --tt-header-height-sticky: 4.375rem;
  /* 70 */

}

[data-lucide] {
  width: var(--tt-icon-md);
  height: var(--tt-icon-md);
  stroke-width: var(--tt-icon-stroke);
  color: var(--tt-color-primary);
  vertical-align: middle;
}

.tt-header__top-left,
.tt-header__top-right {
  display: flex;
  align-items: center;
  gap: var(--tt-space-lg);
}

.tt-header__top-item {
  display: flex;
  align-items: center;
  gap: var(--tt-space-xs);
  font-size: var(--tt-text-xm);
  color: var(--tt-color-text);
}

.tt-header__top-nav {
  display: flex;
  align-items: center;
}

.tt-header__top-list {
  display: flex;
  align-items: center;
  gap: var(--tt-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tt-header__top-navitem {
  display: flex;
  align-items: center;
  margin: 0;
  position: relative;
}

.tt-header__top-navitem:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 0.875rem;
  background: var(--tt-color-border);
  margin-left: var(--tt-space-sm);
}

.tt-header__top-link {
  font-size: var(--tt-text-xm);
  font-weight: var(--tt-font-weight-medium);
  color: var(--tt-color-text);
  text-decoration: none;
  transition: var(--tt-transition-fast);
}

.tt-header__top-link:hover {
  color: var(--tt-color-primary-hover);
}

.tt-header__hotline {
  display: flex;
  align-items: center;
  gap: var(--tt-space-md);

  text-decoration: none;
  color: inherit;

  transition: var(--tt-transition-base);
}

.tt-header__hotline:hover {
  transform: translateY(-0.125rem);
}

.tt-header__hotline-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 4rem;
  height: 4rem;

  border-radius: var(--tt-radius-full);
  background: var(--tt-color-primary)
}

.tt-header__hotline-icon svg {
  width: var(--tt-icon-xl);
  height: var(--tt-icon-xl);

  stroke: var(--tt-color-primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tt-header__hotline-content {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.tt-header__hotline-label {
  font-size: var(--tt-text-xs);
  color: var(--tt-color-text-muted);
  line-height: normal;
}

.tt-header__hotline-number {
  font-size: var(--tt-text-lg);
  font-weight: var(--tt-font-weight-bold);
  color: var(--tt-color-heading);
  line-height: normal;
}

.tt-header__hotline-note {
  font-size: 0.6rem;
  color: var(--tt-color-primary);
  line-height: normal;
  text-transform: none;
}

.header-cart-title {
  order: 2;
  margin-left: var(--tt-space-xs);

  color: var(--tt-color-heading);
  line-height: 1;
  text-transform: none;

  transition: color var(--tt-transition-fast);
}

span.header-cart-icon {
  margin: 0;
}

.header-cart-link:hover .header-cart-title {
  color: var(--tt-color-primary-hover);
}

.header-nav .cart-item {
  margin-left: var(--tt-space-xl);
}

/* =========================================
   SEARCH HEADER (TT COMPONENT)
========================================= */

.tt-search {
  width: 100%;
  max-width: 100%;
  padding-right: var(--tt-space-xl);
}

.tt-search .tt-search__form {
  width: 100%;
}

.tt-search .tt-search__wrapper {
  display: flex;
  align-items: center;
  background: var(--tt-color-surface);
  border-radius: var(--tt-radius-sm);
  box-shadow: var(--tt-shadow-sm);
  transition: var(--tt-transition-base);
}

.tt-search .tt-search__input {
  flex: 1;
  height: 48px;
  outline: none;
  background: transparent;
  padding: 0 var(--tt-space-md);
  font-size: var(--tt-text-sm);
  color: var(--tt-color-text);
  line-height: 48px;
  border: 1px solid var(--tt-color-border);
  border-radius: var(--tt-radius-sm) 0 0 var(--tt-radius-sm);
  border-right: none;
  box-shadow: none !important;
}

.tt-search .tt-search__input:focus {
  border: 1px solid var(--tt-color-primary);
  border-right: none;
}

.tt-search .tt-search__input::placeholder {
  color: var(--tt-color-text-muted);
}

.tt-search .tt-search__button {
  width: 52px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: var(--tt-color-primary);
  color: #fff;
  transition: var(--tt-transition-base);
  margin: 0;
  border: none;
  border-radius: 0 var(--tt-radius-sm) var(--tt-radius-sm) 0;
}

.tt-search .tt-search__button:hover {
  background: var(--tt-color-primary-hover);
}

.tt-search .tt-search__icon {
  width: var(--tt-icon-sm);
  height: var(--tt-icon-sm);
}

li.html.custom.html_nav_position_text_top {
  width: 100%;
}

@media only screen and (max-width: 48em) {
  /*************** ADD MOBILE ONLY CSS HERE  ***************/


}