/* =====================================================================
   www.katarinaturna.com – Soulful Selling
   Stylesheet recreated 1:1 from the original Konverzky page
   (Bootstrap 4.5 subset + Konverzky component rules), cleaned & self-hosted.
   ===================================================================== */

/* ---------- Fonts (self-hosted, subset latin + latin-ext) ---------- */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 400; font-display: swap; src: local("Open Sans"), local("OpenSans"), url(/assets/fonts/OpenSans-Regular.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 400; font-display: swap; src: local("Open Sans Italic"), local("OpenSans-Italic"), url(/assets/fonts/OpenSans-Italic.woff2) format("woff2"); }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 700; font-display: swap; src: local("Open Sans Bold"), local("OpenSans-Bold"), url(/assets/fonts/OpenSans-Bold.woff2) format("woff2"); }

@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: local("Lato Regular"), local("Lato-Regular"), url(/assets/fonts/Lato-Regular.woff2) format("woff2"); }
@font-face { font-family: Lato; font-style: normal; font-weight: 700; font-display: swap; src: local("Lato Bold"), local("Lato-Bold"), url(/assets/fonts/Lato-Bold.woff2) format("woff2"); }

@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: local("Roboto Regular"), local("Roboto-Regular"), url(/assets/fonts/Roboto-Regular.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: italic; font-weight: 400; font-display: swap; src: local("Roboto Italic"), local("Roboto-Italic"), url(/assets/fonts/Roboto-Italic.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: local("Roboto Bold"), local("Roboto-Bold"), url(/assets/fonts/Roboto-Bold.woff2) format("woff2"); }
@font-face { font-family: Roboto; font-style: italic; font-weight: 700; font-display: swap; src: local("Roboto BoldItalic"), local("Roboto-BoldItalic"), url(/assets/fonts/Roboto-BoldItalic.woff2) format("woff2"); }

/* ---------- Reset / base (Bootstrap 4.5 reboot subset) ---------- */
*, :after, :before { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: sans-serif; line-height: 1.15; }
body {
  background-color: #fff;
  color: #212529;
  font-family: "Open Sans", serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  text-align: left;
}
[tabindex="-1"]:focus:not(:focus-visible) { outline: 0 !important; }
h1, h2, h3, h5 { margin: 0; padding: 0; font-size: 52px; font-weight: 700; line-height: 1.2; text-align: center; }
p { margin-bottom: 1rem; margin-top: 0; }
ul { margin-top: 0; margin-bottom: 1rem; list-style-position: inside; }
b { font-weight: bolder; }
b.fw-700 { font-weight: 700; }
a { background-color: transparent; color: #007bff; text-decoration: none; }
a:hover { color: #0056b3; text-decoration: underline; }
a:not([href]), a:not([href]):hover { color: inherit; text-decoration: none; }
a, b, font, h1, h5, i, p, span { text-decoration: inherit; }
font span { display: inline-block; }
h1 font span, h2 font span, h3 font span, h5 font span, p font span { display: inline; }
h1 span, h5 span, span { display: inline; }
img { border-style: none; vertical-align: middle; max-width: 100% !important; }
label { display: inline-block; margin-bottom: 0.5rem; }
button { border-radius: 0; }
button:focus { outline: 1px dotted; outline: 5px auto -webkit-focus-ring-color; }
button, input, select { font-family: inherit; font-size: inherit; line-height: inherit; margin: 0; }
button, input { overflow: visible; }
button, select { text-transform: none; }
[role="button"] { cursor: pointer; }
[type="button"], [type="submit"], button { -webkit-appearance: button; }
[type="button"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) { cursor: pointer; }
[type="button"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0; }
input[type="checkbox"] { box-sizing: border-box; padding: 0; }
template { display: none; }
[hidden] { display: none !important; }
button > span:empty { display: inline-block; height: 20px; width: 20px; }

/* ---------- Grid ---------- */
.container { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; width: 100%; }
.container-fluid, .container-md { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; width: 100%; }
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container, .container-md { max-width: 720px; } }
@media (min-width: 992px) { .container, .container-md { max-width: 960px; } }
@media (min-width: 1200px) { .container, .container-md { max-width: 1140px; } }
.row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
.col-md-12, .col-md-4, .col-md-6 { padding-left: 15px; padding-right: 15px; position: relative; width: 100%; }
@media (min-width: 768px) {
  .col-md-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }
}
.row > .col-md-4.column-vertical-align-middle,
.row > .col-md-6.column-vertical-align-middle,
.row > .col-md-12.column-vertical-align-middle { display: flex; flex-direction: column; justify-content: center; }

/* ---------- Utilities ---------- */
.img-fluid { height: auto !important; max-width: 100% !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.w-auto { width: auto !important; }
.ml-2 { margin-left: 0.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.text-white { color: #fff !important; }
[data-text-action="link"], [data-text-action="modal"] { cursor: pointer; }

/* Font sizes: -lg applies always, -sm overrides on phones (as in the original) */
.fs-lg-14 { font-size: 14px !important; line-height: 19px !important; }
.fs-lg-16 { font-size: 16px !important; line-height: 21px !important; }
.fs-lg-18 { font-size: 18px !important; line-height: 23px !important; }
.fs-lg-20 { font-size: 20px !important; line-height: 25px !important; }
.fs-lg-24 { font-size: 24px !important; line-height: 29px !important; }
.fs-lg-30 { font-size: 30px !important; line-height: 35px !important; }
.fs-lg-31 { font-size: 31px !important; line-height: 36px !important; }
.fs-lg-37 { font-size: 37px !important; line-height: 42px !important; }
.fs-lg-41 { font-size: 41px !important; line-height: 46px !important; }
.lh-lg-45 { line-height: 50px !important; }
@media screen and (max-width: 576px) {
  .fs-sm-13 { font-size: 13px !important; line-height: 18px !important; }
  .fs-sm-14 { font-size: 14px !important; line-height: 19px !important; }
  .fs-sm-16 { font-size: 16px !important; line-height: 21px !important; }
  .fs-sm-18 { font-size: 18px !important; line-height: 23px !important; }
  .fs-sm-20 { font-size: 20px !important; line-height: 25px !important; }
  .fs-sm-23 { font-size: 23px !important; line-height: 28px !important; }
  .fs-sm-27 { font-size: 27px !important; line-height: 32px !important; }
  .fs-sm-30 { font-size: 30px !important; line-height: 35px !important; }
  .lh-sm-29 { line-height: 34px !important; }
}

/* Variable paddings */
.pt-var { padding-top: var(--pt) !important; }
.pb-var { padding-bottom: var(--pb) !important; }
.pr-var { padding-right: var(--pr) !important; }
.pl-var { padding-left: var(--pl) !important; }
@media (min-width: 768px) {
  .pt-md-var { padding-top: var(--pt-md) !important; }
  .pb-md-var { padding-bottom: var(--pb-md) !important; }
  .pr-md-var { padding-right: var(--pr-md) !important; }
  .pl-md-var { padding-left: var(--pl-md) !important; }
}

/* Letter spacing via CSS vars (--ls-lg / --ls-sm, in 0.1px units) */
h1, h5, input, p, select, ul { --ls-lg: 0; --ls-sm: 0; }
@media (min-width: 768px) { h1, h5, input, p, select, ul { letter-spacing: calc(var(--ls-lg) * 0.1px); } }
@media (max-width: 767.98px) { h1, h5, input, p, select, ul { letter-spacing: calc(var(--ls-sm) * 0.1px); } }

/* ---------- Sections (Konverzky "v2" containers) ---------- */
.page > .container-fluid, .page > .container-fluid > .container, .page > .container-fluid > .container .row,
.page > .container-fluid > .container-md, .page > .container-fluid > .container-md .row,
.page > .modal .modal-body > .container-fluid, .page > .modal .modal-body > .container-fluid > .container,
.page > .modal .modal-body > .container-fluid > .container .row { position: relative; }

.page > .container-fluid.v2, .page > .container-md.v2, .page > .container.v2,
.page > .modal .modal-body > .container-fluid.v2, .page > .modal .modal-body > .container-md.v2, .page > .modal .modal-body > .container.v2 { padding: 30px 45px; }
.page > .container-fluid.v2 > .container-md.v2, .page > .container-md.v2,
.page > .modal .modal-body > .container-fluid.v2 > .container-md.v2 { max-width: 960px; }
.page > .container-fluid.v2 .row, .page > .container-md.v2 .row, .page > .container.v2 .row,
.page > .modal .modal-body > .container-fluid.v2 .row { margin-left: 0; margin-right: 0; }
.page > .modal .modal-body > .container-fluid.v2 { background-color: #fff; }

@media (max-width: 991.98px) {
  .page > .container-fluid.v2, .page > .container-md.v2, .page > .container.v2,
  .page > .modal .modal-body > .container-fluid.v2 { padding: 20px; }
}
@media (max-width: 767.98px) {
  .page > .container-fluid.v2, .page > .container-md.v2, .page > .container.v2,
  .page > .modal .modal-body > .container-fluid.v2 { padding: 10px; }
  /* (the original also declared row margins of -5px here, but its later unconditional `margin: 0` rule wins) */
  .page > .container-fluid.v2 .row > .col-md-12, .page > .container-fluid.v2 .row > .col-md-4, .page > .container-fluid.v2 .row > .col-md-6,
  .page > .modal .modal-body > .container-fluid.v2 .row > .col-md-12 { padding-left: 5px; padding-right: 5px; }
}
@media screen and (max-width: 768px) {
  .page > .container-fluid.v2 .row > .col-md-12:nth-child(n + 2):not(.pt-var),
  .page > .container-fluid.v2 .row > .col-md-4:nth-child(n + 2):not(.pt-var),
  .page > .container-fluid.v2 .row > .col-md-6:nth-child(n + 2):not(.pt-var),
  .page > .modal .modal-body > .container-fluid.v2 .row > .col-md-12:nth-child(n + 2):not(.pt-var) { padding-top: 0 !important; }
}

/* Background image layer with opacity (hero) */
.container-fluid.bg-full-center { background-position: 50%; background-repeat: no-repeat; background-size: cover; }
@media (max-width: 991.98px) { .container, .container-fluid, .container-md, .row { background-position-y: unset; } }
.container-fluid.v2 { --background-image: ""; --background-image-opacity: 1; }
.container-fluid.v2:before {
  background-image: var(--background-image);
  background-position: inherit; background-repeat: inherit; background-size: inherit;
  border-radius: inherit;
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  opacity: var(--background-image-opacity);
}
.container-fluid.inner-shadow-40, .container-fluid > .container-md.inner-shadow-40, .container-fluid > .container.inner-shadow-40 {
  box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.4);
}

/* ---------- Buttons ---------- */
.btn {
  background-color: transparent; border: 1px solid transparent; border-radius: 0.25rem; color: #212529;
  display: inline-block; font-size: 1rem; font-weight: 400; line-height: 1.5; padding: 0.375rem 0.75rem;
  text-align: center; user-select: none; vertical-align: middle;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.btn:hover { color: #212529; text-decoration: none; }
.btn:focus { box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); outline: 0; }
.btn:not(:disabled):not(.disabled) { cursor: pointer; }
.btn-primary { background-color: #007bff; border-color: #007bff; color: #fff; }
.btn-primary:focus, .btn-primary:hover { background-color: #0069d9; border-color: #0062cc; color: #fff; }
.btn br:last-child, .button-component br:last-child { display: none; }
.button-component {
  --icon-left-width: 1.5rem; --icon-right-width: 1.5rem;
  --padding-left-right: 0px; --padding-left-right-sm: 0px;
  --icon-padding-left: calc(var(--padding-left-right) + var(--icon-left-width));
  --icon-padding-right: calc(var(--padding-left-right) + var(--icon-right-width));
  border-width: 0; position: relative;
}
@media (max-width: 991.98px) { .button-component { --padding-left-right: var(--padding-left-right-sm) !important; } }
.button-component .btn {
  border: inherit; border-radius: inherit; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit;
  line-height: inherit; margin-top: 0; opacity: inherit; text-align: inherit;
  padding-left: var(--icon-padding-left) !important; padding-right: var(--icon-padding-right) !important;
  transition: opacity 0.3s ease-in-out;
}
.button-component .btn:active, .button-component .btn:focus, .button-component .btn:hover { filter: saturate(2) opacity(0.8) !important; }
.button-component .btn:active { color: inherit !important; }
.button-component > a > .effect { background-color: transparent; border-radius: inherit; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: -1; }
.button-component.drop-shadow { --drop-shadow-x: 8px; --drop-shadow-y: 12px; --drop-shadow-blur: 10px; --drop-shadow-color: #000; }
.button-component.drop-shadow a.btn { filter: drop-shadow(var(--drop-shadow-x) var(--drop-shadow-y) var(--drop-shadow-blur) var(--drop-shadow-color)) !important; }
.button-component.drop-shadow a.btn:hover { filter: drop-shadow(var(--drop-shadow-x) var(--drop-shadow-y) var(--drop-shadow-blur) var(--drop-shadow-color)) saturate(2) opacity(0.8) !important; }
.button-component .btn.is-busy { pointer-events: none; opacity: 0.6 !important; }

/* ---------- Images ---------- */
.img-component img { border: inherit; border-radius: inherit; }
.img-component img[data-action] { cursor: pointer; }

/* ---------- Lists (check style) ---------- */
ul.v2 {
  --list-padding-left: 2.5ex; --list-item-margin-bottom: 0px; --list-icon-margin-left: -1.2em;
  --list-icon-color: inherit; --list-icon-font-size: 0.75em; --list-icon-width: 0px; --list-icon-height: 0;
  display: flex !important; flex-direction: column; list-style: none !important;
  padding-left: calc(var(--list-padding-left) + var(--list-icon-width)); position: relative;
}
ul.v2 li { margin-bottom: var(--list-item-margin-bottom); position: relative; }
ul.v2 li:last-child { margin-bottom: 0 !important; }
/* Original used the Font Awesome "circle" glyph (\f111) at 0.75em; recreated as a CSS disc to avoid shipping FA */
ul.v2[list-style="check"] li:before {
  content: ""; position: absolute; left: 0; top: 0.5em;
  margin-left: calc(var(--list-icon-margin-left) + 0.05em);
  width: 0.65em; height: 0.65em; border-radius: 50%;
  background-color: var(--list-icon-color);
}

/* ---------- Text effects (rough-notation drawn by /assets/js/effects.js) ---------- */
[text-effect] { position: relative; z-index: 1; }
[text-effect][text-effect="full-color"] { --effectColorPrimary: #ffcb56; background-color: var(--effectColorPrimary); }
[text-effect] .rough-annotation { z-index: -1; }

/* ---------- Forms ---------- */
.form-control {
  background-clip: padding-box; background-color: #fff; border: 1px solid #ced4da; border-radius: 0.25rem; color: #495057;
  display: block; font-size: 1rem; font-weight: 400; height: calc(1.5em + 0.75rem + 2px); line-height: 1.5;
  padding: 0.375rem 0.75rem; width: 100%;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:focus { background-color: #fff; border-color: #80bdff; box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); color: #495057; outline: 0; }
.form-control::placeholder { color: #6c757d; opacity: 1; }
.form-check { display: block; padding-left: 1.25rem; position: relative; }
.form-check-input { margin-left: -1.25rem; margin-top: 0.3rem; position: absolute; }
.form-check-label { margin-bottom: 0; }
.input-wrap-v2 { border-width: 0 !important; position: relative; }
.input-wrap-v2 input { background-color: inherit; border-color: inherit; border-radius: inherit; border-style: inherit; color: inherit; font-size: inherit; font-weight: inherit; opacity: inherit; }
.input-wrap-v2 input:focus { background-color: inherit; border-color: inherit; box-shadow: inherit; color: inherit; outline: inherit; }
.form-control.highlight, .input-wrap-v2 input.highlight { --highlight-color: #21bd9d; --highlight-spread: 2px; }
.form-control.highlight:active, .form-control.highlight:focus, .input-wrap-v2 input.highlight:active, .input-wrap-v2 input.highlight:focus {
  border-color: var(--highlight-color) !important; box-shadow: 0 0 0 var(--highlight-spread) var(--highlight-color); outline: none;
}
.form-control.is-invalid, .input-wrap-v2 input.is-invalid { box-shadow: 0 0 0 2px #f02d3a !important; }
.form-check-input.is-invalid + .form-check-label span { outline: 2px solid #f02d3a; outline-offset: 2px; }

/* Honeypot: visually hidden but present for bots */
.hp-field { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* Form status message */
.form-status { margin-top: 15px; text-align: center; font-family: Lato, "Open Sans", sans-serif; font-size: 15px; line-height: 20px; }
.form-status:empty { display: none; }
.form-status.is-error { color: #d61634; }
.form-status.is-success { color: #2e7d32; }
.cf-turnstile { display: flex; justify-content: center; margin-top: 15px; }
.cf-turnstile:empty { display: none; }

/* ---------- Modal (Bootstrap 4 + Konverzky v2 tweaks; toggled by /assets/js/site.js) ---------- */
.fade { transition: opacity 0.15s linear; }
.fade:not(.show) { opacity: 0; }
.modal { display: none; height: 100%; left: 0; outline: 0; overflow: hidden; overflow-y: scroll; position: fixed; top: 0; width: 100%; z-index: 1050; }
.modal.is-open { display: block; }
.modal-dialog { margin: 0.5rem; pointer-events: none; position: relative; width: auto; }
.modal.fade .modal-dialog { transform: translateY(-50px); transition: transform 0.3s ease-out; }
.modal.show .modal-dialog { transform: none; }
.modal-dialog-scrollable { display: flex; max-height: calc(100% - 1rem); }
.modal-dialog-scrollable .modal-content { max-height: calc(100vh - 1rem); overflow: hidden; }
.modal-dialog-scrollable .modal-body { overflow-y: auto; }
.modal-content { background-clip: padding-box; background-color: #fff; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 0.3rem; display: flex; flex-direction: column; outline: 0; pointer-events: auto; position: relative; width: 100%; }
.modal-body { flex: 1 1 auto; padding: 1rem; position: relative; }
@media (min-width: 576px) {
  .modal-dialog { margin: 1.75rem auto; max-width: 500px; }
  .modal-dialog-scrollable { max-height: calc(100% - 3.5rem); }
  .modal-dialog-scrollable .modal-content { max-height: calc(100vh - 3.5rem); }
}
.modal-backdrop { background-color: #000; height: 100vh; left: 0; position: fixed; top: 0; width: 100vw; z-index: 1040; }
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show { opacity: 0.5; }
body.modal-open { overflow: hidden; }
.close { color: #000; float: right; font-size: 1.5rem; font-weight: 700; line-height: 1; opacity: 0.5; text-shadow: 0 1px 0 #fff; }
.close:hover { color: #000; text-decoration: none; }
.close:not(:disabled):not(.disabled):focus, .close:not(:disabled):not(.disabled):hover { opacity: 0.75; }
button.close { background-color: transparent; border: 0; padding: 0; }
.modal .modal-dialog .modal-body button.close { position: absolute; right: 10px; top: 10px; z-index: 100; }
.modal.v2 .modal-dialog.modal-dialog-scrollable .modal-content { overflow: visible; }
.modal.v2 .modal-dialog.modal-dialog-scrollable .modal-content .modal-body { background-color: inherit; overflow: visible; }
.modal.v2 .modal-content { border: none !important; border-radius: 0; }
.modal.v2 .modal-content .modal-body { padding: 0; }
.modal.v2 .modal-content button[data-dismiss="modal"] {
  background-color: #fff; border: 1px solid #969696; border-radius: 20px; color: #000; height: 40px; opacity: 1;
  position: absolute; right: -20px; top: -20px; width: 40px;
}
.modal.v2 .modal-content button[data-dismiss="modal"]:hover { background-color: #dbdbdb; }
@media (max-width: 991.98px) { .modal.v2 .modal-content button[data-dismiss="modal"] { right: 0 !important; top: 0 !important; } }

/* ---------- Simple content pages (thank-you) ---------- */
.simple-page a { color: #4a787d; text-decoration: underline; }