:root {
    --primary-white: #fff;
    --primary-red: #ED1C24;
    --primary-black: #0B0B0B;
    --night: #111111;
    --dark-gray: #222222;
    --medium-dark-gray: #3E3E3E;
    --jet-gray: #303030;
    --metal-gray: #2F2F2F;
    --cadet-gray: #a0a0a5;
    --soft-gray: #DCDDDE;
    --input-fill: #363636;
    --border-primary: #5B5B5B;
    --button-white: #EEF1F4;
    --form-text: #CCCCCC;
    --made-in-america-home-hover: #163047;
    --nav-padding: clamp(16px, 4vw, 26px) 24px;
    --section-padding: clamp(80px, 4vw, 100px) 24px;
    --feature-card-header-padding: clamp(24px, 4vw, 20px) 72px clamp(60px, 4vw, 40px);
    --feature-card-body-padding: clamp(62px, 4vw, 60px) 72px clamp(100px, 4vw, 60px);
    --feature-card-content-padding: 20px clamp(48px, 4vw, 24px);
    --feature-card-pagination-padding: 24px clamp(72px, 4vw, 24px);
    --footer-cta-padding: clamp(30px, 4vw, 40px) 24px;
    --footer-padding: clamp(40px, 4vw, 60px) 24px;
    --specs-padding: clamp(30px, 4vw, 40px) 30px;
    --btn-padding: 15px clamp(20px, 4vw, 40px);
    --small-btn-padding: 12px clamp(18px, 4vw, 18px);
    --h1-font: 500 4.25rem/1 "futura-pt-condensed", sans-serif;
    --h3-font: 500 2.813rem/1.1 "futura-pt-condensed", sans-serif;
    --h4-font: 500 2.313rem/1.1 "futura-pt-condensed", sans-serif;
    --h5-font: 500 1.85rem/1 "futura-pt-condensed", sans-serif;
    --paragraph-font: 400 16px/1.6 "Inter", sans-serif;
    --btn-font: 700 clamp(12px, 4vw, 18px)/1.2 "Play", sans-serif;
    --small-btn-font: 700 clamp(12px, 4vw, 12px)/1 "Play", sans-serif;
    --primary-border-radius: 14px;
    --btn-border-radius: 50px;
}

body {
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    background-color: var(--primary-black);
}

body.no-scroll {
    overflow: hidden;
}

section {
    padding: var(--section-padding);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-transform: uppercase;
}

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

h3 {
    font: var(--h3-font);
}

h4 {
    font: var(--h4-font);
}

h5 {
    font: var(--h5-font);
}

p {
    font: var(--paragraph-font);
}

a {
    color: var(--primary-white);
    transition: color 0.2s ease-in-out;
}

button {
    background: none;
    border: none;
}

/* Superscript - Rights & Trademark */
h1 sup,
h2 sup,
h3 sup,
h4 sup,
p sup,
span sup {
    font-size: 42%;
    vertical-align: top;
    position: relative;
    top: 20px;
}

h2 sup,
h3 sup {
    font-size: 36%;
    top: 19px;
}

h3 sup {
    top: 15px;
}

h4 sup {
    top: 12px;
}

p sup {
    font-size: 70%;
    top: 11px;
}

span sup {
    font-size: 46%;
    top: 9px;
}

h3 .trademark,
h4 .trademark,
p .trademark {
    font-size: 41%;
    vertical-align: top;
    position: relative;
    top: 4px;
}

h3 .trademark {
    font-size: 62%;
    left: 2px;
}

p .trademark {
    font-size: 72%;
    top: 3px;
}

/* Paragraph with Button Space */
.p-btn-mb-48px {
    margin-bottom: 48px;
}

.p-btn-mb-28px {
    margin-bottom: 28px;
}

