:root {
  --bs-blue: #00a6c8;
  --bs-cyan: #66cade;
  --bs-orange: #fd7e14;
  --bs-primary: #0f1e3c;
  --bs-secondary: #f2efe1;
  --bs-success: #a9c23f;
  --bs-info: #00a6c8;
  --bs-warning: #e17953;
  --bs-danger: #dc3545;
  --bs-light: #f2efe1;
  --bs-dark: #282425;

  --bs-primary-rgb: 27, 68, 105;
  --bs-secondary-rgb: 242, 239, 225;
  --bs-success-rgb: 169, 194, 63;
  --bs-info-rgb: 13, 202, 240;
  --bs-warning-rgb: 0, 173, 208;
  --bs-danger-rgb: 220, 53, 69;
  --bs-light-rgb: 242, 239, 225;
  --bs-dark-rgb: 40, 36, 37;

  --bs-body-color-rgb: 4, 30, 66;
  --bs-body-bg-rgb: 242, 239, 225;
  --bs-body-color: #041e42;
  --bs-body-bg: #f2efe1;

  --bs-lg-hover-color: #35d0ff;
  --bs-link-color: #2cb3de;
  --bs-link-hover-color: #35d0ff;
  --bs-body-font-family: "Inter", -apple-system, BlinkMacSystemFont,
  Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif, Apple Color Emoji,
  Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
  text-wrap: pretty;
}

.text-balance {
  text-wrap: balance;
}

.text-orange {
  color: var(--bs-orange);
}

.object-fit-cover {
  object-fit: cover !important;
}

h6,
.h6,
h5,
.h5,
h4,
.h4,
h3,
.h3,
h2,
.h2,
h1,
.h1 {
  font-family: "Syne", -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
  Helvetica Neue, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji,
  Segoe UI Symbol, Noto Color Emoji;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.img-fluid {
  border-radius: 0.375rem;
}

header.masthead {
  position: relative;
  background-color: #000;
  margin-top: -160px;
  background: url("../assets/img/shop.jpg") no-repeat center center;
  background-size: cover;
  /* height: 100vh; */
  padding-top: 8rem;
  padding-bottom: 8rem;

  /* background: linear-gradient(315deg, rgba(4,39,66,1) 3%, rgb(54, 75, 104,1) 18%, rgb(104, 120, 142,1) 68%, rgba(4,39,66,1) 98%);
  animation: gradient 15s ease infinite;
  background-size: 400% 400%;
  background-attachment: fixed;
/* background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
background-size: 400% 400%;
animation: gradient 15s ease infinite; */
}

header.masthead:before {
  content: "";
  position: absolute;
  /* background-color: #1b4469; */
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.6;
}

header.masthead h1,
header.masthead .h1 {
  font-size: 2rem;
}

@media (min-width: 768px) {
  header.masthead {
    padding-top: 12rem;
    padding-bottom: 12rem;
  }

  header.masthead h1,
  header.masthead .h1 {
    font-size: 3rem;
  }
}

.navbar {
  padding-top: 1.8rem;
  padding-bottom: 1.8rem;
  z-index: 100;
}

.navbar img {
  block-size: 40px;
}

.navbar a {
  text-transform: uppercase;
}

.pt-6 {
  padding-top: 6rem !important;
}

.pb-6 {
  padding-bottom: 6rem !important;
}

.btn-orange {
  background-color: var(--bs-orange);
}

.btn-orange:hover {
  background: var(--bs-info) !important;
}

.showcase-img:before {
  background-color: #1b4469;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  opacity: 0.6;
}

footer.footer {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

ul {
  font-weight: 400;
}

/* Hover effect */
.hover-underline {
  position: relative;
  display: inline-block;
}

.hover-underline::after,
.hover-underline::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #a9c23f, #00a6c8);
  bottom: -5px;
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
}

.hover-underline::before {
  top: -5px;
  transform-origin: left;
}

.hover-underline:hover::after,
.hover-underline:hover::before {
  transform: scaleX(1);
}

/* Mautic */
.mauticform-page-wrapper {
  display: flex !important;
  row-gap: var(--bs-gutter-x);
}

.mauticform-errormsg {
  color: rgb(var(--bs-danger-rgb));
}

.mauticform-message {
  text-align: center;
  font-weight: bold;
  color: rgb(var(--bs-success-rgb));
}

.mauticform-message:not(:empty) + .mauticform-innerform {
  display: none;
}

/* Gradient */
.gradient-background {
  background: linear-gradient(240deg, #a9c23f, #00a6c8, #041e42, #364b68);
  background-size: 240% 240%;
  animation: gradient-animation 24s ease infinite;
}

/* Scrollbar */
:root {
  --sb-track-color: #f2efe1;
  --sb-thumb-color: #282425;
  --sb-size: 6px;
}

::-webkit-scrollbar {
  width: var(--sb-size)
}

::-webkit-scrollbar-track {
  background: var(--sb-track-color);
  border-radius: 1px;
}

::-webkit-scrollbar-thumb {
  background: var(--sb-thumb-color);
  border-radius: 1px;
}

@supports not selector(::-webkit-scrollbar) {
  :root {
    scrollbar-color: var(--sb-thumb-color) var(--sb-track-color);
  }
}