/* 
Theme Name: Northstar Theme
Theme URI: https://github.com/summit-mkt/northstar-theme
Description: Northstar Theme is a child theme of Hello Elementor, created by Summit Marketing team
Author: Summit Marketing Team
Template: hello-elementor
Version: 2.0.9.3
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/


/* CSS Reset */

/* *, *::before, *::after {
  box-sizing: border-box;
} */

* {
  margin: 0;
  padding: 0;
}

* {
  min-width: 0;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

html {
  -webkit-text-size-adjust: 100%; /* Safari, iOS Safari */
  text-size-adjust: 100%;         /* Chrome, Edge, Firefox Android */
}

body {
  min-height: 100vh;
  min-height: 100svh;
}

body {
  overflow-x: clip;
}

html {
  scrollbar-gutter: stable;
}

html {
  overscroll-behavior: contain;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: always;
  text-rendering: optimizeLegibility;
}

body {
  line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
  line-height: 1.1;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p, li {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

img, picture, video, canvas, svg, embed, iframe, object, audio {
  display: block;
  max-width: 100%;
  height: auto;
}

svg[width][height] {
  max-width: revert;
}

button {
  background: none;
}

input, button, textarea, select {
  font: inherit;
}

input, button, textarea, select {
  -webkit-appearance: none;
  appearance: none;
}

button,
[role="button"],
label,
summary,
select {
  cursor: pointer;
}

a {
  color: inherit;
}

table {
  border-collapse: collapse;
}

th {
  font-weight: inherit;
}

fieldset {
  border: none;
  padding: 0;
}

label { 
  display: inline-block; 
  line-height: 1; 
  vertical-align: middle;
}

sub,
sup {
  font-size: 55%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub { bottom: -0.25em; }
sup { top: -0.5em; }

pre, code, kbd, samp {
  font-family: monospace;
  font-size: inherit;
}

blockquote,
q {
  quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
  content: none;
}

#root {
  isolation: isolate;
}

:root {
  --txt-size__h-smd: clamp(1.3417rem, 0.9067rem + 2.2336vw, 2.103rem);
  --txt-size__h-xl: clamp(2.8rem, 0.3426rem + 6.3573vw, 4.7472rem);
  --txt-size__h-lg: clamp(1.8rem, 0.6426rem + 4.3573vw, 3.7472rem);
  --txt-size__h-ml: clamp(1.8rem, 0.6426rem + 4.3573vw, 3.2472rem);
  --txt-size__h-md: clamp(1.5rem, 0.9067rem + 2.2336vw, 2.4981rem);
  --txt-size__h-smd: clamp(1.3417rem, 0.9067rem + 2.2336vw, 2.103rem);
  --txt-size__h-sm: clamp(1.0417rem, 1.0009rem + 0.1535vw, 1.1103rem);
  --txt-size__h-xs: clamp(1.1103rem, 1.4216rem + -0.437vw, 1.3056rem);
  --text-size__h-splash: clamp(2.45rem, 0.6426rem + 4.3573vw, 3.7472rem);
  
  --txt-size__base: 1rem;

  --space__v-lg: clamp(1.875rem, 0.7746rem + 4.6948vw, 5rem); /* container-space__v-md and brand section*/
  --space__v-md: clamp(1.4375rem, 0.6232rem + 3.4742vw, 3.75rem);
  --space__h-lg: clamp(1rem, -0.9586rem + 8.3568vw, 6.5625rem); /* brand-section-padding */

  --space__v-md2: clamp(1.25rem, -0.0352rem + 2.681vw, 1.8rem); /* active temp-gap-1 | vertical text gap*/

  --space__v-cta: clamp(1.25rem, 1.0299rem + 0.939vw, 1.875rem);
  --space__h-cta: clamp(1.25rem, 1.0299rem + 0.939vw, 1.875rem); /*used on cta-padding | gap-m is also 1.25*/
  --space__col-gap: clamp(2rem, 1.2738rem + 3.0986vw, 4.0625rem); /* used on hero column gap temp-gap-2*/
  --space__v-ben-card: clamp(1.875rem, 1.6549rem + 0.939vw, 2.5rem); /* Used on cta-padding ()*/
  --space__h-ben-card: clamp(0.625rem, 0.493rem + 0.5634vw, 1rem);
  --bleed-distance__flex-2-col: max(0px, calc((100vw - var(--container-max-width)) / 2));
  --bleed-width__flex-2-col: calc(100% + var(--bleed-distance__flex-2-col));
  --bleed-margin__flex-2-col: calc(var(--bleed-distance__flex-2-col));
  --bord-radius__m: 12px;
}

h1, h2 {
  font-size: var(--txt-size__h_md);
}

h3 {
  font-size: 1rem;
}

#hero {
/*   min-height: 80vh; */

  & .flex-stack-mobile {
    row-gap: 0px;
  }
}

p, li {
  font-size: var(--txt-size__base);
}

.li-atomic > p {

  &::before {
    content: "";
    /* background-image: url("assets/images/icon/circle-check-regular.svg"); */
    background-size: contain;
    display: inline-block;
    width: 1rem;
    height: 1rem;
    position: relative;
    top: 0.1rem;
    bottom: 0.1rem;
    margin-right: 0.5rem;
    /* color: black; */
	  
	  /* SVG mask */
	  -webkit-mask-image: url('/wp-content/uploads/2026/11/circle-check-regular.svg');
	  mask-image: url('/wp-content/uploads/2026/11/circle-check-regular.svg');
	  -webkit-mask-size: contain;
	  mask-size: contain;
	  -webkit-mask-repeat: no-repeat;
	  mask-repeat: no-repeat;

	  /* SVG color */
	  background-color: black; 
	  transition: background-color 0.2s ease;
  }
}

.li-atomic:hover > p::before {
  /* color: var(--Primary); */
  background-color: var(--secondary);
}


/* 
Doesn't work for Brand Section

Brand Section flex should collapse in between desktop-mobile. Media query maybe.

section {
  display: flex;  
  flex-direction: column; 
} */

.container-inner {
  /* Only example of utilizing Elementor CSS Classes */
  max-width: var(--container-max-width);
}

.container-inner .flex-child {
  flex: 1 1 0;
}

.container-inner button {
  font-family: Open Sans, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  max-width: 400px;
  letter-spacing: 1px;
}

#benefits .grid-stack__3-2-1 {
  gap: 0.5rem;
}

/* Benefits */
#benefits .benefit__card { 
  transition: transform 0.3s ease-in-out !important;

  &:nth-child(even) {
    color: #ffffff;
    background-color: var(--primary);
  }

  &:hover {
    transform: scale(1.025);
    z-index: 10;
    background: var(--secondary);
    color: #ffffff;
  }

  &:hover h3,
  &:nth-child(2n) .benefit__title {
    color: #ffffff;
  }

  &:nth-child(even) svg path {
    fill: #ffffff;
  }

  & svg path {
    fill: var(--primary);
  }

  &:hover svg path {
    fill: #ffffff;
  }

  &:nth-child(4) svg path {
    stroke: none !important;
  }

  &::nth-child(5) svg path {
    fill: var(--Primary);
    stroke: black;
  }

  &:nth-child(5):hover svg path {
    stroke: var(--secondary);
  }

}

label:has(+ input[type="radio"]),
input[type="radio"] + label {
	font-size: 0.75rem;
}

/* Checkbox  */
input[type="checkbox"], input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  display: inline-block !important;
  border-radius: 4px !important;
  background-color: #ffffff;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  margin-right: 8px;

  &:checked::after {
    content: "";
    position: absolute;
    top: 45% ;
    left: 50%;
    width: 4px;
    height: 9px;
    border: solid #000000;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
  }

}