/* Tagline / Flavor Text */
.tagline {
    font: 400 20px/1.2 "Play", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

.tagline-small {
    font: 400 16px/1.2 "Play", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 16px;
}

/* Background Colors */
.section-dark {
    background-color: var(--primary-black);
}

.section-white {
    background-color: var(--primary-white);
}

.section-soft-gray {
    background-color: var(--soft-gray);
}

.section-dark-gray {
    background-color: var(--dark-gray);
}

.section-night {
    background-color: var(--night);
}

.section-jet-gray {
    background-color: var(--jet-gray);
}

.section-button-white {
    background-color: var(--button-white);
}

.section-jet-gray.footer-cta {
    padding: var(--footer-cta-padding);
}

.input-fill {
    background-color: var(--input-fill) !important;
}

/* Text Colors */
.text-white {
    color: var(--primary-white);
}

.text-dark {
    color: var(--primary-black);
}

/* Buttons */
.primary-btn,
.primary-btn-inverted,
.secondary-btn,
.secondary-btn-white,
.tertiary-btn,
.tertiary-btn-red,
.small-btn {
    display: inline-block;
    font: var(--btn-font);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    width: auto;
    padding: var(--btn-padding);
    background-color: transparent;
    color: var(--primary-white);
    text-align: center;
    border: solid 2px var(--button-white);
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.primary-btn-inverted {
    color: var(--primary-black);
    border-color: var(--primary-black);
}

.secondary-btn {
    padding: var(--small-btn-padding);
}

.secondary-btn-white {
    padding: var(--small-btn-padding);
    background-color: var(--primary-white);
    color: var(--primary-black);
}

.tertiary-btn,
.tertiary-btn-red {
    background-color: var(--primary-black);
    color: var(--button-white) !important;
    border: solid 1px var(--primary-white);
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.tertiary-btn-red {
    background-color: var(--primary-red);
    border: solid 1px var(--primary-red);
}

.small-btn {
    font: var(--small-btn-font);
    letter-spacing: 00.031em;
    padding: var(--small-btn-padding);
}

.small-btn.stand-out {
    border: solid 1px var(--primary-red);
}

.primary-btn:hover,
.secondary-btn:hover,
.small-btn:hover {
    background: var(--primary-red);
}

.secondary-btn-white:hover {
    background: var(--primary-red);
    color: var(--primary-white);
    border-color: var(--primary-red);
}

.primary-btn-inverted:hover,
.tertiary-btn:hover,
.tertiary-btn-red:hover {
    color: var(--primary-black) !important;
    background-color: var(--primary-white);
    border-color: var(--primary-black);
}

/* On the header of the Models. */
.models .primary-btn {
    margin: 30px auto;
}

/* On the header of the homepage for desktop. Hidden on Desktop and shown on Mobile. */
.explore-btn {
    display: none;
}
.explore-hidden {
    display: block;
}

/* Bootstrap 5.3 Button Override */
.btn-secondary {
    background-color: var(--input-fill);
    border: solid 1px var(--border-primary);
    border-radius: 0 4px 4px 0;
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.btn-secondary:hover {
    background-color: var(--medium-dark-gray);
    border: solid 1px var(--border-primary);
}

.dropdown-menu {
    font: var(--paragraph-font);
    border: 1px solid var(--bs-border-color);
    color: var(--primary-black);
}

.dropdown-item:active {
    color: var(--primary-white);
    background-color: var(--primary-red);
}

/*** NAV/HEADER STARTS ***/
.navbar {
    position: fixed;
    width: 100%;
    z-index: 1000;
    font: 500 12px/1 "Play", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    background-color: var(--primary-black);
    padding: var(--nav-padding);
    color: var(--primary-white);
    border-bottom: 1px solid var(--primary-red);
    transition: font-size 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.navbar p,
.navbar .nav-footer-link a {
    text-transform: none;
}

.nav-container {
    width: 100%;
    max-width: 1600px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    /* Left | Center | Right */
    align-items: center;
    margin: 0 auto;
    transition: grid-template-columns 0.3s ease-in-out;
}

.nav-hidden {
    transform: translateY(-100%);
}

.menu-btn {
    display: flex;
    align-items: center;
    justify-self: start;
    gap: 8px;
    color: var(--primary-white);
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.menu-btn:hover {
    color: var(--primary-red);
}

img {
    width: 100%;
}

.logo {
    position: relative;
    left: auto;
    transform: none;
    max-width: 240px;
    padding: 0 16px;
    justify-self: center;
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
    gap: 20px;
    min-width: auto;
    white-space: nowrap;
}

.nav-links a {
    display: flex;
    align-items: center;
    color: var(--primary-white);
    text-decoration: none;
    gap: 8px;
    transition: color 0.15s ease-in-out;
}

.nav-links a:hover {
    color: var(--primary-red);
}

.sidebar-nav {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    left: -200%;
    width: 92%;
    max-width: 1164px;
    min-width: 400px;
    height: 100vh;
    transition: left 0.4s ease-in-out;
    z-index: 1000;
}

/* Auto width for Whynautique & Company but responsive - This class prevents it from becoming too wide on large screens and not clip when resizing windows */
.sidebar-nav.auto-width {
    width: auto;
    max-width: 100%;
}

/* Background overlay for sidebar-nav*/
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 999;
}

.sidebar-nav.open {
    left: 0;
}

.overlay.show {
    opacity: 1;
    visibility: visible;
}

.sidebar {
    width: 100%;
    max-width: 360px;
    height: 100vh;
    background: var(--primary-black);
    padding: 26px 40px 0;
    z-index: 1000;
    overflow-y: auto;
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.sidebar::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.sidebar a {
    display: block;
    color: var(--primary-white);
}

.sidebar-logo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sidebar-logo img {
    max-width: 224px;
}

.close-icon {
    color: var(--primary-white);
    font-size: 26px;
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}

.close-icon:hover {
    color: var(--primary-red);
}

/*Models, Why Nautique, etc.*/
.sidebar-pill {
    margin-top: 26px;
}

.sidebar-pill div {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font: normal 700 17px/1.6 "Play", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    color: white;
    background-color: transparent;
    padding: 14px 24px;
    margin-bottom: 14px;
    border-radius: var(--btn-border-radius);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

.sidebar-pill div:hover,
.sidebar-pill div.active-tab {
    background-color: var(--metal-gray);
}

nav hr {
    border-top: 1px solid var(--primary-red);
    opacity: 1;
    margin: 40px 16px 36px;
}

/*Contact Us, Find a Dealer, etc.*/
nav .sidebar-bottom-nav a {
    display: inline-block;
    font: normal 600 15px/1.6 "Inter", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: #4A4A4A;
    text-underline-offset: 6px;
    transition: text-decoration-color 0.15s ease-in-out;
    margin: 0 24px 20px;
}

nav .sidebar-bottom-nav a:hover {
    text-decoration-color: var(--primary-red);
}

/* Navigation Content */
.sidebar-content {
    padding: 90px 40px 30px;
    height: 100vh;
    overflow-y: scroll;
    background-color: var(--dark-gray);
    transition: width 0.3s ease-in-out;
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    scrollbar-width: none;
    /* Firefox */
}

.sidebar-content::-webkit-scrollbar {
    display: none;
    /* Safari and Chrome */
}

.models .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(50px, 1fr));
}

#models {
    width: 100%;
}

#whynautique,
#company {
    width: 100%;
    max-width: 444px;
}

.whynautique,
.company {
    display: none;
}

/* Nav Why Nautique & Company */
.nav-cta {
    position: relative;
    display: inline-block;
    text-align: center;
    margin: 12px 0 12px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.nav-cta a {
    display: block;
    width: 100%;
    height: 100%;
}

.nav-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    transition: background 0.3s ease-in-out;
    z-index: 1;
}

.nav-cta:hover::before {
    background: rgba(0, 0, 0, 0.2);
}

.nav-cta span {
    position: absolute;
    width: 100%;
    top: 16%;
    left: 50%;
    transform: translate(-50%, -50%);
    font: 400 2.2rem/1 futura-pt-condensed, sans-serif;
    color: var(--primary-white);
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

.nav-cta img {
    aspect-ratio: 7 / 3.4;
    width: 100%;
    max-width: 364px;
    height: auto;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.nav-cta:hover img {
    transform: scale(1.016);
}

.nav-cta.footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    transition: background 0.3s ease-in-out;
    z-index: 1;
}

.nav-cta.footer:hover::before {
    background: rgba(0, 0, 0, 0.3);
}

.nav-cta.footer:hover img {
    transform: scale(1);
}

.nav-cta.footer span {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font: 400 1.625rem/1 futura-pt-condensed, sans-serif;
    color: var(--primary-white);
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}


.nav-back-btn {
    display: none;
    color: var(--primary-white);
}

/**** Subnav ****/
.modelsnav {
    position: fixed;
    width: 100%;
    z-index: 999;
    transform: translateY(84%);
    transition: transform 0.3s ease-in-out;
}

.modelsnav-hidden {
    height: auto;
    transform: translateY(0%);
}

.modelsnav img {
    height: 45px;
}

.modelsnav .ski {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 45px;
}
.modelsnav .ski img {
    height: auto;
}

.subnav {
    position: sticky;
    top: 80px;
    width: 100%;
    background-color: var(--primary-black);
    padding: var(--nav-padding);
    color: var(--primary-white);
    z-index: 12;
}

.subnav-container {
    width: 100%;
    max-width: 1600px;
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    margin: 0 auto;
    transition: grid-template-columns 0.3s ease-in-out;
    position: relative;
}

.subnav img {
    max-width: 210px;
    width: auto;
}

.subnav-links-container {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    gap: 14px;
    overflow-y: auto;
}

.subnav-links-container span {
    display: none;
}

.subnav-links {
    display: flex;
    gap: 20px;
    margin-left: 2.4vw;
}

.subnav-links a {
    display: flex;
    align-items: center;
    color: var(--primary-white);
    text-decoration: underline;
    text-decoration-color: var(--primary-black);
    text-underline-offset: 6px;
    transition: text-decoration-color 0.15s ease-in-out;
}

.subnav-links a:hover {
    text-decoration-color: var(--primary-white);
}

.subnav-links a.active {
    text-decoration-color: var(--primary-red);
}

.subnav-buttons {
    display: flex;
    gap: 14px;
}

.subnav-toggle,
.subnav-close {
    display: none;
}

.subnav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    z-index: 10;
}

.subnav-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Filter Buttons */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.filter-btn,
.filter-btn-sbs,
.filter-btn-gallery {
    font: 700 14px/1.2 "Play", sans-serif;
    text-transform: uppercase;
    background: var(--medium-dark-gray);
    border-radius: 4px;
    color: white;
    border: solid 1px var(--medium-dark-gray);
    padding: 10px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.filter-active {
    background-color: var(--primary-red);
    border-color: var(--primary-red);
}

.filters button:hover {
    background-color: var(var(--dark-gray));
    border-color: var(--primary-white);
}

/* Compare Boats Button */
.compare-option {
    display: flex;
    align-items: center;
    text-transform: uppercase;
    color: var(--primary-white);
    transition: color 0.15s ease-in-out;
}

.compare-option:hover {
    color: var(--primary-red);
}

.compare-option a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
}

.compare-option a p {
    font: 700 14px "Play", sans-serif;
    margin: 0;
}

.compare-option svg {
    transition: fill 0.15s ease-in-out;
}

/* Single Model Box */
.single-model {
    padding: 6px 5px 30px;
    transition: background-color 0.2s ease-in-out;
    text-align: center;
    color: white;
    position: relative;
}

.single-model img {
    aspect-ratio: 5 / 3;
}

.single-model > a,
.all-models-boat > a {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.single-model:hover {
    background-color: var(--metal-gray);
}

.single-model .sinmod-options {
    opacity: 0;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.single-model:hover .sinmod-options {
    opacity: 1;
}

.sinmod-options {
    display: flex;
    gap: 16px;
    justify-content: center;
    font: 600 13px/1 "Inter", sans-serif;
    text-transform: uppercase;
    color: var(--primary-white);
    text-align: center;
}

.sinmod-options a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: var(--dark-gray);
    transition: text-decoration-color 0.15s ease-in-out;
    position: relative;
    z-index: 2;
}

.sinmod-options a:hover {
    text-decoration-color: var(--primary-red);
}

/* Text Links*/
.nav-footer-link a {
    display: block;
    font: 400 15px/1.6 "Inter", sans-serif;
    color: var(--primary-white);
    text-decoration: underline;
    text-decoration-color: var(--dark-gray);
    text-underline-offset: 6px;
    transition: text-decoration-color .15s ease-in-out;
    margin-bottom: 18px;
}

.nav-footer-link a:hover {
    text-decoration-color: var(--primary-red);
}

/*** NAVIGATION/HEADER ENDS ***/

/*** FOOTER STARTS ***/
footer {
    padding: var(--footer-padding);
    background-color: var(--primary-black)
}

.footer-container {
    max-width: 1600px;
}

footer ul {
    list-style: none;
}

.footer-logo {
    max-width: 240px;
}

footer .sidebar-bottom-nav a {
    display: flex;
    font: normal 600 15px/1.6 "Inter", sans-serif;
    color: var(--primary-white);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: underline;
    text-decoration-color: #4A4A4A;
    text-underline-offset: 6px;
    transition: text-decoration-color 0.15s ease-in-out;
    margin: 0 0 20px;
}

footer .sidebar-bottom-nav a:hover {
    text-decoration-color: var(--primary-red);
}

.footer-heading {
    font: 700 16px/1 "Play", sans-serif;
    color: var(--primary-white);
    text-transform: uppercase;
    margin-bottom: 18px;
}

.footer-links {
    margin-top: 40px;
}

.footer-links ul {
    padding-left: 0;
    margin-top: 0;
}

.footer-links li {
    list-style: none;
    display: block;
    font: 400 15px/1.6 "Inter", sans-serif;
    color: var(--primary-white);
    text-decoration: underline;
    text-decoration-color: var(--dark-gray);
    text-underline-offset: 6px;
    transition: text-decoration-color .15s ease-in-out;
    margin-bottom: 18px;
    padding-left: 0;
}

.footer-links a {
    display: block;
    font: 400 15px/1.6 "Inter", sans-serif;
    color: var(--primary-white);
    text-decoration: underline;
    text-decoration-color: var(--dark-gray);
    text-underline-offset: 6px;
    transition: text-decoration-color .15s ease-in-out;
}

.footer-links a:hover {
    text-decoration-color: var(--primary-red);
}

.legal-section {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
    font-size: 14px;
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1px solid var(--metal-gray);
}

.legal-section a {
    color: var(--primary-white);
    transition: text-decoration-color .15s ease-in-out;
}

.legal-section a:hover {
    text-decoration-color: var(--primary-red);
}

.copyright {
    font-size: 14px;
    color: var(--primary-white);
    margin-top: 20px;
}

/*** FOOTER ENDS ***/

/* Social Icons */
.social-icons {
    display: flex;
    gap: 34px;
    margin: 30px 24px;
}

.social-icons a {
    color: var(--cadet-gray);
    font-size: 26px;
    transition: 0.15s ease-in-out;
}

.social-icons a:hover {
    color: white;
}

.social-icons.red-social {
    display: flex;
    gap: 34px;
    margin: 0;
}

.social-icons.red-social a {
    color: var(--primary-red);
    font-size: 26px;
    transition: 0.15s ease-in-out;
}

.social-icons.red-social a:hover {
    color: var(--primary-black);
}

footer .social-icons {
    margin: 40px 0 30px;
}

/* HOMEPAGE - Image Sequence STARTS */

.video-sequence {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 5;
}

.video-sequence-content {
    position: absolute;
    width: 100%;
    top: 31%;
    left: 50%;
    text-align: center;
    color: var(--primary-white);
    padding: var(--section-padding);
    transform: translate(-50%, -50%) !important;
    transition: all 0.3s ease;
    z-index: 10;
}

.videoElement {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.hero-video-sequence {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    transition: opacity 0.3s ease;
}

.video-sequence {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease;
}

/* HOMEPAGE - Image Sequence ENDS */

/* MODEL - Image Sequence STARTS */

.model-image-sequence-section {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.model-image-sequence {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.feature-highlight-heading {
    position: absolute;
    transform: translate(-50%, -50%) scale(1);
    z-index: 10;
}

.secondary-btn.hotspot i {
    padding-left: 4px;
}

.hotspot {
    position: absolute;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: all 0.3s ease;
    z-index: 10;
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid var(--primary-white);
    cursor: pointer;
    letter-spacing: 1px;
    padding: var(--small-btn-padding);
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: pulse 3s infinite ease;
}

.hotspot:hover {
    background-color: var(--primary-red);
    border: 2px solid var(--primary-red);
}

/* Pulse animation */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(237, 28, 36, 0.5);
    }

    100% {
        box-shadow: 0 0 0 15px rgba(237, 28, 36, 0);
    }
}

/* MODEL - Image Sequence ENDS */

/**** Canvas Styles STARTS ****/
#responsive-canvas {
    width: 100%;
    height: 100%;
    display: block;
    min-height: 724px;
    object-position: center;
    object-fit: cover;
}

/**** Canvas Styles ENDS ****/

/**** Header & Video Sections ****/
/*** Wrapper for hero/header image sequence ***/
.hero-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 724px;
    overflow: hidden;
}

.hero.video-bottom-text {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    min-height: 724px;
    object-fit: cover;
    z-index: 1;
}

.overlay-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(11, 11, 11);
    background: linear-gradient(180deg, rgba(11, 11, 11, 1) 12%, rgba(11, 11, 11, 0) 50%, rgba(11, 11, 11, 0.4) 75%, rgba(11, 11, 11, 1) 100%);
    z-index: 2;
}

.hero-video-sequence.overlay-hero {
    background: linear-gradient(180deg, rgba(11, 11, 11, 0.5) 10%, rgba(11, 11, 11, 0.1) 40%, rgba(11, 11, 11, 0.1) 52%, rgba(11, 11, 11, 1) 100%);
}

.image-sequence.overlay-hero {
    background: linear-gradient(180deg, rgba(11, 11, 11, 0.4) 4%, rgba(11, 11, 11, 0) 40%, rgba(11, 11, 11, 0) 75%, rgba(11, 11, 11, 1) 100%);
}

.overlay-hero.overlay-top-image {
    background: linear-gradient(180deg, rgba(11, 11, 11, 1) 10%, rgba(11, 11, 11, 0.3) 27%, rgba(11, 11, 11, 0.4) 76%, rgba(11, 11, 11, 1) 100%);
    z-index: 2;
}

.overlay-hero.overlay-top-image-light {
    background: linear-gradient(180deg, rgba(11, 11, 11, 0) 10%, rgba(11, 11, 11, 0) 30%, rgba(11, 11, 11, 0.7) 70%, rgba(11, 11, 11, 1) 100%);
    z-index: 2;
}

.overlay-hero.overlay-no-top {
    background: linear-gradient(180deg, rgba(11, 11, 11, 0) 10%, rgba(11, 11, 11, 0) 50%, rgba(11, 11, 11, 0.4) 76%, rgba(11, 11, 11, 1) 100%);
    z-index: 2;
}

.hero-content {
    position: absolute;
    width: 100%;
    top: 31%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--primary-white);
    z-index: 11;
    padding: var(--section-padding);
    transition: opacity 0.3s ease;
}

.hero-content.difference-content-col {
    display: flex;
}

.scroll-fade-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease; 
    opacity: 0;
    z-index: -1;
}

