 

 
@font-face {
  font-family: 'Mark W04 Medium';
  src: url('../fonts/MarkWebW04Medium.woff2') format('woff2'),
       url('../fonts/MarkWebW04Medium.woff') format('woff'),
       url('../fonts/MarkWebW04Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mark W04 Medium Italic';
  src: url('../fonts/MarkWebW04MediumItalic.woff2') format('woff2'),
       url('../fonts/MarkWebW04MediumItalic.woff') format('woff'),
       url('../fonts/MarkWebW04MediumItalic.ttf') format('truetype');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mark W04 Bold';
  src: url('../fonts/MarkWebW04Bold.woff2') format('woff2'),
       url('../fonts/MarkWebW04Bold.woff') format('woff'),
       url('../fonts/MarkWebW04Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mark W04 Bold Italic';
  src: url('../fonts/MarkWebW04BoldItalic.woff2') format('woff2'),
       url('../fonts/MarkWebW04BoldItalic.woff') format('woff'),
       url('../fonts/MarkWebW04BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mark W04 Heavy';
  src: url('../fonts/MarkWebW04Heavy.woff2') format('woff2'),
       url('../fonts/MarkWebW04Heavy.woff') format('woff'),
       url('../fonts/MarkWebW04Heavy.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mark W04 Heavy Italic';
  src: url('../fonts/MarkWebW04HeavyItalic.woff2') format('woff2'),
       url('../fonts/MarkWebW04HeavyItalic.woff') format('woff'),
       url('../fonts/MarkWebW04HeavyItalic.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Mark W04 Black';
  src: url('../fonts/MarkWebW04Black.woff2') format('woff2'),
       url('../fonts/MarkWebW04Black.woff') format('woff'),
       url('../fonts/MarkWebW04Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

 
@font-face {
  font-family: 'Chap Light';
  src: url('../fonts/ChapLight.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Chap Black';
  src: url('../fonts/ChapBlack.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
   
  
  --navy-primary: #22303D;
  --navy-primary: #000000;
  --brown-primary: #392B25;
  --tan: #C8A583;
  --link-color: #8e6027;
  --navy-secondary: #152434;
  --brown-dark: #2C1E18;
  --blue-accent: #5389A6;
  --expo: #7D8C6E;  
  --bg-light: #F3F1F1;
  --black: #0D0B0A;
  --white: #FFFFFF;

   
  --font-main: "Mark W04 Medium", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
   
  --font-headings: var(--font-main);

   
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

   
  --side-tab-width: 70px;
}

html {
  scroll-behavior: smooth;
}

 
body {
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-smoothing:antialiased;
  color: #272727;
}

img {
  max-width: 100%;
   
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: var(--black);
}
a:hover {
  color: var(--link-color);
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

 
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

 
h1.h1, h1.h2, h1.h3 {
  font-family: 'Mark W04 Heavy', var(--font-headings);
  font-weight: 800;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headings);
}

h1 { font-size: clamp(2.25rem, 4vw, 3.25rem); }
h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }

p {
   
}

button {
  font-family: inherit;
  cursor: pointer;
}

.font-weight-bold{
  font-weight: 700 !important;
}

 

 
body {
  padding-right: var(--side-tab-width);
}
.container-fluid {
  max-width: 1500px;
  padding-right: var(--side-tab-width);
  padding-left: var(--side-tab-width);
  
}

@media (max-width: 768px) {
  body {
    padding-right: 0;
  }
  .container-fluid {
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
  }
}

 
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animated.infinite {
  animation-iteration-count: infinite;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fadeIn { animation-name: fadeIn; }

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
.fadeOut { animation-name: fadeOut; }

@keyframes fadeInDown {
  from { opacity: 0; transform: translate3d(0, -30%, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInDown { animation-name: fadeInDown; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translate3d(0, 30%, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInUp { animation-name: fadeInUp; }

@keyframes fadeInLeft {
  from { opacity: 0; transform: translate3d(-50%, 0, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInLeft { animation-name: fadeInLeft; }

@keyframes fadeInRight {
  from { opacity: 0; transform: translate3d(50%, 0, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInRight { animation-name: fadeInRight; }

 
@keyframes fadeInDownShort {
  from { opacity: 0; transform: translate(0, -20px); }
  to { opacity: 1; transform: none; }
}
.fadeInDownShort { animation-name: fadeInDownShort; }

@keyframes fadeInDownShorter {
  from { opacity: 0; transform: translate(0, -10px); }
  to { opacity: 1; transform: none; }
}
.fadeInDownShorter { animation-name: fadeInDownShorter; }

@keyframes fadeInUpShorter {
  from { opacity: 0; transform: translate(0, 20px); }
  to { opacity: 1; transform: none; }
}
.fadeInUpShorter { animation-name: fadeInUpShorter; }

@keyframes fadeInLeftShorter {
  from { opacity: 0; transform: translate(10px, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInLeftShorter { animation-name: fadeInLeftShorter; }

@keyframes fadeInRightShorter {
  from { opacity: 0; transform: translate(-50px, 0); }
  to { opacity: 1; transform: none; }
}
.fadeInRightShorter { animation-name: fadeInRightShorter; }

@keyframes blurIn {
  from { opacity: 0; filter: blur(20px); transform: scale(1.3); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
.blurIn { animation-name: blurIn; }

@keyframes dotPulse {
  from { opacity: 1; transform: scale(0.2); }
  to { opacity: 0; transform: scale(1); }
}
.dotPulse {
  animation-name: dotPulse;
  animation-iteration-count: infinite;
  animation-duration: 4s;
}

 
.delay-1 { animation-delay: 0.15s; }
.delay-2 { animation-delay: 0.3s; }
.delay-3 { animation-delay: 0.45s; }
.delay-4 { animation-delay: 0.6s; }
.delay-5 { animation-delay: 0.75s; }
.delay-6 { animation-delay: 0.9s; }