.scroll-fade-video.video-a {
    z-index: 1;
    opacity: 1;
}

.scroll-fade-video.video-b {
    z-index: 2;
}

.video-a,
.hero-content {
    display: block;
}

/* Models Hero/Header */
.hero-content.models-hero {
    top: auto;
    bottom: 0;
    transform: translateX(-50%);
}

/* Difference pages include: Coastal, Engines, & JL Audio */
.hero-difference {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    color: var(--primary-white);
    padding-bottom: 50px;
    height: 100vh;
    min-height: 724px;
}

.hero-difference-content {
    position: relative;
    z-index: 3;
}

.hero-difference-content .scroll-icon {
    margin: 0;
}

.hero-difference-content a {
    text-decoration: none;
}

.scroll-icon a {
    text-decoration: none;
}

.scroll-callout {
    display: flex;
    justify-content: center;
    flex-direction: column;
    font: 400 18px/1.2 "Play", sans-serif;
    color: var(--button-white);
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 1px;
    margin-top: 40px;
    padding: 15px 20px;
    text-align: center;
}

.scroll-callout i {
    margin-top: 8px;
    animation: bounce 1.5s infinite ease-in-out;
}

/* Animation for scroll-callout on the hero */
@keyframes bounce {

    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(5px);
    }
}

/*** For Gallery header ***/
.gallery-hero {
    padding-top: 150px;
}

/*** Medium size header - Ex. Team Nautique ***/
.md-size-hero {
    position: relative;
    width: 100%;
    min-height: 374px;
    padding-top: 150px;
    padding-bottom: 0;
    overflow: hidden;
}

.no-hero {
    padding: 130px 24px 80px;
}

.section-background-video {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 724px;
    overflow: hidden;
}

.section-background-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    min-height: 724px;
    object-fit: cover;
    z-index: 1;
}

.overlay-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(11, 11, 11);
    background: linear-gradient(180deg, rgba(11, 11, 11, 1) 0%, rgba(11, 11, 11, 0.4) 33%, rgba(11, 11, 11, 0.1) 75%, rgba(11, 11, 11, 1) 100%);
    z-index: 2;
}

.dyn-overlay.overlay-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgb(11, 11, 11);
    background: linear-gradient(180deg, rgba(11, 11, 11, 1) 0%, rgba(11, 11, 11, 0.1) 33%, rgba(11, 11, 11, 0.1) 75%, rgba(11, 11, 11, 1) 100%);
    z-index: 2;
}

.content-background-video {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: var(--primary-white);
    padding: var(--section-padding);
    z-index: 3;
}

.clip-path-section-background-video {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 724px;
    overflow: hidden;
    clip-path: polygon(34% 30%, 66% 30%, 66% 70%, 34% 70%);
}

.clip-path-section-background-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    min-height: 724px;
    object-fit: cover;
    z-index: 1;
}

.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    /* Aspect ratio of 16:9 */
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 14px;
}

.video-container.nss {
    padding-top: 76%;
}

.video-container.coastal video {
    position: absolute;
    top: 0;
    left: 0;
    width: 84%;
    height: 84%;
    object-fit: cover;
    border-radius: 14px;
}

.video-container.coastal {
    padding-top: 76%;
}

.coastal .overlay-image {
    aspect-ratio: 0.91 / 1;
    position: absolute;
    bottom: 0px;
    right: 20px;
    max-width: 215px;
    z-index: 2;
    transition: transform 0.3s ease-in-out, max-width 0.2s ease-in-out;
}

.coastal .overlay-image:hover {
    transform: scale(1.2) rotate(7deg);
}

/* Background Image Section */
.full-image-section {
    position: relative;
    background: var(--bg-image);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 100vw;
    height: 100vh;
    min-height: 724px;
    background-attachment: unset;
}

.full-image-section-img {
    display: none;
}

.full-image-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(11, 11, 11, 1) 18%, rgba(11, 11, 11, 0) 31%, rgba(11, 11, 11, 0) 45%, rgba(11, 11, 11, 0.8) 62%, rgba(11, 11, 11, 1) 85%);
    z-index: 1;
    pointer-events: none;
}

.content-full-image-section {
    width: 100%;
    height: inherit;
    text-align: center;
    color: var(--primary-white);
}

/* Water background */
.water-bg-section {
    position: relative;
    background: var(--bg-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
}

.water-bg-section .container-xxl,
.water-bg-section .container-xl {
    position: relative;
    z-index: 3;
}

.water-bg-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(11, 11, 11, 1) 0%, rgba(11, 11, 11, 0.6) 17%, rgba(11, 11, 11, 0.6) 30%, rgba(11, 11, 11, 0.7) 100%);
    z-index: 1;
    pointer-events: none;
}

/**** Swiper JS ****/
.swiper {
    width: 100%;
    height: 100%;
}

.swiper-wrapper.features-wrapper {
    min-height: 574px;
}

.swiper-wrapper.difference-wrapper {
    min-height: auto;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
}

.swiper-slide:nth-child(1n) {
    width: auto;
}

.swiper-slide:nth-child(2n) {
    width: auto;
}

.swiper-slide:nth-child(3n) {
    width: auto;
}

.swiper-slide:nth-child(4n) {
    width: auto;
}

.swiper-slide:nth-child(5n) {
    width: auto;
}

.swiper-container-wrapper {
    position: relative;
}

.swiper-fade-left,
.swiper-fade-right {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    z-index: 10;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.swiper-fade-left {
    left: 0;
    background: linear-gradient(to right, rgba(34, 34, 34, 1), rgba(11, 11, 11, 0));
    opacity: 0;
    /* hidden by default */
}

.swiper-fade-right {
    right: 0;
    background: linear-gradient(to left, rgba(34, 34, 34, 1), rgba(11, 11, 11, 0));
    opacity: 1;
    /* visible by default */
}

.swiper-arrows {
    width: 100%;
    height: 100%;
    min-height: 44px;
    max-width: 116px;
}

.swiper-nav {
    .swiper-button-prev, .swiper-button-next

{
    background-repeat: no-repeat;
    &:after

{
    content: '';
}

}

.swiper-button-prev {
    background-image: url(/assets/img/swiper/arrow-left.svg);
    position: relative;
    width: 100%;
    max-width: 42px;
    margin: 0;
}

.swiper-button-next {
    background-image: url(/assets/img/swiper/arrow-right.svg);
    position: relative;
    width: 100%;
    max-width: 42px;
    margin: 0;
}

}

.h-md-500px {
    height: 500px;
}

.brochure-home {
    position: relative;
    width: 100%;
    max-width: 1124px;
    padding: var(--section-padding);
    border-radius: var(--primary-border-radius);
    overflow: visible;
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.brochure-home:hover {
    color: var(--primary-white);
    background-color: var(--primary-red);
}

.brochure-home.america-book:hover {
    color: var(--primary-white);
    background-color: var(--made-in-america-home-hover);
}

.brochure-home:hover h3,
.brochure-home:hover p,
.brochure-home:hover .tagline {
    color: var(--primary-white);
}

.brochure-home img {
    aspect-ratio: 1.28 / 1;
    position: absolute;
    top: 0px;
    right: 0px;
    max-width: 600px;
    transition: transform 0.3s ease-in-out;
}

.brochure-home.america-book img {
    aspect-ratio: 1.22 / 1;
    top: -40px;
    right: auto;
    left: 0;
    max-width: 560px;
}

.brochure-home:hover img {
    transform: scale(1.05);
}

/***** News / Blogs Section *****/
.blog {
    position: relative;
    margin-bottom: 68px;
}

.blog img {
    aspect-ratio: 9 / 6;
    object-position: center;
    object-fit: cover;
    width: 100%;
    height: auto;
    border-radius: 14px;
    transition: transform 0.3s ease-in-out;
}

.blog .news-img:hover img {
    transform: scale(1.01);
}

.blog .date {
    display: block;
    color: var(--cadet-gray);
}

.blog a:hover {
    color: var(--primary-red);
}

.blog i {
    margin-right: 7px;
}

/***** All Models STARTS *****/
.all-models-boat {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
}

.all-models-boat a {
    display: block;
    width: 100%;
    height: 100%;
}


.all-models-boat .content {
    position: absolute;
    width: 100%;
    bottom: 0%;
    padding: 20px;
    color: var(--primary-white);
    text-transform: uppercase;
    z-index: 2;
}

.all-models-boat img {
    aspect-ratio: 1 / 1;
    display: block;
    object-fit: cover;
}

.all-models-boat::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 11, 11, 0) 40%, rgba(11, 11, 11, 0.8) 100%);
    opacity: 1;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.all-models-boat:hover::before {
    opacity: 0.3;
}

/***** All Models ENDS *****/

/***** Models STARTS *****/
.lg-links {
    gap: 36px;
}

.lg-links a,
.lg-links span {
    position: relative;
    font: var(--btn-font);
    text-transform: uppercase;
    text-decoration: none;
    padding-bottom: 5px;
}

.lg-links .active::after {
    height: 2px;
    background-color: var(--primary-red);
    transform: scaleX(1);
}

.lg-links a::after,
.lg-links span::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-white);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.2s ease-in-out;
}

.lg-links a:hover::after,
.lg-links span:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Boat Models - Tech Specs Area */
.tech-specs-container {
    border-radius: 14px;
    padding: var(--specs-padding);
    background-color: var(--dark-gray);
}

.tech-specs-container .title {
    font: 700 1.25rem/1.2 "play", sans-serif;
    padding-bottom: 30px;
    text-decoration: underline;
    text-decoration-color: var(--primary-red);
    text-decoration-thickness: 2px;
    text-underline-offset: 10px;
}

.tech-specs-container .number {
    font: 500 2.813rem/1.1 "futura-pt-condensed", sans-serif;
    text-transform: uppercase;
}

.tech-specs img {
    width: 100%;
}

/*** Tech Specs Slider/Popup ***/
.specs-popup {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: none;
    height: 100vh;
    color: var(--primary-white);
    transition: right 0.7s ease-in-out;
    z-index: 1001;
    overflow-y: auto;
}

.specs-popup-content .row {
    margin-right: 0;
    margin-left: 0;
}

.specs-popup-content {
    height: 100vh;
}

.redbg {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background-color: var(--primary-red);
    transition: right 0.5s ease-in-out;
    z-index: 1000;
}

.specs-popup-content .tech-specs-container {
    border-radius: 0;
    padding: var(--specs-padding);
    background-color: var(--dark-gray);
}

.specs-popup-content .tech-specs-container .section-jet-gray {
    border-radius: 14px;
    padding: 20px;
}

.specs-popup-content .tech-specs-container .title {
    padding-bottom: 16px;
}

.specs-popup-content .tech-specs-container .section-jet-gray p {
    margin-bottom: 0;
}

.specs-popup-details {
    margin-top: 34px;
}

.specs-popup-details .border-bottom-white {
    margin-bottom: 30px;
}

.specs-popup-details p {
    margin-bottom: 0;
}

.specs-popup-details span {
    font: 500 1.5rem/1.1 "futura-pt-condensed", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.text-info-icon {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    cursor: pointer;
}

.text-info-noicon {
    margin-bottom: 6px;
}

.specs-hover {
    cursor: pointer;
}

.specs-hover p {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 0.2s ease-in-out;
}

.specs-hover svg {
    stroke: var(--primary-white);
    transition: stroke 0.2s ease-in-out;
}

.specs-hover:hover p {
    text-decoration-color: var(--primary-white);
}

.specs-hover:hover svg {
    stroke: var(--primary-red);
}

.specs-hover.active p {
    text-decoration-color: var(--primary-white);
}

.specs-hover.active svg {
    stroke: var(--primary-red);
}

.img-specs-data-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    overflow: hidden;
}

.img-specs-data-container img {
    aspect-ratio: 7 / 8;
    position: absolute;
    top: 50%;
    left: 50%;
    padding: var(--specs-padding);
    transform: translate(-50%, -50%);
    transition: opacity 0.4s ease;
    opacity: 0;
    z-index: 0;
}

.img-specs-data-container img.show {
    opacity: 1;
    position: relative;
}

.specs-close-btn {
    position: absolute;
    font-size: 30px;
    color: var(--primary-white);
    top: 10px;
    right: 20px;
    cursor: pointer;
    z-index: 1001;
    transition: color 0.2s ease-in-out;
}

.specs-close-btn:hover {
    color: var(--primary-red);
}

.border-bottom-white {
    border-bottom: solid 1px var(--primary-white);
}

.border-right-white {
    border-bottom: solid 1px var(--primary-white);
}

.border-left-white {
    border-bottom: solid 1px var(--primary-white);
}

.border-center-white {
    border-right: solid 1px var(--primary-white);
    border-left: solid 1px var(--primary-white);
}

/* Boat Models - 360 Image */
.cloudimage-360-icons-container {
    top: 16px !important;
    right: 14px !important;
}

.cloudimage-360-inner-box {
    background-color: var(--primary-black) !important;
}

.cloudimage-360-fullscreen-modal {
    z-index: 1001 !important;
}

.cloudimage-360-magnifier-icon {
    margin-top: 20px !important;
    width: 30px !important;
    height: 30px !important;
    background: url(../../../assets/img/interface/icon-zoom.png) 50% 50% / cover no-repeat !important;
}

.cloudimage-360-fullscreen-icon {
    margin-top: 12px !important;
    width: 30px !important;
    height: 30px !important;
    background: url(../../../assets/img/interface/icon-expand-white.png) 50% 50% / cover no-repeat !important;
}

.cloudimage-360-close-fullscreen-icon {
    background: url(../../../assets/img/interface/icon-close-white.png) 50% 50% / cover no-repeat !important;
}

.cloudimage-360 .cloudimage-360-left,
.cloudimage-360 .cloudimage-360-right {
    background-image: url('../../img/interface/icon-zoom.png');
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: none !important;
}

.cloudimage-360 .cloudimage-360-left:focus,
.cloudimage-360 .cloudimage-360-right:focus {
    outline: none;
}

.cloudimage-360 .cloudimage-360-left {
    display: none;
    position: absolute;
    z-index: 100 !important;
    top: calc(50% - 15px);
    left: 34px !important;
}

.cloudimage-360 .cloudimage-360-right {
    display: none;
    position: absolute;
    z-index: 100 !important;
    top: calc(50% - 15px);
    right: 34px !important;
}

.cloudimage-360 .cloudimage-360-left:before,
.cloudimage-360 .cloudimage-360-right:before {
    content: '';
    display: block;
    width: 44px !important;
    height: 44px !important;
    background: 50% 50% / cover no-repeat;
}

.cloudimage-360 .cloudimage-360-left:before {
    background-image: url(/assets/img/swiper/arrow-left.svg) !important;
}

.cloudimage-360 .cloudimage-360-right:before {
    background-image: url(/assets/img/swiper/arrow-right.svg) !important;
}

/* Boat Models - Gallery */
.gallery-section {
    min-height: 980px;
}

.nautique-boat-gallery img {
    aspect-ratio: 3 / 2;
}

.sticky-text {
    position: sticky;
    top: 100px;
}

.video-gallery-container {
    position: relative;
    display: block;
    width: 100%;
    cursor: pointer;
    overflow: hidden;
}

.video-gallery-container img {
    aspect-ratio: 7 / 4;
    display: block;
    transition: opacity 0.3s ease-in-out;
    position: relative;
    z-index: 2;
}

.video-gallery-container:hover img {
    opacity: 0;
}

.video-gallery-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    z-index: 1;
}

.video-gallery-container,
.video-gallery-container img,
.video-gallery-container video {
    border-radius: 14px;
}

.video-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-start;
    gap: 8px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 12px;
    z-index: 3;
    transition: opacity 0.3s ease-in-out;
}

.video-gallery-container span {
    font: 500 2.313rem/1.1 "futura-pt-condensed", sans-serif;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.video-gallery-overlay img {
    width: 40px;
}

.modal-video-gallery .modal-content {
    background-color: transparent !important;
}

.modal-video-gallery .modal-header {
    border-bottom: none;
}

.modal-video-gallery .btn-close {
    background-color: var(--primary-red);
    opacity: 0.8;
    transition: opacity 0.2s ease-in-out;
}

.modal-video-gallery .btn-close:hover {
    opacity: 1;
}

.modal-backdrop.show {
    opacity: 0.7;
}

iframe.no-border {
    border: none;
}

/* Feature Cards */
.feature-card.fc-header {
    padding: var(--feature-card-header-padding);
}

.feature-card.fc-body {
    padding: var(--feature-card-body-padding);
}

.fc-content-padding {
    padding: var(--feature-card-content-padding);
}

.fc-content-outside-padding {
    padding: 30px 0px;
}

.fc-content-outside-padding:last-child {
    padding: 30px 0px 0px;
}

.fc-pagination {
    padding: var(--feature-card-pagination-padding);
}

.fc-pagination .secondary-btn .fa-chevron-left {
    padding-right: 6px;
}

.fc-pagination .secondary-btn .fa-chevron-right {
    padding-left: 6px;
}

.feature-card.fc-header img,
.feature-card .fc-lg-image img {
    aspect-ratio: 12 / 5;
}

.feature-card .fc-md-image img {
    aspect-ratio: 12 / 7;
}

.feature-card.fc-header img,
.feature-card .fc-lg-image img,
.feature-card .fc-md-image img {
    border-radius: 14px;
}

.feature-popup {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    max-width: 1200px;
    height: 100vh;
    transition: right 0.5s ease-in-out;
    z-index: 1001;
    overflow-y: auto;
    border-radius: 16px 0 0 16px;
}

.feature-popup.active {
    right: 0;
    opacity: 1;
    pointer-events: auto;
    transition: right 0.5s ease, opacity 0.3s ease-in;
}

.fc-close-container {
    position: sticky;
    top: 0px;
    padding: 10px 20px 0 0;
    display: flex;
    justify-content: flex-end;
}

.fc-close-btn {
    font-size: 30px;
    color: var(--primary-white);
    border-radius: 6px;
    cursor: pointer;
    z-index: 1001;
    transition: color 0.2s ease-in-out;
}

.fc-close-btn:hover {
    color: var(--primary-red);
}

#featureOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: 1000;
}

#featureOverlay.active {
    opacity: 1;
    pointer-events: auto;
}

.model-features {
    position: relative;
    display: inline-block;
    text-align: center;
    margin: 12px 0 12px;
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
}

.model-features a {
    display: block;
    width: 100%;
    height: 100%;
}

.model-features::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(11, 11, 11, 0) 40%, rgba(11, 11, 11, 0.8) 100%);
    opacity: 1;
    transition: opacity 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.model-features:hover::before {
    opacity: 0.3;
}

.model-features div {
    position: absolute;
    width: 100%;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-white);
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
    transition: bottom 0.3s ease-in-out;
}

.model-features .content span {
    display: block;
    font: 500 2.813rem/1.1 "futura-pt-condensed", sans-serif;
}

.model-features img {
    aspect-ratio: 3.5 / 5.2;
    max-width: 364px;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.model-features:hover .content {
    bottom: -2%;
}

.model-features:hover img {
    transform: scale(1.050);
}

/* Owner Reviews */
.arw-disclaimer {
    display: none;
}

.arw-item.featured {
    padding-bottom: 2rem !important;
}

.arw-item.featured .arw-message {
    background-color: rgba(0, 0, 0, 0.0) !important;
    margin-top: 1rem;
    margin-right: 1.5rem;
}

.arw-item {
    width: calc(50% - 10px) !important;
    color: var(--primary-white);
    padding: 1.5rem 1.5rem !important;
    margin: 0px !important;
    left: 0 !important;
    border-radius: 14px;
    border: solid 1px var(--border-primary) !important;
    background-color: var(--dark-gray);
}

.arw-header.left {
    width: 60%;
}

.arw-header.right {
    width: 40%;
}

.arw-title h4:first-child {
    font: var(--h5-font);
}

.arw-author {
    padding-top: 10px;
}

.arw-message p {
    font: var(--paragraph-font);
}

.arw-create-date {
    margin-bottom: 10px;
}

.arw-page {
    margin: 0 4px;
}

.arw-page.arw-current-page,
.arw-page:hover,
.arw-page:focus {
    border-radius: 14px;
    background-color: var(--primary-red) !important;
}

#pagingContainerFooter {
    text-align: center !important;
}

#listItemContainer {
    gap: 20px;
    justify-content: center;
    overflow: visible !important;
}


/* Form Classes */
label {
    color: var(--form-text);
}

.form-check-input:checked {
    background-color: var(--primary-red);
    border-color: var(--border-primary);
}

.form-control:focus,
.form-control:hover {
    background-color: var(--medium-dark-gray);
    box-shadow: none;
}

/* Targeting autofilled input fields */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus,
select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--medium-dark-gray) inset !important;
    -webkit-text-fill-color: var(--primary-white) !important;
}

/***** Models ENDS *****/

/***** Team Nautique STARTS *****/
.team-all-item img {
    aspect-ratio: 1 / 1;
    transition: transform 0.3s ease-in-out;
    z-index: 1;
}

.team-content {
    position: relative;
    background-color: var(--night);
    transition: background-color 0.3s ease-in-out;
    z-index: 2;
}

.athlete-headshot {
    overflow: hidden;
}

.athlete-name {
    display: block;
    font: 500 1.5rem/1.1 "futura-pt-condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.team-all-item:hover .team-content {
    background-color: var(--jet-gray);
}

.team-all-item:hover img {
    transform: scale(1.1);
}

/* Athlete Hero/Header */
.hero-athlete {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    color: var(--primary-white);
    padding-bottom: 50px;
    height: 82vh;
    min-height: 724px;
}

.hero-athlete-content .social-icons {
    margin: 0;
}

.hero-athlete-content .social-icons a {
    color: var(--primary-white);
}

.athlete-top-fold {
    border-top: solid 1px var(--primary-white);
    border-bottom: solid 1px var(--primary-white);
}

.athlete-top-fold-border {
    padding: 42px 40px 38px 40px;
    border-right: solid 1px var(--primary-white);
    border-left: solid 1px var(--primary-white);
}

.athlete-top-fold-border:first-child,
.athlete-top-fold-border:last-child {
    border-right: none;
    border-left: none;
}

.athlete-top-fold-border:first-child {
    padding-left: 12px;
}

.athlete-top-fold-border:last-child {
    padding: 0 calc(var(--bs-gutter-x)* .5) 0 40px;
}

.athlete-top-fold-border img {
    aspect-ratio: 5 / 3;
    transition: transform 0.25s ease-in-out;
}

.athlete-top-fold-border img:hover {
    transform: scale(1.1);
}

.athlete-highlights-wrapper img {
    position: sticky;
    top: 60px;
    aspect-ratio: 1 / 1;
}

.athlete-highlights-content div:last-child {
    margin-bottom: 0;
}

.athlete-faq-img img {
    height: 300px;
    object-fit: cover;
}

.athlete-faq-content span {
    font: var(--btn-font);
    text-transform: uppercase;
    border-bottom: solid 1px #4a4a4a;
}

.athlete-faq-content a img {
    aspect-ratio: 500 / 219;
}

.meet-team-all img {
    aspect-ratio: 11 / 8;
}

.soundwave-boat img {
    transition: transform 0.25s ease-in-out;
}

.soundwave-boat img:hover {
    transform: scale(1.1);
}

/* Athelete Hero/Headers background */
.athlete-header-bg {
    position: relative;
    background: var(--bg-image);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
}

/***** Team Nautique ENDS *****/
/***** Nautique Difference STARTS *****/
.difference-highlights .row {
    margin-bottom: 7.5rem;
}

.difference-highlights .row img {
    object-fit: cover;
}

.difference-highlights .row:last-child {
    margin-bottom: 1.5rem;
}

.img-height-550px {
    height: 550px;
}

.img-height-600px {
    height: 600px;
}

/***** Nautique Difference ENDS *****/

/***** Events STARTS *****/
.event-img {
    height: 400px;
    object-fit: contain;
}

.events-all-item img {
    aspect-ratio: 1 / 1;
    transition: transform 0.3s ease-in-out;
    z-index: 1;
}

.event-content {
    position: relative;
    background-color: var(--night);
    transition: background-color 0.3s ease-in-out;
    z-index: 2;
}

.event-hero {
    padding: 80px 0 0;
}

.event-logo {
    overflow: hidden;
    background-color: var(--primary-white);
}

.event-name {
    display: block;
    font: 500 1.5rem/1.1 "futura-pt-condensed", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.events-all-item:hover .event-content {
    background-color: var(--jet-gray);
}

.events-all-item:hover img {
    transform: scale(1.1);
}

.event-list {
    max-width: 960px;
}

.event-list a {
    color: var(--primary-black) !important;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.event-list .row {
    transition: background-color 0.2s ease-in-out;
}

.event-list .row:hover {
    background-color: var(--button-white);
}

.event-standings a {
    text-decoration: none;
}

.event-standings .border-primary {
    transition: border-color 0.2s ease-in-out;
}

.event-standings a:hover .border-primary {
    border-color: var(--primary-red) !important;
}
/***** Events ENDS *****/

/* For Firefox */
input:-moz-autofill {
    background-color: var(--medium-dark-gray) !important;
    color: var(--primary-white) !important;
}

/* Link Classes */
.link-red {
    color: var(--primary-red);
}

/* Border Classes */
.border-primary {
    border-color: var(--border-primary) !important;
}

.rounded-12px {
    border-radius: 12px;
}

.rounded-14px {
    border-radius: var(--primary-border-radius);
}

/* Max-Width Classes */
.mw-md-395px {
    max-width: 395px;
}

.mw-md-440px {
    max-width: 440px;
}

.mw-md-475px {
    max-width: 475px;
}

.mw-md-500px {
    max-width: 500px;
}

.mw-md-525px {
    max-width: 525px;
}

.mw-md-550px {
    max-width: 550px;
}

.mw-md-575px {
    max-width: 575px;
}

.mw-md-600px {
    max-width: 600px;
}

.mw-md-710px {
    max-width: 710px;
}

.mw-md-760px {
    max-width: 760px;
}

.mw-md-800px {
    max-width: 800px;
}

.mw-md-850px {
    max-width: 850px;
}

.mw-md-950px {
    max-width: 950px;
}

.mw-md-1000px {
    max-width: 1000px;
}

.mw-md-1150px {
    max-width: 1150px;
}

/**** XXL - 1400px ****/
@media only screen and (max-width: 1399px) {
    .athlete-top-fold-border:first-child {
        padding-left: 36px;
    }
}

/**** XL - 1200px ****/
@media only screen and (max-width: 1199px) {

    .models .row {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .subnav-container {
        grid-template-columns: auto auto;
    }

    .subnav-links-container {
        display: flex;
        justify-content: space-evenly;
        padding: var(--nav-padding);
        position: fixed;
        top: -824%;
        left: 0;
        gap: 14px;
        width: 100%;
        max-width: none;
        min-width: auto;
        height: auto;
        background-color: var(--primary-black);
        transition: top 0.4s ease-in-out;
    }

    .subnav-links-container.open {
        top: 0;
    }

    .subnav-links-container span {
        display: block;
        font: 500 1.4rem/1.1 "futura-pt-condensed", sans-serif;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .subnav-links {
        flex-direction: column;
        margin: 32px 0 48px;
    }

    .subnav-overlay {
        display: block;
    }

    .subnav-buttons {
        display: flex;
        gap: 24px;
        flex-direction: column;
        margin: 32px 0 48px;
    }

    .subnav-toggle {
        display: flex;
        align-items: center;
        justify-self: end;
        font-size: 22px;
        gap: 8px;
        color: var(--primary-white);
        cursor: pointer;
        transition: color 0.15s ease-in-out;
    }

    .subnav-toggle span {
        font: 500 10px/1 "Play", sans-serif;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .subnav-toggle:hover,
    .subnav-close:hover {
        color: var(--primary-red);
    }

    .subnav-close {
        display: block;
        position: absolute;
        top: 16px;
        right: 28px;
        font-size: 26px;
        cursor: pointer;
        transition: color 0.15s ease-in-out;
    }

    .parallax-section {
        background-size: auto;
    }

    .brochure-home img {
        top: 0;
        width: 100%;
        max-width: 480px;
    }

    .brochure-home.america-book img {
        top: 0;
        width: 100%;
        max-width: 440px;
    }

    .coastal .overlay-image {
        max-width: 165px;
    }

    /* Team Nautique XL */
    .john-akerman-bg,
    .ryan-dodd-bg,
    .regina-jaquess-bg,
    .jeff-mckee-bg {
        background-position: right;
    }
    .noah-flegel-bg,
    .joey-harris-bg,
    .tony-iacconi-bg,
    .erika-lang-bg,
    .rusty-malinoski-bg,
    .cory-teunissen-bg,
    .neilly-ross-bg,
    .charlie-ross-bg {
        background-position: left;
    }
    .thomas-degasperi-bg,
    .danny-harf-bg {
        background-position: 36%;
    }
    .drew-drennan-bg {
        background-position: 60%;
    }
    .bailey-dunn-bg,
    .jodi-grassman-bg {
        background-position: 12%;
    }

    /* Height Classes */
    .h-500px {
        height: auto;
    }
}

/**** LG - 992px ****/
@media only screen and (max-width: 992px) {

    .navbar {
        font-size: 10px;
    }

    .nav-links {
        gap: 10px;
    }

    .sidebar-nav {
        width: 100%;
    }

    .models .row {
        grid-template-columns: repeat(1, minmax(150px, 1fr));
    }

    .brochure-home img {
        position: relative;
        max-width: 400px;
    }

    /* Single Model Box - LG */
    .single-model {
        background-color: var(--metal-gray);
    }

    .single-model .sinmod-options {
        opacity: 1;
    }

    /* Video Sections - LG */
    .video-gallery-container span {
        font-size: 3vw;
    }

    /* Background Image Section */
    .full-image-section {
        position: relative;
        background: none;
        background-color: var(--dark-gray);
        width: 100vw;
        height: auto;
        min-height: 724px;
        background-attachment: unset;
    }

    .full-image-section-img {
        display: block;
    }

    .full-image-section::before {
        background: none;
    }

    .content-full-image-section {
        text-align: left;
    }

    /* Brochure & Book */
    .brochure-home,
    .brochure-home:hover {
        background-color: var(--dark-gray);
    }

    .brochure-home.america-book {
        background-color: var(--made-in-america-home-hover);
    }

    .brochure-home h3,
    .brochure-home p,
    .brochure-home .tagline {
        color: var(--primary-white);
    }

    .brochure-home img,
    .brochure-home.america-book img {
        position: relative;
        max-width: none;
    }

    /* Model Image Sequence - LG */
    .model-wrapper {
        display: none;
    }

    .gallery-section {
        min-height: auto;
    }

    /* Team Nautique - LG */
    .athlete-top-fold-border {
        padding: 32px 40px 28px 40px;
        border: none;
        border-bottom: solid 1px var(--primary-white);
        border-left: solid 1px var(--primary-white);
    }

    .athlete-top-fold-border:first-child {
        border: none;
        border-bottom: solid 1px var(--primary-white);
    }

    .athlete-top-fold-border:last-child {
        border: none;
        padding: 32px 40px 28px 40px;
    }

    /* All Models - LG */
    .all-models-boat .content {
        position: relative;
        width: 100%;
        bottom: 0%;
        padding: 20px;
        color: var(--primary-white);
        background-color: var(--dark-gray);
    }

    .all-models-boat img {
        aspect-ratio: 1 / 1;
        display: block;
        object-fit: cover;
    }

    /* Max-Width Classes */
    .mw-lg-475px {
        max-width: none;
    }
}

/**** Bootstrap.min.css Overrides ****/
@media only screen and (min-width: 768px) {
    .gx-md-7 {
        --bs-gutter-x: 5rem;
    }
}

/**** TABLET - LG max-width: 767px ****/
@media only screen and (max-width: 767px) {

    :root {
        --section-padding: clamp(60px, 4vw, 80px) 24px;
        --feature-card-header-padding: clamp(24px, 4vw, 20px) 24px clamp(60px, 4vw, 40px);
        --feature-card-body-padding: clamp(62px, 4vw, 60px) 24px clamp(100px, 4vw, 60px);
        --feature-card-pagination-padding: 24px clamp(72px, 4vw, 24px) 90px;
    }

    h1,
    h2 {
        font-size: 8.854166666666668vw;
    }

    h3 {
        font-size: 5.867014341590613vw;
    }

    h4 {
        font-size: 4.823989569752282vw;
    }

    .tagline {
        font-size: 2.604166666666667vw;
    }

    .navbar {
        padding: 20px 24px;
    }

    .nav-container {
        grid-template-columns: 1.2fr 0.8fr;
    }

    .logo {
        justify-self: start;
        padding: 0;
    }

    .menu-btn {
        justify-self: end;
    }

    .nav-links {
        display: none;
    }

    .sidebar-nav {
        min-width: auto;
    }

    .sidebar {
        position: relative;
        width: 100%;
        padding: 16px 20px 0;
        max-width: none;
    }

    .sidebar-bottom-nav {
        display: flex;
        flex-direction: column;
    }

    .sidebar-logo {
        margin: 0 4px;
    }

    .sidebar-content {
        position: absolute;
        top: 0;
        left: 100%;
        /* Start off-screen */
        height: 100%;
        margin-top: 72px;
        padding: 20px 40px 180px;
        border-top: 1px solid var(--medium-dark-gray);
        transition: left 0.3s ease-in-out, opacity 0.3s ease-in-out, width 0.3s ease-in-out;
        opacity: 0;
        visibility: hidden;
    }

    .sidebar-content.show {
        display: block;
    }

    .sidebar-content.active {
        left: 0;
        opacity: 1;
        visibility: visible;
    }

    /* Desktop Auto-Adjust Width */
    .sidebar-nav.auto-width .sidebar-content {
        width: auto;
        min-width: 250px;
        max-width: 500px;
    }

    /* Mobile Overlay Effect */
    .sidebar-content.overlay-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        background-color: var(--primary-black);
        opacity: 1;
        visibility: visible;
        z-index: 1200;
    }

    .nav-back-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        font: 700 14px "Play", sans-serif;
        padding: 10px 0 30px;
        text-transform: uppercase;
        cursor: pointer;
    }

    #models,
    #whynautique,
    #company {
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
    }

    .nav-cta img {
        max-width: none;
    }

    .sinmod-options a {
        text-decoration-color: var(--primary-red);
    }

    /**** Video Sections ****/
    .video-container.coastal video {
        width: 90%;
        height: 90%;
    }

    .coastal .overlay-image {
        right: 0;
        max-width: 165px;
    }

    .video-gallery-container span {
        font-size: 4.823989569752282vw;
    }

    /* Legal */
    .legal-section {
        gap: 14px;
    }

    /* Models - Specs */
    .specs-popup-details:nth-child(2) {
        margin-top: 0px;
    }

    .img-specs-data-container {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 784px;
        overflow: hidden;
    }

    .img-specs-data-container img {
        max-width: 460px;
        max-height: 100%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: opacity 0.4s ease;
        opacity: 0;
        z-index: 0;
    }

    /* Owner Reviews */
    .arw-header.left,
    .arw-header.right {
        width: 100%;
    }

    /* Team Nautique - LG */
    .hero-athlete {
        height: auto;
        min-height: 564px;
    }

    .athlete-top-fold-border {
        padding: 32px 40px 28px 40px;
        border: none;
        border-top: solid 1px var(--primary-white);
        border-bottom: solid 1px var(--primary-white);
    }

    .athlete-top-fold-border:first-child {
        border: none;
    }

    .hero-difference {
        padding-bottom: 50px;
        height: 100%;
        min-height: 724px;
    }

    /* Max-Width Classes */
    .mw-395px,
    .mw-440px,
    .mw-475px,
    .mw-525px,
    .mw-550px,
    .mw-600px,
    .mw-710px {
        max-width: none;
    }

    /** Swiper **/
    .swiper-wrapper.shop-by-sport-wrapper {
        min-height: 265px;
    }
}

/**** TABLET - MD ****/
@media only screen and (max-width: 575px) {
    :root {
        --feature-card-content-padding: 12px;
    }

    /***** Buttons - MD *****/
    .explore-btn {
        display: block;
    }

    .explore-hidden {
        display: none;
    }

    .hero-content .scroll-callout {
        display:none;
    }

    .video-sequence {
        display: none;
    }

    /***** Header/Hero - MD *****/
    .md-size-hero {
        padding-top: 120px;
    }

    .no-hero {
        padding: 120px 24px 60px;
    }

    .gallery-hero {
        padding-top: 120px;
    }

    /***** Models - MD *****/
    .tech-specs-container .border-center-white {
        border-top: solid 1px var(--primary-white);
        border-bottom: solid 1px var(--primary-white);
        border-right: 0;
        border-left: 0;
        margin: 12px 0;
        padding: 12px 0;
    }

    .fc-content-outside-padding {
        padding: 16px 0;
    }

    /***** Nautique Difference - MD *****/
    .difference-highlights .row {
        margin-bottom: 3.2rem;
    }

    .img-height-550px {
        height: auto;
    }

    .img-height-600px {
        height: auto;
    }

    /* Superscript - Rights & Trademark */
    h1 sup,
    h2 sup,
    h3 sup,
    h4 sup,
    p sup,
    span sup {
        font-size: 42%;
        vertical-align: top;
        position: relative;
        top: 14px;
    }

    h2 sup,
    h3 sup {
        font-size: 36%;
        top: 19px;
    }

    h3 sup {
        top: 15px;
    }

    h4 sup {
        top: 12px;
    }

    p sup {
        font-size: 70%;
        top: 11px;
    }

    span sup {
        font-size: 46%;
        top: 9px;
    }

    h3 .trademark,
    h4 .trademark,
    p .trademark {
        font-size: 41%;
        vertical-align: top;
        position: relative;
        top: 4px;
    }

    h3 .trademark {
        font-size: 62%;
        left: 2px;
    }

    p .trademark {
        font-size: 72%;
        top: 3px;
    }
}

/**** Mobile - LG ****/
@media only screen and (max-width: 480px) {

    .subnav-links-container {
        flex-direction: column;
        gap: 40px;
        padding: 54px 40px 60px;
        overflow-y: auto;
    }

    .subnav-links-container p {
        margin-bottom: 8px;
    }

    .subnav-links,
    .subnav-buttons {
        margin: 0;
    }

    h1,
    h2 {
        font-size: 9.88235294117647vw;
    }

    h3 {
        font-size: 9.375vw;
    }

    h4 {
        font-size: 7.708333333333334vw;
    }

    p {
        font-size: 3.4vw;
    }

    .tagline {
        font-size: 3.7647058823529407vw;
    }

    .hero-content {
        top: 29%;
    }

    .scroll-callout {
        font-size: 14px;
    }

    .coastal .overlay-image {
        max-width: 115px;
    }

    .video-gallery-container span {
        font-size: 5.2vw;
    }

    .blog {
        position: relative;
        margin-bottom: 38px;
    }

    /* Team Nautique */
    .hero-athlete {
        min-height: 512px;
    }

    /** Swiper **/
    .swiper-wrapper {
        min-height: 295px !important;
    }

    .swiper-fade-left,
    .swiper-fade-right {
        display: none;
    }

}

/**** Mobile - MD ****/
@media only screen and (max-width: 375px) {

    .scroll-callout {
        font-size: 4vw;
    }

    .coastal .overlay-image {
        max-width: 75px;
    }

    /** Swiper **/
    .swiper-wrapper {
        min-height: 255px !important;
    }
}