@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Manrope:wght@200..800&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --charcoal-bg: #262626;
}

body {
    background-color: #fff;
}

/* common css starts here */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
ol,
ul,
dl,
fieldset,
pre {
    margin: 0;
}

a:hover {
    text-decoration: none;
}


@font-face {
    font-family: "helvetica";
    src: url("../fonts/helvetica-pro/HelveticaNeueLTProLt.otf") format("opentype");
}

@font-face {
    font-family: "helvetica-light";
    src: url("../fonts/helvatica-pro/HelveticaNeueLTProLt.otf") format("opentype");
}

@font-face {
    font-family: "helvetica-bold";
    src: url("../fonts/helvatica-pro/HelveticaNeueLTProBd.otf") format("opentype");
}

@font-face {
    font-family: "acumin-pro";
    src: url("../fonts/acumin-pro/Acumin-RPro.otf") format("opentype");
}

.custom-iti-style {
    width: 100% !important;
    max-width: 100% !important;
}

.iti {
    width: 100% !important;
    max-width: 100% !important;
}

.paraWrapper {
    margin: 40px 0;
}

.largeBlackPara {
    color: #000;
    font-family: Manrope;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.largeWhitePara {
    color: #fff;
    font-family: Manrope;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.regularBlackPara {
    color: #000;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.regularWhitePara {
    color: #fff;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.regularPara {
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.regularPara strong {
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 700 !important;
    line-height: 24px;
}

.light-grey-sec {
    padding: 88px 0;
    background: #F7F7F7;
}

/* mobile nav css starts here */
.mobileHeader {
    display: none;
    border-bottom: 1px solid rgba(125, 154, 175, 0.20);
    background: #fff;
    backdrop-filter: blur(10px);
    padding: 8px 24px;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 101;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.mobileNavBar {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.mobileHamburger {
    width: 40px;
    cursor: pointer;
    position: relative;
    z-index: 10;
}

.mobileHamburger:hover .top,
.mobileHamburger:hover .bottom {
    width: 60%;
}

.mobileHamburger:hover .middle {
    width: 100%;
}

.sideMobileLogoWrap {
    max-width: 166px;
}

.sideMobileLogoWrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobileFavAndPhoneIcon {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* mobile nav css ends here */

.hamburger {
    width: 40px;
    cursor: pointer;
    position: relative;
    z-index: 10;
    padding: 10px 0;
}

.line {
    display: block;
    height: 2px;
    background: #000;
    margin: 10px 0;
    transition: all 0.35s ease;
}

.top,
.bottom {
    width: 100%;
}

.middle {
    width: 60%;
}

/* Hover animation */
.hamburger:hover .top,
.hamburger:hover .bottom {
    width: 60%;
}

.hamburger:hover .middle {
    width: 100%;
}

.desktopHeader {
    height: 72px;
    padding: 7px 0;
    background-color: #fff;
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 20;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.menuIcon {
    width: 30.222px;
    height: 16px;
    aspect-ratio: 17/9;
}

.headerLogo {
    width: 216.724px;
    height: 56px;
    aspect-ratio: 216.72/56.00;
}

.footerLogo {
    max-width: 290.724px;
    height: 75px;
}

.footerLogo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.menuLogo {
    display: flex;
    gap: 130px;
    align-items: center;
}

.menuItemList {
    display: flex;
    list-style: none;
    gap: 50px;
}

.menuItem {
    color: #000;
    font-family: "Manrope";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
}

.menuItem:hover {
    color: #000;
    text-decoration: none;
}

.footerMenuItem {
    color: #000;
    font-family: "Manrope";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.menuItemWrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

/* Mega Menu */
.gotopIconWrap {
    max-width: 64px;
    cursor: pointer;
    position: fixed;
    right: 3%;
    bottom: 10%;
    z-index: 25;
    display: none;
}

.gotopIconWrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.megaMenuParent {
    position: relative;
}

.megaMenu {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100vw;
    background: #FFF;
    z-index: 1000;
    display: none;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    overflow-x: hidden;
}

.megaMenuParent .megaMenu {
    display: none;
}

.megaMenu.megaMenuActive {
    display: block;
}

.megaMenuInner {
    max-width: 1520px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 40px 40px;
    gap: 20px;
}

.megaMenuLeft {
    width: 200px;
    flex-shrink: 0;
}

.megaMenuRight {
    width: 220px;
    flex-shrink: 0;
}

.megaMenuLink {
    display: block;
    color: #000;
    font-family: "Manrope", sans-serif;
    text-decoration: none;
}

.megaMenuLink:hover {
    color: #000;
    text-decoration: none;
}

.megaMenuLinkLg {
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 16px;
}

.megaMenuLinkSm {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 16px;
}

.megaMenuDivider {
    height: 64px;
}

.megaMenuCenter {
    display: flex;
    gap: 20px;
    flex: 1;
    justify-content: center;
}

.megaMenuBoatCard {
    width: 100%;
    max-width: 320px;
    height: 420px;
    position: relative;
    overflow: hidden;
    flex: 1;
}

.megaMenuBoatImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.megaMenuBoatGradient {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160px;
    background: linear-gradient(180deg, rgba(38, 38, 38, 0) 0%, rgba(38, 38, 38, 0.9) 100%);
}

.megaMenuBrandLogo {
    position: absolute;
    bottom: 48px;
    left: 50%;
    transform: translateX(-50%);
    width: 160px;
    height: auto;
    z-index: 2;
}

.megaMenuQuizBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 48px;
    border: 1px solid #000;
    color: #000;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
}

.megaMenuQuizBtn:hover {
    color: #000;
    text-decoration: none;
}

.megaMenuShadow {
    display: none;
}

/* Side Menu */
.sideMenuOverlay {
    display: none;
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    height: calc(100% - 72px);
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
}

.sideMenuOverlay.active {
    display: block;
}

.sideMenu {
    position: fixed;
    top: 72px !important;
    left: 0 !important;
    width: 400px !important;
    height: calc(100vh - 72px) !important;
    height: calc(100dvh - 72px) !important;
    background: #FFFFFF !important;
    z-index: 10000 !important;
    overflow-y: auto;
    transition: transform 0.3s ease;
    transform: translateX(-100%);
    padding: 0 !important;
    box-shadow: none !important;
}

.sideMenu.active {
    transform: translateX(0) !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.2);
}

.sideMenuClose {
    position: absolute;
    top: 20px;
    right: 40px;
    cursor: pointer;
}

.sideMenuArrowImg {
    width: 40px;
    height: auto;
    display: block;
}

.sideMenuArrow {
    display: none;
}

.sideMenuNav {
    padding: 80px 40px 40px;
}

.sideMenuGroup {
    display: flex;
    flex-direction: column;
}

.sideMenuLinkLg {
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    color: #000;
    text-decoration: none;
    margin-bottom: 16px;
}

.sideMenuLinkLg:hover {
    color: #000;
    text-decoration: none;
}

.sideMenuLinkSm {
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    text-decoration: none;
    margin-bottom: 16px;
}

.sideMenuLinkSm:hover {
    color: #000;
    text-decoration: none;
}

.sideMenuDivider {
    width: 280px;
    height: 1px;
    background: #D9D9D9;
    margin: 24px 0;
}

.sideMenuSocial {
    display: flex;
    gap: 16px;
    margin-top: 40px;
}

.sideMenuSocialIcon {
    color: #000;
    text-decoration: none;
    display: inline-block;
}

.sideMenuSocialIcon img {
    width: 16px;
    height: 16px;
}

.sideMenuSocialIcon:hover {
    color: #000;
    opacity: 0.7;
}

/* Side Menu Accordion */
.sideMenuAccordion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.sideMenuChevron {
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.sideMenuAccordion.active .sideMenuChevron {
    transform: rotate(180deg);
}

.sideMenuSubLinks {
    display: none;
    flex-direction: column;
    padding: 12px 0 8px 0;
    margin-bottom: 8px;
    /* border-left: 2px solid #e0e0e0; */
    margin-left: 4px;
    padding-left: 16px;
}

.sideMenuSubSection {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}

.sideMenuSubSection:last-of-type {
    margin-bottom: 20px;
}

.sideMenuSubHeading {
    font-family: "Manrope", sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #999;
    margin-bottom: 2px;
}

.sideMenuSubLink {
    font-family: "Manrope", sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #333;
    text-decoration: none;
    line-height: 1.4;
    padding: 2px 0;
    transition: color 0.2s ease;
}

.sideMenuSubLink:hover {
    color: #000;
    text-decoration: none;
}

.sideMenuQuizBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #000;
    color: #fff;
    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 50px;
    text-decoration: none;
    transition: background 0.2s ease;
    width: fit-content;
}

.sideMenuQuizBtn:hover {
    background: #333;
    color: #fff;
    text-decoration: none;
}

/* Desktop: hide accordion features, show as plain link */
.sideMenuChevron {
    display: none;
}

.sideMenuAccordion {
    pointer-events: auto;
}

.sideMenuSubLinks {
    display: none !important;
}


@media (max-width: 576px) {
    .sideMenu {
        width: 300px;
    }
}

/* Boat Finder Quiz Modal */
.quizModalOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.quizModalOverlay.active {
    display: flex;
}

.quizModal {
    width: 960px;
    max-width: 95vw;
    height: 800px;
    max-height: 90vh;
    background: #FFF;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.quizStep {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 100px;
}

.quizCloseWrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 32px;
    border-left: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quizCloseBtn {
    background: none;
    border: none;
    font-family: "Helvetica LT Pro", "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 24px;
    color: #000;
    opacity: 0.6;
    cursor: pointer;
}

.quizTitle {
    text-align: center;
    font-family: "Manrope", sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #000;
    opacity: 0.6;
    margin-top: 40px;
}

.quizLine {
    width: 80px;
    height: 1px;
    background: #009EDD;
    margin: 24px auto;
}

.quizCounter {
    text-align: center;
    font-family: "Helvetica LT Pro", "Helvetica Neue", sans-serif;
    font-size: 32px;
    font-weight: 300;
    line-height: 36px;
    color: #000;
    margin-bottom: 16px;
}

.quizQuestion {
    text-align: center;
    font-family: "Helvetica LT Pro", "Helvetica Neue", sans-serif;
    font-size: 32px;
    font-weight: 300;
    line-height: 36px;
    color: #000;
    max-width: 657px;
    margin: 0 auto 40px;
}

.quizOptionsGrid {
    display: grid;
    grid-template-columns: repeat(3, 240px);
    gap: 40px;
    justify-content: center;
    padding: 0 80px;
}

.quizOption {
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quizOptionImg {
    width: 240px;
    height: 140px;
    object-fit: cover;
    display: block;
    margin-bottom: 8px;
}

.quizOptionLabel {
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    text-align: center;
    margin-bottom: 8px;
}

.quizRadioInput {
    display: none;
}

.quizRadio {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #000;
    display: inline-block;
    position: relative;
}

.quizRadioInput:checked+.quizRadio {
    border-color: #009EDD;
}

.quizRadioInput:checked+.quizRadio::after {
    content: '';
    width: 16px;
    height: 16px;
    background: #009EDD;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.quizNextBtn {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #009EDD;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.quizNextBtn:hover {
    opacity: 0.9;
}

.quizPrevBtn {
    position: absolute;
    bottom: 40px;
    left: 40px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid #D9D9D9;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quizPrevBtn:hover {
    border-color: #999;
}

.quizCheckInput {
    display: none;
}

.quizCheckbox {
    width: 24px;
    height: 24px;
    border: 1px solid #000;
    display: inline-block;
    position: relative;
}

.quizCheckInput:checked+.quizCheckbox {
    border-color: #009EDD;
    background: #009EDD;
}

.quizCheckInput:checked+.quizCheckbox::after {
    content: '✓';
    color: #FFF;
    font-size: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.quizFindBtn {
    position: absolute;
    bottom: 40px;
    right: 40px;
    width: 184px;
    height: 48px;
    background: #009EDD;
    border-radius: 40px;
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 48px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    display: none;
}

.quizFindBtn:hover {
    color: #FFF;
    opacity: 0.9;
}

.phoneNumberWrapper {
    color: #000;
    text-align: center;
    font-family: "helvetica";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
}

.phoneNumberWrapper:hover {
    color: #000;
    text-decoration: none;
}

.joinConversation {
    color: #000;
    font-family: "Manrope";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.64px;
    text-transform: uppercase;
}

.footerSubscribeForm {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    border-bottom: 1px solid #000;
    padding-bottom: 5px;
}

.footerSubscribeInput {
    flex: 1;
    min-width: 150px;
    border: none;
    background: transparent;
    color: #000;
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 0;
    outline: none;
}

.footerSubscribeInput::placeholder {
    color: #000;
    opacity: 0.6;
}

.footerBottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
    padding: 0 15px;
    background-color: #F7F7F7;
    margin-top: 108px;
}

.footerBottomList {
    display: flex;
    align-items: center;
    list-style: none;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px 0;
}

.footerBottomLink {
    color: #000;
    font-family: "helvetica";
    font-size: 14px;
    font-style: normal;
    font-weight: 300;
    line-height: 22px;
    opacity: 0.6;
}

.footerBottomList li:not(:last-child)::after {
    content: " | ";
    margin: 0 15px;
    opacity: 0.6;
}

.footerParaWrap {
    max-width: 320px;
}

.footerSubscribeBtn {
    border: none;
    background: transparent;
    color: #000;
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 8px 0;
}

.borderRightFooter {
    border-right: 1px solid #D9D9D9;
}

.marginBottomFooter {
    margin-bottom: 20px;
}

.colorBlack {
    color: #000 !important;
}

.paraText {
    font-family: "Manrope";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

/* Add custom */

.phoneNumberWrapper img {
    width: 14px;
    height: 14px;
    aspect-ratio: 1/1;
}

/* Desktop search — small popup below the icon */
.desktopSearchContainer {
    position: relative;
}

.desktopSearchPanel {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: 300px;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    border-radius: 6px;
    z-index: 1002;
    overflow: hidden;
}

.desktopSearchPanelInner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
}

.desktopSearchInput {
    flex: 1;
    border: none;
    outline: none;
    font-family: "Manrope";
    font-size: 14px;
    color: #000;
    background: transparent;
}

.desktopSearchInput::placeholder {
    color: #aaa;
}

.desktopSearchClose {
    color: #999;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;
    text-decoration: none;
    flex-shrink: 0;
}

.desktopSearchClose:hover {
    color: #000;
    text-decoration: none;
}

.desktopSearchResults {
    max-height: 360px;
    overflow-y: auto;
}

.desktopSearchResults:empty {
    display: none;
}

.desktopSearchResults a {
    color: #000;
    text-decoration: none;
    display: block;
}

.desktopSearchResults .inventorySearchResult {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border-bottom: 1px solid #f5f5f5;
}

.desktopSearchResults a:last-child .inventorySearchResult {
    border-bottom: none;
}

.desktopSearchResults a:hover .inventorySearchResult {
    background: #f8f8f8;
}

.desktopSearchResults .imgContainer img {
    width: 80px;
    height: 56px;
    object-fit: cover;
    border-radius: 3px;
    flex-shrink: 0;
}

.desktopSearchResults .conetntSectionContainer {
    flex: 1;
    min-width: 0;
}

.desktopSearchResults .invTitle {
    font-family: "Manrope";
    font-size: 12px;
    font-weight: 700;
    color: #000;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.desktopSearchResults .invPrice {
    font-size: 11px;
    color: #444;
    margin-bottom: 2px;
}

.desktopSearchResults .invMiles,
.desktopSearchResults .invStock {
    font-size: 11px;
    color: #999;
}


.homeHeaderMedia {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.homeHeaderSection {
    position: relative;
    padding-top: 42%;
    min-height: 600px;
    overflow: hidden;
}

.homeHeaderSection::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient(0deg, #262626 -0.11%, rgba(38, 38, 38, 0.00) 100%);
}

.specificHeight {
    height: calc(100vh - 300px);
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    opacity: 0.8;
    background: linear-gradient(0deg, #262626 -0.11%, rgba(38, 38, 38, 0.00) 100%);
    background-blend-mode: multiply;
}

.overlayBanner {
    position: absolute;
    top: 50%;
    left: 0;
    width: 99.40%;
    height: 50%;
    background: linear-gradient(180deg, rgba(34, 34, 34, 0.00) 0%, rgba(34, 34, 34, 0.90) 100%);
}

.heroContent {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 0 20px;
    text-align: center;
}

.heroLogo {
    max-width: 200px;
    height: auto;
}

.headerHeading {
    color: #FFF;
    text-align: center;
    font-family: "Cinzel";
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

.heroButtons {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 30px;
}

.blackBtn {
    color: #fff;
    padding: 15px 30px;
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: #262626;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    outline: none;
    border: none;
}

.blackBtn:hover {
    color: #fff;
    text-decoration: none;
}

.darkBlackBtn {
    color: #fff;
    padding: 15px 30px;
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    outline: none;
    border: none;
}

.darkBlackBtn:hover {
    color: #fff;
    text-decoration: none;
}

.pauseBtn {
    position: absolute;
    bottom: 30px;
    right: 40px;
    z-index: 2;
    background: transparent;
    color: #fff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.pauseBtn:hover {
    opacity: 1;
}

.familySection {
    position: relative;
    width: 100%;
    display: flex;
    min-height: 920px;
}

.familyImg {
    width: 100%;
    min-height: 920px;
    height: 100%;
    object-fit: cover;
    display: block;

}

.familyOverlay {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 100%;
    background: rgba(26, 26, 26, 0.85);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 8%;
    color: #fff;
    z-index: 2;
}

.mainHeading {
    color: #000;
    font-family: "Cinzel";
    font-size: 64px;
    font-weight: 400;
    line-height: 64px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.mainWhiteHeading {
    color: #FFF;
    text-align: center;
    font-family: Cinzel;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
}

.familySubHeading {
    font-family: "Manrope";
    font-size: 32px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 30px;
    line-height: 36px;
    letter-spacing: 0.64px;
}

.familyText p {
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 20px;
    color: #f1f1f1;
}

.familyText p:last-of-type {
    margin-bottom: 15px;
}


.blueBtn {
    display: inline-flex;
    background: transparent;
    padding: 12px 30px;
    color: #000;
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    align-items: center;
    justify-content: center;
    border: 1px solid #009EDD;
    line-height: 16px;
    text-align: center;
}

.blueBtn:hover {
    color: #000;
    text-decoration: none;
}

.secondaryBlueBtn {
    color: #009EDD;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1.6px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.secondaryBlueBtn:hover {
    color: #009EDD;
}

.whiteBtn {
    display: inline-block;
    background: transparent;
    padding: 12px 30px;
    color: #fff;
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    align-self: flex-start;
    border: 1px solid #009EDD;
    line-height: 16px;
    text-align: center;
}

.whiteBtn:hover {
    color: #fff;
    text-decoration: none;
}

.quoteSection {
    width: 100%;
    display: flex;
    justify-content: center;
}

.quoteWrapper {
    max-width: 1080px;
    width: 100%;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.quoteHeading {
    color: #000;
    text-align: center;
    font-family: "Helvetica LT Pro", "helvetica", sans-serif;
    font-size: 24px;
    font-style: italic;
    font-weight: 300;
    line-height: 36px;
}

.quoteAuthor {
    color: #000;
    font-family: "Helvetica LT Pro", "helvetica", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
}

.paraMainHeading {
    color: #000;
    font-family: "Manrope";
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.greyColor {
    background-color: #F7F7F7;
}

.mb-40px {
    margin-bottom: 40px !important;
}

.pr-40px {
    padding-right: 40px !important;
}

.p-60px {
    padding: 60px !important;
}

.repairImg {
    position: relative;
}

.repairImg img {
    width: 100%;
    height: auto;
    display: block;
}

.serviceBrandSection {
    margin-top: 80px;
    margin-bottom: 80px;
}

.bannerImg {
    width: 100%;
    height: 992px;
    object-fit: cover;
}

.px-8px {
    padding-right: 8px !important;
    padding-top: 8px !important;
}

.noPadding {
    padding: 0px;
}

.homeBrandsCard {
    margin: 0 4px 8px 4px;
}

.singleBrand {
    position: relative;
    padding-top: 61%;
}

.brand-logo-wrapper {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 16px;
}

.singleBrand::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(72deg, #262626 -0.03%, rgba(38, 38, 38, 0.00) 74.98%);
    background-blend-mode: multiply;
}

.brandImg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brandLogoWrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: absolute;
    left: 10%;
    bottom: 15%;
    max-width: 56%;
    width: 100%;
    z-index: 5;
    padding: 0 5px;
}

.bannerLogoWrapper {
    display: flex;
    flex-direction: column;
    gap: 35px;
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
}

.bannerLogoWrapper .blueBtn {
    width: 355px;
    max-width: 100%;
}

.brandLogo {
    width: 160px;
    height: 36.538px;
    aspect-ratio: 160.00/36.54;
}

.colorWhite {
    color: #FFF;
}

.missionVisionSection {
    background-image: url('/assets/images/home-brands/vision-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.ctaShopNow {
    color: #FFF;
    font-family: "Manrope";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1.6px;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: uppercase;
    transition: all 0.4s;
}

.ctaShopNow:hover {
    color: #009EDD;
}

.latestArrivalSection {
    padding: 120px 20px;
}

.newPreOwnd {
    display: flex;
    gap: 40px;
}

.text-color-black {
    color: #000;
}

.textNew {
    color: #000;
    font-family: "Manrope";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 1.6px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    text-transform: uppercase;
    cursor: pointer;
    opacity: 0.5;
}

.textNew.active {
    opacity: 1;
    color: #000000;
    text-decoration-thickness: 2px;
}

.textNew:hover {
    color: inherit;
    opacity: inherit;
}

.boatTag {
    color: #000;
    font-family: "Cinzel";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.boatTitle {
    color: #000;
    font-family: "Manrope";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.64px;
    text-transform: uppercase;
}

.boatImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.quoteIcon {
    width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
}

.customerQuote {
    display: flex;
    gap: 40px;
    gap: 25px;
}

.customerQuote img {
    width: 40px !important;
    height: 40px;
    aspect-ratio: 1/1;
}

.quoteHeading {
    width: calc(100% - 80px);
}

.customerSays {
    padding: 120px 200px;
    background-color: #E6F5FC;
}

.customerSays>div {
    position: relative;
}

.customerSaysCarousel .owl-nav {
    position: absolute;
    right: 0;
    bottom: 12px;
    display: flex;
    gap: 16px;
    z-index: 5;
}

.customerSaysCarousel .owl-nav button {
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    outline: none;
    border: none;
}

.customerSaysCarousel .owl-nav button img {
    width: 24px;
    height: 24px;
}

.customerSaysCarousel .owl-nav button span {
    display: none;
}

.customerSaysCarousel .owl-dots {
    display: none;
}

.customerSaysCarousel .owl-stage-outer {
    overflow: hidden;
}

.avatar {
    border-radius: 50%;
    width: 64px;
    height: 64px;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

.customerName {
    color: #000;
    font-family: "Manrope";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.customerInfo {
    gap: 25px;
}

.customerWrapper {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

.footer {
    padding-top: 112px;
    min-height: 688px;
    background-color: #fff;
}

.footer ul {
    list-style: none;
}

.sideMenu {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    background-color: #fff;
    height: 100vh;
    width: 420px;
    padding: 32px 40px 32px 8%;
    overflow-y: auto;
    box-shadow: 8px 0 20px rgba(0, 0, 0, 0.15);
    transition: all 0.4s;
    transform: translateX(-101%);
}

.sideMenuTogglerClass {
    transform: translateX(0);
}

.backArrowWrap {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}

.backArrow {
    max-width: 16px;
    cursor: pointer;
}

.backArrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sideMenuLinkList {
    list-style: none;
    padding: 40px 0;
}

.sideMenuLinkList li:not(:last-child) {
    margin-bottom: 24px;
}

.sideMenuLink {
    color: #1B2026;
    font-family: "Gotham Medium";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.sideMenuLink:hover {
    color: #1B2026;
}

.sideMenu .sideMenuLinkList:not(:last-of-type) {
    border-bottom: 1px solid rgba(110, 141, 166, 0.2);
}

.sideMenuSocialIconsWrap {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    align-items: center;
}

.mobileSideMenu {
    width: 70vw;
    height: 100vh;
    background-color: #fff;
    padding: 40px 32px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 101;
    overflow-y: auto;
    transition: all 0.4s;
    transform: translateX(-101%);
    box-shadow: 8px 0 20px rgba(0, 0, 0, 0.15);
}

.mobileSideMenuTogglerClass {
    transform: translateX(0);
}

.mobileBackArrowWrap {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}

.mobileBackArrow {
    max-width: 16px;
    cursor: pointer;
}

.mobileBackArrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mobileBrandToggleBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer;
}

.mobileSideMenuLink {
    color: #1B2026;
    font-family: "Manrope";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.mobileSideMenuLink:hover {
    color: #1B2026;
}

.mobileSideMenu .sideMenuLinkList:not(:last-of-type) {
    border-bottom: 1px solid rgba(110, 141, 166, 0.2);
}

.mobileSideMenu .sideMenuLinkList li:not(:last-child) {
    margin-bottom: 32px;
}

.mobileLocationToggleBtn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.mobileLocationMenu {
    position: fixed;
    top: 0;
    left: 0;
    width: 65vw;
    height: 100vh;
    overflow-y: auto;
    background-color: #fff;
    z-index: 105;
    padding: 40px 30px 40px 5%;
    box-shadow: 8px 0 20px rgba(0, 0, 0, 0.15);
    transform: translateX(-101%);
    transition: all 0.4s;
}

.mobileLocationTogglerClass {
    transform: translateX(0);
}

.mobileLocationArrowWrap {
    display: flex;
    justify-content: end;
    margin-bottom: 20px;
}

.mobileLocationArrow {
    max-width: 16px;
    cursor: pointer;
}

.mobileLocationArrow img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Services Page Specific CSS */
.pageTitleHeading {
    color: #FFF;
    text-align: center;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: #FFF;
    font-family: Cinzel;
    font-size: 80px;
    font-style: normal;
    font-weight: 400;
    line-height: 80px;
}

.quickNav {
    color: #000;
    text-align: center;
    width: 20%;
    font-family: Cinzel;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
}

.serviceSection {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.quickWrapper {
    display: flex;
    gap: 30px;
    width: 90%;
}

.quickHr {
    width: 40%;

}

.serviceCardsGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.service-item {
    width: calc(100% / 4 - 30px);
}
.serviceCardImg {
    position: relative;
    padding-top: 60%;
    display: block;
}

.serviceCardImg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.serviceCardHeading {
    color: #000;
    font-family: "Manrope";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.serviceCardContent {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #E6F5FC;
    width: 100%;
    min-height: 80px;
    padding: 24px;
}

.serviceCard {
    position: relative;
    overflow: hidden;
}

.adjustOverlay {
    top: 0;
    height: 100%;
}

.serviceBrandCard {
    position: relative;
}

.brandBgImg img {
    position: relative;
    padding-top: 90%;
}

.brandBgImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.6);
}

.serviceBrandCard>img {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0.6);
}

.servicebrandLogoWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    width: 80%;
}

.servicelogo {
    width: 100%;
    max-width: 250px;
    height: auto;
    object-fit: contain;
}

.textContentWrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 75px;
}

.advantageProgramSection {
    margin-top: 80px;
    margin-bottom: 80px;
    background-color: #E6F5FC;
    padding-top: 120px;
    padding-bottom: 120px;
}

.marginHeading {
    margin-bottom: 40px !important;
}

.headerProgram {
    margin-bottom: 64px;
}

.cardProgram {
    border-left: 1px solid black;
    padding-left: 40px;
}

.programHeading {
    color: #000;
    font-family: "Manrope";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.calenderImg {
    margin-bottom: 40px;
}

/* .seasionStorageSection {} */

.pr-40 {
    padding-right: 40px;
}

.seasionImgWrapper {
    position: relative;
    padding-top: 60%;
}

.seasionImgWrapper img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.requestServiceSection {
    margin-top: 100px;
    margin-bottom: 20px;
}

.requestImgWrapper {
    position: relative;
    padding-top: 87%;
}

.requestImgWrapper img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sideBar {
    border-left: 2px solid #009EDD;
}

.requestContent {
    padding-left: 15%;
}

.cbcConciergeSection {
    background-color: #262626;
    padding-top: 5%;
    padding-bottom: 5%;
}

.cbcImgWrapper {
    position: relative;
    padding-top: 75%;
}

.cbcImgWrapper img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.serviceBrandLogos {
    padding-top: 4%;
    padding-bottom: 4%;
}

.logoServiceWrapper {
    max-width: 200px;
    margin: 0 auto;
}

.logoServiceWrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.customGap {
    gap: 24px;
}

/* sell trade page css starts here */
.headerSection {
    position: relative;
    padding-top: 26%;
    min-height: 400px;
    overflow: hidden;
}

.headerSection::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-color: rgba(38, 38, 38, 0.6);
}

.headerMedia {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.headerContent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 5;
    width: 100%;
    padding: 0 15px;
}

.secondaryHeaderHeading {
    color: #FFF;
    text-align: center;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: #FFF;
    font-family: Cinzel;
    font-size: 80px;
    font-style: normal;
    font-weight: 400;
    line-height: 80px;
}

.smallHeading {
    color: #000;
    text-align: center;
    font-family: Manrope;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.64px;
    text-transform: uppercase;
}

.smallHeadingWhite {
    color: #FFF;
    font-family: Manrope;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.64px;
    text-transform: uppercase;
}

.headerHeadingWrap {
    margin-bottom: 40px;
}

.smallerSection {
    margin-top: 80px;
}

.smallerSectionTextWrap {
    max-width: 720px;
}

.smallerSectionImageWrap {
    position: relative;
    padding-top: 58%;
    max-width: 720px;
}

.smallerSectionImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fullWidthSection {
    margin: 80px 0;
}

.fullWidthTextWrap {
    display: flex;
    align-items: center;
    height: 100%;
}

.fullWidthTextInneWrap {
    max-width: 600px;
    margin: 0 auto;
}

.fullWidthSecImageWrap {
    position: relative;
    padding-top: 80%;
}

.fullWidthSecImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blueBarList {
    list-style: none;
    padding-left: 8px;
}

.blueBarList li {
    position: relative;
    margin-bottom: 16px;
    padding-left: 24px;
}

.blueBarList li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 2px;
    height: 100%;
    background-color: #009EDD;
}

.inspectionTextWrap {
    background-color: #E6F5FC;
    display: flex;
    height: 100%;
    align-items: center;
    padding: 40px 15px;
}

.inspectionTextInnerWrap {
    max-width: 546px;
    margin: 0 auto;
}

.inspectionImageWrap {
    position: relative;
    padding-top: 65%;
    height: 100%;
}

.inspectionImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ourGoalSection {
    margin: 80px 0;
    padding: 0 15px;
}

.btnWrap {
    margin-top: 40px;
}

.tradeVSconsignmentSection {
    background-color: #F7F7F7;
    padding: 80px 0;
}

.tradeIconWrap {
    max-width: 64px;
}

.tradeIconWrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.tradeVSconsignmentCard {
    max-width: 480px;
    margin: 0 auto;
}

.howItWorksBorderLeft {
    border-left: 1px solid #fff;
}

.howItWorksSection {
    padding: 80px 0;
    background-color: #262626;
    margin-top: 80px;
}

.howItWorksHeadingWrap {
    margin-bottom: 80px;
}

.howItWorksCard {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 16px;
}

.stepNumberText {
    color: #FFF;
    font-family: Cinzel;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
}

.whySellSection {
    margin-top: 20px;
}

.miniHeading {
    color: #000;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.whySellTradeList li {
    margin-bottom: 44px;
}

.whySellTradeImageWrap {
    position: relative;
    padding-top: 110%;
}

.whySellTradeImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sellTradeFormSection {
    background-color: #E6F5FC;
    padding: 115px 0;
}

.sellTradeFormTextWrap {
    max-width: 480px;
    margin: 0 auto;
}

.sellTradeReachOutCard {
    display: flex;
    gap: 32px;
    margin-bottom: 40px;
}

.reachOutHeading {
    color: #000;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sellTradePhone {
    color: #000;
    font-family: Manrope;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.64px;
    text-transform: uppercase;
}

.sellTradePhone:hover {
    color: #000;
}

.reachOutCardIconWrap {
    max-width: 40px;
}

.reachOutCardIconWrap img {
    width: 100%;
    object-fit: contain;
}

.addressPara {
    color: #000;
    font-family: "helvetica";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.sellTradeFormWrapper {
    max-width: 420px;
    margin: 0 auto;
}

.formFieldWrap {
    margin-bottom: 20px;
}

.formField {
    border: none;
    outline: none;
    background-color: #fff;
    padding: 12px 24px;
    color: #000;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    width: 100%;
}

.formField:focus {
    outline: 1px solid #009EDD;
}

.tradeConsignmentGuideLineSection {
    margin: 80px 0;
}

.tradeGuideLinesContainer {
    max-width: 1080px;
    margin: 0 auto;
}

.faqsSection {
    padding: 80px 0;
    background-color: #F7F7F7;
}

.faqHeadingWrap {
    display: flex;
    align-items: center;
    gap: 13px;
}

.faqInnerWrapper {
    max-width: 1080px;
    margin: 0 auto;
}

.sellTradeFaqs {
    margin-top: 20px;
}

.sellFaqItem {
    padding: 24px 0;
    border-bottom: 1px solid #eee;
}

.sellTradeFaqs .sellFaqItem:last-child {
    border-bottom: none;
}

.sellFaqQuestionHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.sellFaqQuestion {
    color: #000;
    font-family: "helvetica-bold";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 27px;
}

.sellFaqAnswer {
    display: none;
    margin-top: 16px;
}

.sellFaqIcon {
    position: relative;
    transition: all 0.3s;
}

.rotateSellFaq {
    transform: rotate(180deg);
}

/* FAQ category title with red underline */
.faqCategoryTitle {
      font-family: "helvetica-bold";
    font-size: 22px;
    font-weight: 700;
    color: #000;
    margin-top: 40px;
    margin-bottom: 8px;
    display: inline-block;
    border-bottom: 3px solid #009EDD;
    padding: 12px 0;
    line-height: 1.3;
    width: 100%;
    text-align: center;
    border-top: 3px solid #009EDD;
}

/* sell trade page css ends here */


/* ========================================= */
/* Pro Shop Page Styling Starts Here         */
/* ========================================= */

.proshopHero {
    position: relative;
    height: calc(100vh - 300px);
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.proshopHeroImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proshopResources {
    padding-top: 80px;
    padding-bottom: 80px;
}

.proshopResourcesHeading {
    color: #000;
    font-family: Cinzel;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    margin-bottom: 0;
}

.proshopResourcesSubtext {
    color: #000;
    text-align: right;
    font-family: Manrope;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 0;
}

.proshopResourceCard {
    position: relative;
    overflow: hidden;
    height: 280px;
}

.proshopResourceCard img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proshopResourceOverlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(180deg, rgba(38, 38, 38, 0) 0%, #262626 100%);
    opacity: 0.9;
}

.proshopResourceLabel {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    color: #fff;
    font-family: "helvetica-light";
    font-size: 40px;
    font-weight: 300;
    line-height: 44px;
    text-transform: uppercase;
    text-align: center;
    z-index: 1;
}

.proshopOneStop {
    padding-top: 80px;
    padding-bottom: 80px;
}

.proshopOneStopHeading {
    color: #000;
    font-family: Cinzel;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    margin-bottom: 40px;
}

.proshopOneStopText {
    color: #000;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 40px;
}

.proshopOneStopBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 48px;
    padding: 18px 20px;
    border: 1px solid #009EDD;
    background: transparent;
    color: #000;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
}

.proshopOneStopBtn:hover {
    background: #009EDD;
    color: #fff;
    text-decoration: none;
}

.proshopOneStopImgWrapper {
    position: relative;
    padding-top: 72%;
}

.proshopOneStopImgWrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proshopWhatsInStore {
    padding-top: 80px;
    padding-bottom: 40px;
    background-color: #F7F7F7;
}

.proshopWhatsHeading {
    color: #000;
    font-family: Cinzel;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
}

.proshopWhatsSubtext {
    color: #000;
    font-family: Manrope;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
}

.proshopStoreLogos {
    gap: 20px;
}

.proshopBrandLogo {
    height: 120px;
    width: auto;
    object-fit: contain;
}

.proshopBrandLogoSmall {
    height: 56px;
    width: auto;
    object-fit: contain;
}

.proshopStoreImgWrapper {
    position: relative;
    padding-top: 50%;
}

.proshopStoreImgWrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proshopStoreItemLabel {
    color: #000;
    font-family: Manrope;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-top: 16px;
}

.proshopCoastGuard {
    padding-top: 80px;
    padding-bottom: 40px;
}

.proshopCgHeading {
    color: #000;
    font-family: Cinzel;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
}

.proshopCgSubtext {
    color: #000;
    font-family: Manrope;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
    margin-bottom: 40px;
}

.proshopCgRow {
    margin-left: -8px;
    margin-right: -8px;
}

.proshopCgCol {
    padding-left: 8px;
    padding-right: 8px;
}

.proshopCgImgWrapper {
    position: relative;
    padding-top: 127.27%;
}

.proshopCgImgWrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proshopChecklist {
    padding: 0;
}

.proshopChecklistRow {
    min-height: 800px;
}

.proshopChecklistImgCol {
    padding: 0;
}

.proshopChecklistImgWrapper {
    height: 100%;
    min-height: 800px;
}

.proshopChecklistImgWrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proshopChecklistContent {
    background-color: #E6F5FC;
    padding: 80px 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.proshopChecklistHeading {
    color: #000;
    font-family: Cinzel;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    margin-bottom: 24px;
}

.proshopChecklistSubtext {
    color: #000;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 40px;
}

.proshopChecklistItems {
    list-style: none;
    padding: 0;
}

.proshopChecklistItems li {
    font-family: Manrope;
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    color: #000;
    padding: 8px 0 8px 24px;
    border-left: none;
    margin-bottom: 0;
    position: relative;
}

.proshopChecklistItems li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 24px;
    background: #009EDD;
}

.proshopChecklistBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-sizing: border-box;
    width: 280px;
    height: 48px;
    padding: 1px;
    border: 1px solid #009EDD;
    background: transparent;
    color: #000;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: 40px;
}

.proshopChecklistBtn:hover {
    background: #009EDD;
    color: #fff;
    text-decoration: none;
}

.proshopAddons {
    padding-top: 80px;
    padding-bottom: 40px;
}

.proshopAddonsHeading {
    color: #000;
    font-family: Cinzel;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    text-align: center;
    margin-bottom: 40px;
}

.proshopAddonImgWrapper {
    position: relative;
    padding-top: 57%;
    border: 1px solid #262626;
}

.proshopAddonImgWrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proshopAddonLabel {
    color: #000;
    font-family: Manrope;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    margin-top: 16px;
}

.proshopVantage {
    padding: 0;
}

.proshopVantageImgWrapper {
    height: 100%;
    min-height: 880px;
}

.proshopVantageImgWrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proshopVantageContent {
    background-color: #F7F7F7;
    padding: 80px 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.proshopVantageHeading {
    color: #000;
    font-family: Cinzel;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    margin-bottom: 40px;
}

.proshopVantageTagline {
    color: #000;
    font-family: Manrope;
    font-size: 32px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.proshopVantageText {
    color: #000;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.proshopVantageList {
    list-style: none;
    padding: 0;
}

.proshopVantageList li {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    padding: 4px 0;
}

.proshopVantageList li::before {
    content: "• ";
    color: #000;
}

.proshopWomenWaves {
    padding-top: 80px;
    padding-bottom: 80px;
}

.proshopWomenWavesText {
    color: #000;
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.proshopWomenWavesImgWrapper {
    position: relative;
    padding-top: 72%;
}

.proshopWomenWavesImgWrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proshopWmwLogoOverlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 260px;
    height: 260px;
    z-index: 1;
    background: rgba(38, 38, 38, 0.9);
    aspect-ratio: 1/1;
}

.proshopWmwLogoOverlay img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proshopImageStrip {
    background-color: #262626;
    padding: 80px 0;
}

/* .proshopStripSlider .item img {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
} */

.proShopGalleryImageWrapper{
    position: relative;
    padding-top: 100%;
}

.proShopGalleryImageWrapper img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.proshopStripImg {
    width: 100%;
    height: 600px;
    object-fit: cover;
    display: block;
}

.proshopVisit {
    padding-top: 80px;
    padding-bottom: 80px;
}

.proshopMapPlaceholder {
    background-color: #D9D9D9;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.proshopMapPlaceholder iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.proshopMapPlaceholder span {
    font-family: Cinzel;
    font-size: 64px;
    font-weight: 400;
    line-height: 64px;
    color: #000;
    text-align: center;
    opacity: 0.2;
}

.proshopVisitHeading {
    color: #000;
    font-family: Cinzel;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    text-align: center;
}

.proshopVisitTextWrap {
    max-width: 720px;
    margin: 0 auto;
}

.proshopVisitAddress {
    color: #000;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-decoration: underline;
}

.proshopVisitPhone {
    font-family: Manrope;
    font-size: 32px;
    font-weight: 400;
    color: #000;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-align: center;
    line-height: 36px;
}

.proshopVisitHours {
    color: #000;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    text-align: center;
}

.proshopContact {
    padding-top: 80px;
    padding-bottom: 80px;
    background-color: #E6F5FC;
}

.proshopContactHeading {
    color: #000;
    font-family: Cinzel;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    text-align: center;
    margin-bottom: 40px;
}

.proshopContactSubtext {
    color: #000;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    max-width: 880px;
    margin: 0 auto 40px;
}

.proshopFormWrap {
    max-width: 656px;
    margin: 0 auto;
}

.proshopFormRow {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

.proshopFormInput {
    width: 320px;
    height: 48px;
    border: none;
    border-radius: 0;
    padding: 12px 16px;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    background-color: #fff;
    color: #000;
    flex: 1;
}

.proshopFormInput::placeholder {
    color: #000;
    opacity: 0.6;
}

.proshopFormInput:focus {
    outline: 1px solid #009EDD;
}

.proshopFormTextarea {
    width: 100%;
    height: 96px;
    border: none;
    border-radius: 0;
    padding: 12px 16px;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    background-color: #fff;
    color: #000;
    resize: none;
}

.proshopFormTextarea::placeholder {
    color: #000;
    opacity: 0.6;
}

.proshopFormTextarea:focus {
    outline: 1px solid #009EDD;
}

.proshopSendBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 48px;
    background: #000;
    color: #fff;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
}

.proshopSendBtn:hover {
    background: #009EDD;
}

.proshopFaqs {
    padding-top: 80px;
    padding-bottom: 80px;
}

.proshopFaqsHeading {
    color: #000;
    font-family: Cinzel;
    font-size: 56px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    text-align: center;
    margin-bottom: 48px;
}

.proshopFaqsContainer {
    max-width: 1050px;
    margin: 0 auto;
    padding: 0 20px;
}

.proshopFaqItem {
    border-bottom: 1px solid #D9D9D9;
    padding: 24px 0;
}

.proshopFaqItem:last-child {
    border-bottom: none;
}

.proshopFaqQuestion {
    font-family: Manrope;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #000;
    margin-bottom: 8px;
}

.proshopFaqAnswer {
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 0;
}

.proshopFaqIcon {
    color: #009EDD;
    font-weight: 700;
    margin-right: 5px;
}

/* contact page css starts here */
.contactFormSection {
    margin: 20px 0;
    background-color: #E6F5FC;
    padding: 80px 15px;
    overflow: hidden;
}

.heroParaWrap {
    max-width: 880px;
    margin: 0 auto;
}

.contactFormWrapper {
    max-width: 668px;
    margin: 0 auto;
}

.contactMapWrapper {
    min-height: 920px;
    overflow: hidden;
}

.contactMapWrapper iframe {
    width: 100%;
    height: 100%;
    min-height: 920px;
    display: block;
}

.contactMapSection {
    margin-bottom: 20px;
    overflow: hidden;
}

.contactTextWrapper {
    display: flex;
    align-items: center;
    height: 100%;
}

.contactTextInnerWrap {
    max-width: 720px;
    margin: 0 auto;
}

/* Hours Section Styling */
.hoursSection {
    margin-top: 32px;
}

.hoursSection .row {
    margin-left: -8px;
    margin-right: -8px;
}

.hoursSection .row>[class*='col-'] {
    padding-left: 8px;
    padding-right: 8px;
}

.hoursBlock {
    margin-bottom: 32px;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border: 2px solid #e0e0e0;
}

.departmentName {
    color: #000;
    font-family: Manrope;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.seasonLabel {
    color: #000;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin-bottom: 12px;
    font-style: italic;
}

.hoursTable {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hoursRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}

.dayLabel {
    color: #000;
    font-family: Manrope;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    min-width: 100px;
}

.timeLabel {
    font-family: Manrope;
    font-size: 15px;
    font-weight: 500;
    line-height: 22px;
    text-align: right;
}

.status-open {
    color: #28a745;
}

.status-closed {
    color: #dc3545;
}

.specialHoursNote {
    color: #000;
    font-family: Manrope;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin-top: 20px;
    padding: 12px;
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 4px;
}
/* contact page css ends here */

/* brand page css starts here */
.brandHeaderSection {
    position: relative;
    padding-top: 42%;
    min-height: 450px;
}

.brandHeaderSection::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(38, 38, 38, 0.6);
}

.brandHeaderSection .brandHeaderImage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brandHeaderContent {
    position: absolute;
    bottom: 10%;
    left: 0;
    width: 100%;
    z-index: 2;
}

.brandHeaderContentWrapper {
    max-width: 1080px;
}

.brandPageWrapper {
    position: relative;
}

.brandCtaBar {
    position: sticky;
    left: 0;
    width: 100%;
    top: 72px;
    background-color: #fff;
    padding: 30px 0;
    z-index: 2;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-bottom: 1px solid #D9D9D9;
}

.brandCtaBar.is-fixed {
    position: fixed;
    top: 72px;
    left: 0;
    width: 100%;
    z-index: 2;
    transition: top 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.inventory-title{
    padding-top: 88px !important;
}

.brandCtaBarPlaceholder {
    height: 0;
    transition: height 0.2s ease;
}

.brandCtaAndLogoWrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 24px;
}

.brandCtaBtnWrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.brandCtaBarLogoWrap {
    max-width: 240px;
}

.brandCtaBarLogoWrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: invert(1);
}

.brandHeroSection {
    margin-top: 64px;
}
.formSectionHeading{
    color: #000;
    font-family: "Manrope";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    margin-bottom: 15px;
}
.brandHeroTextWrap {
    max-width: 600px;
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: flex-start;
    justify-content: center;
}

.brandHeroTextWraplg {
    max-width: 100%;
}

.mt-100 {
    margin-top: 100px;
}

.brandHeroImageWraplg {
    max-width: calc(100% - 5%);
    width: 100%;
    min-height: 640px
}

.brandHeroImageWraplg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brandHeroImageWrap {
    position: relative;
    padding-top: 61%;
    max-width: 640px;
    min-height: 640px;
}

.brand-subtitle {
    color: var(--Blk, #000);
    font-family: Manrope;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.64px;
    text-transform: uppercase;
}

.brand-featured-list {
    padding-left: 20px;
}

.brand-featured-list li {
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.brand-featured-list.white-list li {
    color: white;
}

.dark-sec {
    padding: 115px 0;
    background: var(--charcoal-bg);
}

.brandHeroImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brandHeroImageWrap video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.brandGalleryImageContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.brandGalleryImageWrap {
    position: relative;
    padding-top: 22%;
    width: calc((100% / 3) - 8px);
}

.brandGalleryImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.availableInventorySection {
    margin: 0 0 120px 0;
}

.availableInventoryCard {
    padding: 0 20px;
    margin-bottom: 40px;
}

.availableInventoryImageWrap {
    position: relative;
    padding-top: 57%;
}

.availableInventoryImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.availableInventoryTextWrap {
    margin-top: 16px;
}

.availableInvetoryCardSpecs {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center;
}

.availableInvetorySpecsText {
    color: #000;
    font-family: Cinzel;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.viewLineUpSection {
    margin: 120px 0;
}

.lineUplistings {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 76px;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 40px;
}

.lineUpListingTab {
    color: #000;
    text-align: center;
    font-family: "acumin-pro";
    font-size: 20px;
    font-style: normal;
    font-weight: 200;
    line-height: 32px;
    text-transform: uppercase;
}

.lineUpListingTab:hover {
    color: #000;
}

.lineUpListingTab.activeTab {
    color: #000;
    text-align: center;
    font-family: "acumin-pro";
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 32px;
    text-transform: uppercase;
}

.lineUpItemCard {
    padding: 0 20px;
    margin-bottom: 40px;
}

.lineUpImageWrap {
    position: relative;
    padding-top: 56%;
}

.lineUpListingTab {
    cursor: pointer;
}

.lineUpModelContainer {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.35s ease, transform 0.35s ease;
    pointer-events: none;
}

.lineUpModelContainer.activeSlide {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.lineUpImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lineUpItemTextWrap {
    margin-top: 8px;
}

.lineUpTitle {
    color: #000;
    text-align: center;
    font-family: "acumin-pro";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
}

.lineUpModelItem {
    position: relative;
    max-width: 1680px;
    margin: 0 auto;
}

.lineUpNavWrap {
    max-width: 40px;
    height: 40px;
    cursor: pointer;
}

.lineUpNavWrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.lineUpModelPrevButton {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.lineUpModelNextButton {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.lineUpModelWrapper {
    cursor: grab;
}

.lineUpModelWrapper:active {
    cursor: grabbing;
}


/* brand page css ends here */


/* model detail page css starts here */
.modelDetailHeader {
    position: relative;
    padding-top: 37%;
    min-height: 450px;
}

.modelDetailHeader::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: rgba(0, 0, 0, 0.3);
}

.modelDetailHeader .modelDetailHeaderImage {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modelHeaderLogoWrap {
    max-width: 200px;
    margin: 0 auto;
}

.modelHeaderLogoWrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.modelHeaderHeadingWrap {
    max-width: 680px;
    margin: 0 auto;
}

.modelCharacterSticsSection {
    margin: 80px 0;
}

.characterSticsTextWrap {
    display: flex;
    align-items: center;
    height: 100%;
}

.characterSticsTextInnerWrap {
    max-width: 600px;
}

.characterSticsImageWrap {
    position: relative;
    padding-top: 57%;
    max-width: 800px;
    margin: 0 auto;
}

.characterSticsImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.technicalSpecificationSection {
    background-color: #F1F4F6;
    padding: 80px 0;
}

.technicalSpecsCard {
    border-bottom: 1px solid #D9D9D9;
    padding-bottom: 22px;
}

.technicalSpecsText {
    color: #1B2026;
    font-family: "Manrope";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 26px;
    text-transform: uppercase;
}

.modelDisplayImageWrap {
    position: relative;
    padding-top: 57%;
}

.modelDisplayImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modelExteriorSection {
    margin: 80px 0;
}

/* .modelDetailVirtualTourImageWrap {
    position: relative;
    padding-top: 59%;
}

.modelDetailVirtualTourImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
} */

.virtualTourTextWrap {
    max-width: 520px;
    margin: 0 auto;
}

.floorPlanImageWrap {
    position: relative;
    padding-top: 50%;
}

.floorPlanImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.floorPlanSection {
    margin: 80px 0;
}

.worldFinestSection {
    background-color: #F1F4F6;
    padding: 120px 0;
}

.worldFinestVideoWrapper {
    position: relative;
    padding-top: 69%;
}

.worldFinestVideoWrapper .worldFinestMedia {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.worldFinestTextWrapper {
    display: flex;
    align-items: center;
    height: 100%;
}

.worldFinestTextInnerWrap {
    max-width: 680px;
    margin: 0 auto;
}

.boatCardImageWrap {
    position: relative;
    padding-top: 57%;
}

.boatCardImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* model detail page css ends here */



/* ========================================= */
/* Customer Stories Page Styling Starts Here */
/* ========================================= */

.csHeroSection {
    position: relative;
    width: 100%;
    height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.csHeroImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csHeroOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(38, 38, 38, 0.6);
    z-index: 1;
}

.csIntroSection {
    padding-top: 64px;
    padding-bottom: 0;
}

.csIntroTextWrap {
    max-width: 880px;
}

.csVerticalLine {
    width: 1px;
    height: 80px;
    background-color: #000;
    margin-top: 64px;
    margin-bottom: -40px;
    position: relative;
    z-index: 2;
}

.csFeaturedSection {
    padding-top: 0;
}

.csFeaturedVideoWrapper {
    position: relative;
    width: 100%;
    max-width: 1080px;
    height: 640px;
    background-color: #C4C4C4;
    overflow: hidden;
}

.csFeaturedVideoImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csFeaturedPlayBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    cursor: pointer;
    z-index: 1;
}

.csFeaturedPlayBtn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.csTestimonialsSection {
    padding-top: 30px;
    padding-bottom: 16px;
}

.csTestimonialsInner {
    max-width: 1320px;
}

.csTestimonialsHeading {
    font-family: "Cinzel";
    font-size: 64px;
    font-weight: 400;
    line-height: 64px;
    color: #000;
    margin-bottom: 48px !important;
}

.csTestimonialRow {
    margin-bottom: 56px;
}

.csQuoteIcon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.csNameDate {
    color: #000;
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    max-width: 600px;
}

.csTestimonialText {
    max-width: 600px;
}

.csStoryImgWrapper {
    position: relative;
    height: 240px;
    background-color: #C4C4C4;
    overflow: hidden;
}

.csStoryImgWrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.csStoryPlayBtn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1;
}

.csStoryPlayBtn img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.csStoryName {
    color: #000;
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
}

.csStoryDate {
    color: #000;
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    opacity: 0.6;
}

.csStoriesSection {
    padding-top: 120px;
    padding-bottom: 16px;
}
.service-header-wrapper{
    position: relative;
    padding-top: 31.5%;
    min-height: 300px;
}
.csStoriesInner {
    max-width: 1388px;
}

.csStoriesHeading {
    font-family: "Cinzel";
    font-size: 64px;
    font-weight: 400;
    line-height: 64px;
    color: #000;
    margin-bottom: 48px !important;
}

.csStoriesRow {
    margin-bottom: 64px;
}

/* Customer Stories Page Styling Ends Here */


/* ================================================ */
/* Start Your Boat Journey Page Styling Starts Here */
/* ================================================ */

.sybHeroSection {
    position: relative;
    width: 100%;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.sybHeroImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sybHeroSubtitle {
    color: #fff;
    font-family: "Manrope";
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: #fff;
    text-shadow: 0.5px 0 0 #fff, 0 0.5px 0 #fff, -0.5px 0 0 #fff, 0 -0.5px 0 #fff;
    margin-top: 40px !important;
}

.sybQuickNav {
    background-color: #000;
    padding: 8px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sybQuickNavItem {
    color: #fff;
    font-family: "Cinzel";
    font-size: 20px;
    font-weight: 400;
    line-height: 64px;
    text-transform: uppercase;
    text-decoration: none;
    padding: 0 40px;
}

.sybQuickNavItem:hover {
    color: #009EDD;
    text-decoration: none;
}

.sybSectionLabel {
    color: rgba(0, 0, 0, 0.6);
    font-family: "Manrope";
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.sybFindFitCta {
    padding-top: 64px;
    padding-bottom: 48px;
}

.sybFindFitCta .mainHeading {
    margin-bottom: 24px;
}

.sybDivider {
    border-top: 1px solid #D9D9D9;
    margin: 0;
}

.sybBoatTypesSection {
    padding-bottom: 48px;
}

.sybBoatImgWrap {
    position: relative;
    height: 280px;
    overflow: hidden;
    margin-bottom: 20px;
}

.sybBoatImgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sybBoatRow {
    margin-bottom: 24px;
}

.sybScrollIcon {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    cursor: pointer;
}

.sybScrollTop {
    position: fixed;
    right: 40px;
    bottom: 40px;
    width: 64px;
    height: 64px;
    z-index: 99;
    display: none;
}

.sybScrollTop img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sybDirectionImgWrap {
    position: relative;
    padding-top: 75%;
}

.sybDirectionImgWrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sybDirectionContent {
    max-width: 600px;
    padding-left: 120px;
}

.sybDirectionContentLeft {
    max-width: 600px;
    padding-right: 120px;
}

.sybDirectionRow {
    margin-bottom: 64px;
}

.sybDirectionRow:last-child {
    margin-bottom: 0;
}

/* Pricing Section */
.sybPricingSection {
    padding: 116px 0 88px;
}

.sybPricingCard {
    padding: 0;
}

.sybPricingHeader {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    margin-bottom: 16px;
}

.sybPricingIcon {
    background-color: #E6F5FC;
    width: 64px;
    min-width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sybPricingIcon img {
    width: 24px;
    height: auto;
}

.sybPricingContent {
    padding-left: 104px;
}

.sybFinanceImgWrap {
    position: relative;
    height: 360px;
    overflow: hidden;
}

.sybFinanceImgWrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sybDisclaimerBox {
    background-color: #F7F7F7;
    padding: 24px 40px;
}

.sybOwnershipSection {
    padding: 0;
    background: transparent;
    margin-bottom: 64px;
}

.sybOwnershipRow {
    min-height: 520px;
}

.sybOwnershipImgWrap {
    position: relative;
    padding-top: 0;
    height: 100%;
    min-height: 520px;
}

.sybOwnershipImgWrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sybOwnershipContent {
    background-color: #262626;
    height: 100%;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 80px;
}

.sybOwnershipList {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sybOwnershipListItem {
    display: flex;
    align-items: center;
    gap: 24px;
}

.sybOwnershipIcon {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.sybOwnershipLabel {
    color: #fff;
    font-family: "Manrope";
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0;
}

.sybProcessSection {
    padding: 88px 0 64px;
    background-color: #E6F5FC;
}

.sybProcessContainer {
    padding-left: 100px;
    padding-right: 100px;
}

.sybProcessHeader {
    margin-bottom: 64px;
}

.sybProcessSubtitle {
    opacity: 0.6;
    margin-bottom: 40px;
}

/* sybStepsRow - no extra styles needed */

.sybStepCard {
    border-left: 1px solid #000;
    padding-left: 60px;
    padding-top: 0;
    height: 100%;
}

.sybStepNumber {
    color: #000;
    font-family: "Cinzel";
    font-size: 80px;
    font-weight: 400;
    line-height: 80px;
    margin-bottom: 24px;
}

.sybStepTitle {
    color: #000;
    font-family: "Manrope";
    font-size: 32px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

/* What happens once you say "yes" Section */
.sybSayYesSection {
    padding: 80px 0 88px;
}

.sybSayYesContent {
    max-width: 620px;
}

.sybSayYesImgWrap {
    position: relative;
    padding-top: 100%;
}

.sybSayYesImgWrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Delivery & Orientation Section */
.sybDeliverySection {
    position: relative;
    min-height: 920px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

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

.sybDeliveryCardWrap {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 80px 280px 80px 0;
}

.sybDeliveryCard {
    background: rgba(255, 255, 255, 0.9);
    padding: 80px;
    width: 640px;
    max-width: 100%;
    min-height: 760px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sybNextStepSection {
    padding: 88px 0 0;
}

.sybNextStepRow {
    margin-top: 48px;
}

.sybNextStepCard {
    position: relative;
    overflow: hidden;
    height: 280px;
}

.sybNextStepImg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sybNextStepOverlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150px;
    background: linear-gradient(180deg, rgba(38, 38, 38, 0) 0%, #262626 100%);
    opacity: 0.8;
    display: flex;
    align-items: flex-end;
    padding: 24px;
}

.sybNextStepLabel {
    color: #fff;
    font-family: "Manrope";
    font-size: 32px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.sybFaqSection {
    padding: 96px 0 80px;
}

.sybFaqDesc {
    margin-bottom: 48px;
}

.sybFaqContainer {
    max-width: 1080px;
    margin: 0 auto;
}

.sybFaqItem {
    border-bottom: 1px solid #D9D9D9;
    padding: 0;
}

.sybFaqQuestion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    min-height: 75px;
    padding: 24px 0;
}

.sybFaqQuestion strong {
    font-family: "helvetica";
    font-size: 18px;
    font-weight: 700;
    line-height: 27px;
    color: #000;
    flex: 1;
    padding-right: 20px;
}

.sybFaqIcon {
    color: #000;
    font-weight: 700;
    font-size: 20px;
}

/* Start Your Boat Journey Page Styling Ends Here */

/* financing page css starts here */
.financingHeaderSection {
    position: relative;
    padding-top: 42%;
    min-height: 450px;
}

.financingHeaderSection::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(38, 38, 38, 0.6);
}

.financingHeaderSection img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.financingHeaderContent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
    width: 100%;
    padding: 0 15px;
    max-width: 1080px;
    margin: 0 auto;
}

.financingHeroSection {
    margin-top: 80px;
}

.whyFinanceCard {
    max-width: 260px;
    margin: 0 auto;
    text-align: center;
}

.whyFinacnceIconWrap {
    max-width: 64px;
    margin: 0 auto;
}

.whyFinacnceIconWrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.whyFinanceTitle {
    color: #000;
    text-align: center;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.financeBoatLoanSection {
    margin: 120px 0;
}

.financeBoatLoanTextWrap {
    display: flex;
    align-items: center;
    height: 100%;
}

.financeBoatLoanTextInnerWrap {
    max-width: 600px;
}

.financeBoatFeaturesContainer {
    margin-top: 40px;
}

.finaceFeauterIconWrap {
    max-width: 24px;
}

.finaceFeauterIconWrap img {
    width: 100%;
    object-fit: contain;
}

.financeFeatureTitle {
    color: #000;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.financeBoatFeatureItem {
    display: flex;
    gap: 16px;
}

.financeBoatLoanImageWrap {
    position: relative;
    padding-top: 95%;
    max-width: 640px;
}

.financeBoatLoanImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.prefferedLinderSection {
    padding: 75px 0;
    background-color: #E6F5FC;
    margin-bottom: 20px;
}

.prefferedLinderInnerWrap {
    max-width: 924px;
    margin: 0 auto;
    padding: 0 15px;
}

.linderParaWrap {
    margin-left: 56px;
}

.tipsForSmoothSection {
    padding: 80px 0;
    background-color: #262626;
}

.financingTipsCard {
    border-radius: 10px;
    border: 1.049px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.05);
    padding: 40px 33px;
    margin: 0 20px;
}

.financeTipsNumber {
    color: #FFF;
    font-family: Cinzel;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
}

.financeTipsTitle {
    color: #FFF;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.marineInsuranceSection {
    margin-top: 120px;
    margin-bottom: 40px;
}

.marineInsuranceHeadingWrap {
    margin-bottom: 64px;
}

/* financing page css ends here */

/* owner resources page css starts here */
.ownerHeaderWrap {
    max-width: 880px;
    margin: 0 auto;
}

.formsDownloadSection {
    margin: 64px 0 80px 0;
}

.formsDownloadCard {
    border: 1px solid #D9D9D9;
    padding: 33px;
    margin: 0 12px;
}

.formHeaderWrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
}

.formDownloadCardTitle {
    color: #000;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.postSaleFaqsSection {
    background-color: #E6F5FC;
    padding: 80px 0;
}

.postSaleFaqsWrapper {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 15px;
}

.ownerResourceFaqItem {
    border-bottom: 1px solid #D9D9D9;
}

.ownerResourcesSection {
    margin: 80px 0;
}

.blogCard {
    padding: 0 32px;
    margin-bottom: 64px;
}

.blogImageWrap {
    position: relative;
    padding-top: 62%;
}

.blogImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tagText {
    color: #000;
    font-family: Cinzel;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.blogTitle {
    color: #000;
    font-family: Manrope;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blogPara {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.3s ease;
}

.blogPara.expanded {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.welcomToSalesDeptSection {
    background-color: #262626;
    padding: 80px 0;
}

/* owner resources page css ends here */

/* about page css starts here */
.normalSection {
    background: #262626;
}


.aboutHeaderSection {
    min-height: 440px;
}

.aboutBackgroundSection {
    height: 100vh;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aboutBgOverlay {
    text-align: center;
}

/* Origins Section - Parallax with overlapping photo */
.aboutOriginsSection {
    position: relative;
}

.aboutOriginsBg {
    height: 600px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 240px;
}

.aboutOriginsLine {
    width: 1px;
    height: 50px;
    background-color: #fff;
    margin: -280px auto 0;
    position: relative;
    z-index: 3;
}

.aboutOriginsPhoto {
    max-width: 1080px;
    height: 640px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    padding: 0 15px;
}

.aboutOriginsPhoto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.backGroundItem1 {
    background-image: url('https://cdn.mdsbrand.com/mean-colorado-boat-center/assets/images/about/first-bg.webp');
}

.backGroundItem2 {
    background-image: url('https://cdn.mdsbrand.com/mean-colorado-boat-center/assets/images/about/second-bg.webp');
}

.backGroundItem3 {
    background-image: url('https://cdn.mdsbrand.com/mean-colorado-boat-center/assets/images/about/third-bg.webp');
}

.aboutHeaderSection {
    position: relative;
    padding-top: 45%;
}

.aboutHeaderSection .aboutHeaderMedia {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aboutHeaderSection::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(38, 38, 38, 0.6);
}

.aboutHeaderContent {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    padding: 0 15px;
    z-index: 3;
}

.aboutHeaderLogoWrap {
    max-width: 147px;
    margin: 0 auto;
}

.aboutHeaderLogoWrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.founderSection {
    padding: 80px 0 100px;
}

.founderInnerWrap {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.whiteColorTag {
    color: #FFF;
    text-align: center;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.founderHeaderWrap {
    margin: 40px 0;
}

.founderPara {
    color: #FFF;
    text-align: center;
    font-family: "helvetica-light";
    font-size: 24px;
    font-style: italic;
    font-weight: 300;
    line-height: 36px;
}

.originImageWrapper {
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    padding: 0 15px;
    padding-top: 50%;
}

.originImageWrapper img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* About Page - History Timeline & Team Sections */
.aboutHistorySection {
    background-color: #262626;
    padding: 120px 0;
    overflow: hidden;
}

.aboutTimelineLine {
    width: 1px;
    height: 80px;
    background-color: #fff;
}

.aboutEraBlock {
    margin-bottom: 120px;
}

.aboutEraBlock:last-child {
    margin-bottom: 0;
}

.aboutEraTitle {
    color: #fff;
    font-family: "Cinzel";
    font-size: 64px;
    font-weight: 400;
    line-height: 64px;
}

.aboutEraYear {
    color: #fff;
    font-family: "Cinzel";
    font-size: 80px;
    font-weight: 400;
    line-height: 80px;
}

.aboutTimelineContent {
    max-width: 520px;
}

.aboutEraRow {
    gap: 120px;
    flex-wrap: wrap;
    justify-content: center;
}

.aboutEraTextCol {
    flex: 0 0 520px;
    max-width: 520px;
}

.aboutEraImgCol {
    flex: 0 0 600px;
    max-width: 600px;
}

.aboutEraImg {
    width: 600px;
    height: 480px;
    object-fit: cover;
    display: block;
}

/* Overlapping timeline section */
.aboutOverlapSection {
    position: relative;
    width: 1300px;
    max-width: 100%;
    margin: 0 auto;
    height: 520px;
}

.aboutOverlapTop {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    position: absolute;
    top: 0;
    left: 0;
}

.aboutOverlapTop .aboutOverlapImg {
    width: 520px;
    height: 320px;
    flex-shrink: 0;
}

.aboutOverlapTop .aboutOverlapImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aboutOverlapTop .aboutOverlapText {
    width: 280px;
    padding-top: 0;
}

.aboutOverlapBottom {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    position: absolute;
    top: 200px;
    left: 460px;
}

.aboutOverlapBottom .aboutOverlapImg {
    width: 520px;
    height: 320px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.aboutOverlapBottom .aboutOverlapImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aboutOverlapBottom .aboutOverlapText {
    width: 280px;
    padding-top: 0;
}

.aboutOverlapHeading {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.aboutOverlapPara {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

/* Reverse overlap (1997-1999 section) */
.aboutOverlapReverse {
    width: 1160px;
    max-width: 100%;
    height: 700px;
}

.aboutOverlapReverseText1 {
    position: absolute;
    top: 50px;
    left: 120px;
    width: 360px;
}

.aboutOverlapReverseImg1 {
    position: absolute;
    top: 0;
    left: 560px;
    width: 600px;
    height: 400px;
    z-index: 2;
}

.aboutOverlapReverseImg1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aboutOverlapReverseImg2 {
    position: absolute;
    top: 200px;
    left: 0;
    width: 600px;
    height: 400px;
    z-index: 1;
}

.aboutOverlapReverseImg2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aboutOverlapReverseText2 {
    position: absolute;
    top: 480px;
    left: 680px;
    width: 360px;
}

.aboutOverlapImgLg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aboutOverlapHeadingLg {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.64px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.aboutOverlapParaLg {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

/* 2000s Growth & Recognition Grid */
.about2000Heading {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.about2000Para {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.about2000Grid {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1.5fr 1fr 1.5fr;
    gap: 24px;
    align-items: start;
}

.about2000LogoCell {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.about2000Logo {
    width: 160px;
    height: auto;
    display: block;
    margin-bottom: 80px;
}

.about2000Row2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.about2000ImgWrap {
    width: 100%;
    height: 340px;
    overflow: hidden;
}

.about2000ImgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about2000ImgSmall {
    height: 240px;
}

.about2000RightEntry {
    margin-bottom: 80px;
}

.about2000RightEntry:last-child {
    margin-bottom: 0;
}

.about2000HeadingWithArrow {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    padding-left: 0;
}

.about2000Arrow {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
    position: absolute;
    left: -36px;
    top: 50%;
    transform: translateY(-50%);
}

.about2000Row3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

/* 2010s Expansion & Excellence - Overlapping Layout */
.about2010Section {
    position: relative;
    width: 1440px;
    max-width: 100%;
    height: 520px;
    margin: 0 auto;
}

.about2010Img1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 520px;
    height: 320px;
    z-index: 1;
}

.about2010Img1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about2010Text1 {
    position: absolute;
    top: 64px;
    left: 600px;
    width: 440px;
}

.about2010Img2 {
    position: absolute;
    top: 200px;
    left: 480px;
    width: 520px;
    height: 320px;
    z-index: 2;
}

.about2010Img2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about2010Text2 {
    position: absolute;
    top: 314px;
    left: 1080px;
    width: 360px;
}

/* 2017 Next Generation Leadership */
.about2017Section {
    display: flex;
    gap: 120px;
    align-items: flex-start;
    justify-content: center;
}

.about2017Img {
    width: 400px;
    height: 533px;
    flex-shrink: 0;
}

.about2017Img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about2017TextCol {
    width: 360px;
    flex-shrink: 0;
    padding-top: 60px;
}

.about2017Entry {
    margin-bottom: 48px;
}

.about2017Entry:last-child {
    margin-bottom: 0;
}

/* 2019 Overlapping Layout */
.about2019Section {
    position: relative;
    width: 1440px;
    max-width: 100%;
    height: 520px;
    margin: 0 auto;
    margin-top: 120px;
}

.about2019Year {
    position: absolute;
    top: 80px;
    left: 26%;
}

.about2019Img1 {
    position: absolute;
    top: 0;
    left: 41%;
    width: 36%;
    height: 320px;
    z-index: 2;
}

.about2019Img1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about2019Text1 {
    position: absolute;
    top: 48px;
    left: 78%;
    width: 21%;
}

.about2019Img2 {
    position: absolute;
    top: 200px;
    left: 8%;
    width: 36%;
    height: 320px;
    z-index: 1;
}

.about2019Img2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about2019Text2 {
    position: absolute;
    top: 370px;
    left: 46%;
    width: 28%;
}

/* 2020s Modern Era */
.about2020Section {
    display: flex;
    gap: 120px;
    align-items: flex-start;
    justify-content: center;
}

.about2020Img {
    width: 600px;
    height: 480px;
    flex-shrink: 0;
}

.about2020Img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.about2020TextCol {
    flex-shrink: 0;
    max-width: 480px;
    margin-top: 99.5px;
}

.aboutTimelineImgWrap {
    position: relative;
    padding-top: 65%;
    overflow: hidden;
}

.aboutTimelineImgWrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aboutLogoImg {
    max-width: 160px;
    height: auto;
    display: block;
}

/* Meet The CBC Family - Background Section */
.aboutTeamBgSection {
    height: 544px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aboutTeamBgHeading {
    color: #FFF;
    font-family: "Cinzel";
    font-size: 64px;
    font-weight: 400;
    line-height: 80px;
    text-align: center;
    text-transform: capitalize;
}

.aboutTeamLine {
    width: 1px;
    height: 80px;
    background-color: #fff;
    margin: 0 auto;
    position: relative;
    z-index: 3;
    top: -40px;
}

/* Team Dark Section (charcoal bg) */
.aboutTeamDarkSection {
    background-color: #262626;
    padding: 0 0 120px;
}

.aboutTeamDesc {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    text-align: center;
}

.aboutTeamGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    justify-content: center;
    max-width: 1520px;
    margin: 0 auto;
    margin-bottom: 80px;
}

.aboutTeamCardNew {
    width: 100%;
    cursor: pointer;
}

.aboutTeamImgNew {
    width: 100%;
    height: 427px;
    overflow: hidden;
}

.aboutTeamImgNew img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aboutTeamName {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 4px;
}

.aboutTeamRole {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
    margin-top: 16px;
}

/* Floorplan 4 - Parallax */
.aboutFloorplan4 {
    height: 600px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Join + What Makes Different - Overlapping Layout */
.aboutJoinOverlapSection {
    position: relative;
    width: 1520px;
    max-width: 100%;
    height: 840px;
    margin: 0 auto;
    margin-top: 200px;
}

.aboutJoinImg1 {
    position: absolute;
    top: 0;
    left: 120px;
    width: 680px;
    height: 480px;
    z-index: 1;
}

.aboutJoinImg1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aboutJoinDiffText {
    position: absolute;
    top: 0;
    left: 920px;
    width: 640px;
}

.aboutJoinList {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding-left: 20px;
    margin-top: 40px;
}

.aboutJoinList li {
    margin-bottom: 8px;
}

.aboutJoinImg2 {
    position: absolute;
    top: 360px;
    left: 760px;
    width: 680px;
    height: 480px;
    z-index: 2;
}

.aboutJoinImg2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aboutJoinFamilyText {
    position: absolute;
    top: 558px;
    left: 40px;
    width: 640px;
}

.aboutJoinHeading {
    color: #FFF;
    font-family: "Cinzel";
    font-size: 64px;
    font-weight: 400;
    line-height: 64px;
    margin-bottom: 40px;
}

.aboutJoinPara {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 40px;
}

.aboutJoinBtn {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-decoration: underline;
    text-transform: uppercase;
}

.aboutJoinBtn:hover {
    color: #FFF;
    opacity: 0.8;
}

/* Unique Modal Styles for Team Members */
.aboutMemberModal .modal-dialog {
    max-width: 900px;
}

.aboutMemberModal .modal-content {
    border-radius: 0;
    border: none;
}

.aboutMemberModalRow {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.aboutMemberModalImgCol {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0;
}

.aboutMemberModalImgCol img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    display: block;
    min-height: 500px;
}

.aboutMemberModalTextCol {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #fff;
}

.aboutMemberModalName {
    color: #000;
    font-family: "Cinzel", serif;
    font-size: 48px;
    font-weight: 400;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.aboutMemberModalRole {
    color: #262626;
    font-family: "Manrope", sans-serif;
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 40px;
}

.aboutMemberModalDesc p {
    color: #262626;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 24px;
}

.aboutMemberModalCloseBtn {
    color: #009EDD;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.1em;
    margin-top: 16px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    display: inline-block;
}

.aboutMemberModalCloseBtn:hover {
    color: #007bb5;
    text-decoration: none;
}

/* about page css ends here */

/* ================================================ */
/* CBC Experience Page Styling Starts Here          */
/* ================================================ */
.cbcExpHeroSection {
    position: relative;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cbcExpHeroImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbcExpSection {
    padding: 0;
}

.cbcExpRow {
    min-height: 520px;
    column-gap: 120px;
    margin-left: 0;
    margin-right: 0;
}

.cbcExpRow>[class*="col-"] {
    flex: 0 0 calc(50% - 60px);
    max-width: calc(50% - 60px);
    padding-left: 0;
    padding-right: 0;
}

.cbcExpTextWrap {
    max-width: 600px;
}

.cbcExpImgWrap {
    position: relative;
    padding-top: 81.25%;
    overflow: hidden;
    max-width: 640px;
    margin: 0 auto;
}

.cbcExpImgWrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cbcExpImgTall {
    padding-top: 140.625%;
}

.cbcExpSectionGap {
    padding-top: 80px;
}

.cbcExpSectionGap2 {
    padding-top: 120px;
}

.cbcExpBtnWrap {
    margin-top: 48px;
}

/* CBC Experience Page Styling Ends Here */

/* ================================================ */
/* Blog & Blog Post Page Styling Starts Here        */
/* ================================================ */
.blogHeroSection,
.eventsHeroSection {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.blogHeroImg,
.eventsHeroImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blogFilterSection {
    background-color: #000;
    padding: 0;
    height: 80px;
    display: flex;
    align-items: center;
}

.blogFilterTabs {
    gap: 78px;
    justify-content: center;
    width: 100%;
}

.blogFilterTab {
    color: #fff;
    font-family: "Cinzel";
    font-size: 20px;
    font-weight: 400;
    line-height: 64px;
    text-decoration: none;
    text-transform: uppercase;
    padding-bottom: 0;
    letter-spacing: 0.1em;
}

.blogFilterTab.active {
    font-weight: 400;
    border-bottom: none;
}

.blogFilterTab:hover {
    color: #fff;
    text-decoration: none;
}

.blogCardsSection,
.eventsGridSection {
    padding: 64px 0 80px;
}

.eventsRow {
    margin-bottom: 64px;
}

.eventsRow:last-child {
    margin-bottom: 0;
}

.eventDate {
    color: #000;
    font-family: "Cinzel";
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.eventDesc {
    color: #000;
    font-family: "Manrope";
    font-size: 32px;
    font-weight: 400;
    line-height: 36px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 0;
}

.blogCard,
.eventCard {
    display: block;
    text-decoration: none;
    color: #000;
}

.blogCard:hover,
.eventCard:hover {
    text-decoration: none;
    color: #000;
}

.blogCardImgWrap,
.eventCardImgWrap {
    position: relative;
    height: 240px;
    overflow: hidden;
    margin-bottom: 16px;
    background-color: #C4C4C4;
}

.blogCardImgWrap img,
.eventCardImgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.blogCardContent {
    padding-top: 0;
}

.blogCardCategory {
    color: #000;
    font-family: "Cinzel";
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.blogCardTitle {
    color: #000;
    font-family: "Manrope";
    font-size: 28px;
    font-weight: 400;
    line-height: 32px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-bottom: 24px;

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blogCardExcerpt {
    margin-bottom: 24px;
}

.blogReadMore {
    color: #009EDD;
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 700;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: underline;
}

.blogRow {
    margin-bottom: 40px;
    margin-left: -32px;
    margin-right: -32px;
}

.blogRow>.col-lg-4,
.blogRow>.col-md-6,
.blogRow>[class*="col-"] {
    padding-left: 32px;
    padding-right: 32px;
}

.blogRow:last-child {
    margin-bottom: 0;
}

.blogCard {
    display: block;
    text-decoration: none;
    color: #000;
}

.blogCard:hover {
    text-decoration: none;
    color: #000;
}

/* Blog Post Page */
.blogPostSection {
    padding: 64px 0 40px;
}

.blogPostImgWrap {
    max-width: 1085px;
    margin: 0 auto;
    height: 620px;
    overflow: hidden;
}

.blogPostImgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blogPostBody {
    max-width: 1085px;
    margin: 0 auto;
    padding: 0 15px;
    padding-top: 40px;
}

.blogPostTitle {
    color: #000;
    font-family: "Cinzel";
    font-size: 48px;
    font-weight: 400;
    line-height: 56px;
    margin-bottom: 24px;
}

.blogPostDate {
    color: #000;
    font-family: "Cinzel";
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 24px;
}

.blogSimilarSection {
    padding: 0 0 80px;
}

.blogSimilarSeparator {
    height: 1px;
    background-color: #D9D9D9;
    margin-bottom: 64px;
}

.blogSimilarHeading {
    text-align: center;
    margin-bottom: 48px;
}

/* Blog & Blog Post Page Styling Ends Here */

/* ================================================ */
/* Events Details Page Styling Starts Here          */
/* ================================================ */
.eventsSeparator {
    width: 100%;
    height: 1px;
    background-color: #D9D9D9;
}

.edHeroBanner {
    position: relative;
    padding-top: 42%;
    min-height: 300px;
}

.edHeroBannerImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edHeroOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #262626;
    opacity: 0.6;
}

.edTitleBar {
    width: 100%;
    background-color: #262626;
    padding: 26px 0;
}

.edEventTitle {
    color: #fff;
    font-family: "Cinzel";
    font-size: 48px;
    font-weight: 400;
    line-height: 56px;
    margin-bottom: 0;
}

.edRegisterBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #009EDD;
    color: #fff;
    font-family: "Manrope";
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 16px 36px;
    text-decoration: none;
    line-height: 16px;
}

.edRegisterBtn:hover {
    color: #fff;
    text-decoration: none;
    background-color: #0088c2;
}

.edDescSection {
    padding: 64px 0 72px;
}

.edDetailsCards {
    padding: 72px 0 80px;
    background-color: #F7F7F7;
}

.edCard {
    background: #fff;
    border: 1px solid #D9D9D9;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    padding: 32px;
    min-height: 200px;
}

.edCardFull {
    height: auto;
}

.edCardIcon {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.edCardTitle {
    color: #000;
    font-family: "Manrope";
    font-size: 22px;
    font-weight: 400;
    line-height: 32px;
}

.edGalleryItem {
    height: 360px;
    overflow: hidden;
}

.edGalleryItem img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.edBrandsSection {
    padding: 40px 0;
}

.edBrandsRow {
    gap: 120px;
}

.edBrandLogo {
    height: 60px;
    width: 200px;
    object-fit: contain;
}

.edSeparator {
    height: 1px;
    background-color: #D9D9D9;
}

.edInventorySection {
    padding: 80px 0;
}

.edInventoryImgWrap {
    height: 320px;
    overflow: hidden;
}

.edInventoryImgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edRegSection {
    padding: 100px 0;
    background-color: #E6F5FC;
}

.edRegImgWrap {
    height: 600px;
    max-width: 720px;
    overflow: hidden;
    border-radius: 8px;
    background-color: #D9D9D9;
}

.edRegImgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.edRegFormWrap {
    max-width: 480px;
}

.edRegFormWrap .form-group {
    margin-bottom: 12px;
}

.edFormField {
    background: #fff;
    border: 1px solid #D9D9D9;
    border-radius: 0;
    padding: 12px 16px;
    font-family: "Manrope";
    font-size: 16px;
    height: 48px;
}

.edFormField:focus {
    box-shadow: none;
    border-color: #009EDD;
}

/* ================================================ */
/* Certified Techs & Parts Sections                 */
/* ================================================ */
.certifiedTechsSection {
    padding: 100px 0;
}

.certifiedTechsImgWrap,
.partsImgWrap {
    position: relative;
    width: 100%;
    height: 560px;
    overflow: hidden;
}

.certifiedTechsImgWrap img,
.partsImgWrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.certifiedTechsTextWrap,
.partsTextWrap {
    padding-left: 80px;
    margin-top: 24px;
}

.certifiedTechsList {
    list-style: disc;
    padding-left: 20px;
    margin: 0;
}

.certifiedTechsList li {
    margin-bottom: 8px;
}

.partsSection {
    padding: 0 0 100px;
    margin-top: 80px;
}

.partsTextWrap {
    padding-left: 0;
    padding-right: 80px;
}

/* ================================================ */
/* Apply Today Link                                 */
/* ================================================ */
.applyTodayLink {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: 0.1em;
    text-decoration-line: underline;
    text-transform: uppercase;
    color: #000000;
    display: inline-block;
    margin-top: 24px;
}

.applyTodayLink:hover {
    color: #000000;
}

/* ================================================ */
/* Service Pricing Disclosure Section               */
/* ================================================ */
.servicePricingDisclosure {
    background: #FFFFFF;
    border-top: 1px solid #D9D9D9;
    padding: 60px 0;

}

.servicePricingDisclosure .programHeading {
    margin-bottom: 0;
}

/* ================================================ */
/* 404 Error Page & Thank You Page                  */
/* ================================================ */
.errorPageSection,
.thankYouPageSection {
    position: relative;
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    overflow: hidden;
}

.errorPageBgImg,
.thankYouPageBgImg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

.errorPageOverlay,
.thankYouPageOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(38, 38, 38, 0.75);
    z-index: 2;
}

.errorPageInner,
.thankYouPageInner {
    position: relative;
    z-index: 3;
    max-width: 680px;
    width: 100%;
    text-align: center;
}

.errorPageCode {
    color: #009EDD;
    font-family: "Cinzel";
    font-size: 160px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 8px;
}

.errorPageLine,
.thankYouLine {
    width: 1px;
    height: 60px;
    background-color: #fff;
    margin: 40px auto;
}

.errorPageHeading,
.thankYouHeading {
    color: #FFF;
    font-family: "Cinzel";
    font-size: 48px;
    font-weight: 400;
    line-height: 56px;
    text-transform: capitalize;
    margin-bottom: 24px;
}

.errorPageText,
.thankYouText {
    color: #FFF;
    font-family: "Manrope", sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    margin-bottom: 48px;
    opacity: 0.85;
}

.errorPageBtns,
.thankYouBtns {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.errorPageBlueBtn,
.thankYouBlueBtn {
    color: #fff;
    border-color: #009EDD;
}

.errorPageBlueBtn:hover,
.thankYouBlueBtn:hover {
    color: #fff;
}

.thankYouIconWrap {
    margin-bottom: 32px;
}

.thankYouIconWrap svg {
    width: 64px;
    height: 64px;
}

/* Yamaha Benefits Section Custom CSS */
.sky-color {
    padding: 80px 0;
    background-color: #E6F5FC;
}

.yamaha-benefits-sec {
    padding: 80px 0 0 0;
}


.yb-item {
    text-align: center;
    padding: 0 15px;
}

.yb-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    height: 60px;
}

.yb-icon svg {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.yb-heading {
    color: #000;
    text-align: center;
    font-family: Manrope;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 1px;
}
.pm-img-wrap {
    position: relative;
    padding-top: 59.5%;
    width: 100%;
    margin-bottom: 24px;
}

.pm-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pm-model-title {
    color: #fff;
    font-family: Manrope, sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.pm-list {
    padding-left: 20px;
    margin-bottom: 1rem;
}

.pm-list li {
    color: var(--wt, #FFF);
    font-family: Manrope;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 8px;
}

/* Barletta CTA Section Custom CSS */
.barletta-cta-section {
    position: relative;
    background-image: url('https://cdn.mdsbrand.com/mean-colorado-boat-center/assets/images/brands/barletta/barletta-13.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 120px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.barletta-cta-box {
    background-color: rgba(255, 255, 255, 0.95);
    max-width: 960px;
    width: 100%;
    padding: 80px 40px;
    text-align: center;
}

.barletta-cta-title {
    color: var(--Blk, #000);
    text-align: center;
    font-family: Cinzel;
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    margin-bottom: 24px;
}

.barletta-cta-text {
    color: #000;
    font-family: "Manrope", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin-bottom: 16px;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.field-error {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}

.error_field {
    outline: 1px solid red !important;
    border-color: red;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

#notify_message {
    /* padding: 10px; */
    text-align: center;
    font-size: 20px;
    font-weight: 500;
    font-family: trade-gothic-next;
    max-height: 80px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #0e0d0d;
    margin-bottom: 0;
    z-index: 10;
}

/* Full screen overlay */
#loaderOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    /* hidden by default */
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Spinner */
.spinner {
    width: 60px;
    height: 60px;
    border: 6px solid #f3f3f3;
    border-top: 6px solid #007bff;
    /* Bootstrap blue */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Barletta Popular Models Section Custom CSS */
.pm-section {
    background-color: var(--charcoal-bg);
    padding: 80px 0;
}

.pm-title {
    color: var(--wt, #FFF);
    text-align: center;
    font-family: "Cinzel";
    font-size: 64px;
    font-style: normal;
    font-weight: 400;
    line-height: 64px;
    margin-bottom: 20px;
}
.section-title-wrapper{
    padding: 48px 20px 40px 20px;
}
/* Events Details Page Styling Ends Here */

@media (max-width: 1600px) {
    .proshopOneStopHeading {
        font-size: 40px;
        line-height: 50px;
        margin-bottom: 28px;
    }
    .proshopResourceLabel {
        font-size: 30px;
        line-height: 37px;
    }
    .proshopVantageHeading {
        font-size: 47px;
        line-height: 55px;
    }
    .proshopStoreItemLabel {
        font-size: 25px;
        line-height: 30px;
    }
    .blogFilterTabs {
        gap: 25px;
    }
    .mainHeading {
        font-size: 50px;
        line-height: 60px;
    }
    .brandLogoWrapper {
        max-width: 85%;
        bottom: 10%;
    }
}

@media (max-width: 1440px) {
    .csStoriesSection {
        padding-top: 50px;
    }
    .sybDirectionContent {
        padding-left: 50px;
    }
    .sybDirectionContentLeft {
        padding-right: 50px;
    }
    .sybStepCard {
        padding-left: 30px;
    }
    .sybStepTitle {
        font-size: 25px;
        line-height: 29px;
        margin-bottom: 24px;
    }
    .sybStepNumber {
        font-size: 60px;
        margin-bottom: 6px;
    }
    .blogTitle {
        font-size: 25px;
    }
    .blogFilterTab {
        font-size: 18px;
    }
    .aboutEraTitle {
        font-size: 40px;
        line-height: 47px;
    }
    .aboutEraYear {
        font-size: 50px;
        line-height: 60px;
    }
    .smallHeading {
        font-size: 25px;
        line-height: 30px;
    }
    .mainWhiteHeading {
        font-size: 50px;
        line-height: 56px;
    }
    .pageTitleHeading {
        font-size: 50px;
        line-height: 60px;
    }
    .sybHeroSubtitle {
        margin-top: 20px !important;
    }
    .mainHeading {
        font-size: 35px;
        line-height: 45px;
    }
    .sybNextStepLabel {
        font-size: 25px;
        line-height: 30px;
    }
    .programHeading {
        font-size: 27px;
        margin-bottom: 15px;
    }

    .footerSubscribeForm {
        justify-content: center;
        flex-direction: column;
        align-items: center;
        border-bottom: none;
    }

    .footerSubscribeInput {
        border-bottom: 1px solid #000;
        padding-bottom: 8px;
    }

    .menuLogo {
        gap: 65px;
    }

    /* About Page - 1440px */
    .aboutEraRow {
        gap: 60px;
    }

    /* Home Page - 1440px */
    .customerSays {
        padding: 100px 150px;
    }

    .latestArrivalSection {
        padding: 100px 20px;
    }

    .aboutEraTextCol {
        flex: 1 1 380px;
    }

    .aboutEraImgCol {
        flex: 1 1 400px;
    }

    .aboutEraImg {
        width: 100%;
    }

    .aboutOverlapSection {
        max-width: 100%;
    }

    .aboutOverlapTop {
        gap: 3%;
    }

    .aboutOverlapTop .aboutOverlapImg {
        width: 38vw;
        max-width: 520px;
    }

    .aboutOverlapTop .aboutOverlapText {
        width: 20%;
        min-width: 200px;
    }

    .aboutOverlapBottom {
        left: 34%;
        gap: 3%;
    }

    .aboutOverlapBottom .aboutOverlapImg {
        width: 38vw;
        max-width: 520px;
    }

    .aboutOverlapBottom .aboutOverlapText {
        width: 20%;
        min-width: 200px;
    }

    .aboutOverlapReverse {
        max-width: 100%;
    }

    .aboutOverlapReverseText1 {
        left: 10%;
        width: 30%;
    }

    .aboutOverlapReverseImg1 {
        left: auto;
        right: 0;
        width: 50%;
    }

    .aboutOverlapReverseImg2 {
        width: 50%;
    }

    .aboutOverlapReverseText2 {
        left: auto;
        right: 3%;
        width: 40%;
    }

    .about2010Section {
        max-width: 100%;
    }

    .about2010Img1 {
        width: 36%;
    }

    .about2010Text1 {
        left: 40%;
        width: 30%;
    }

    .about2010Img2 {
        left: 33%;
        width: 36%;
    }

    .about2010Text2 {
        left: 73%;
        width: 25%;
    }

    .about2017Section {
        gap: 60px;
    }

    .about2017Img {
        flex: 1 1 auto;
        width: auto;
        max-width: 500px;
    }

    .about2017TextCol {
        flex: 1 1 auto;
        width: auto;
        max-width: 440px;
    }

    .about2019Section {
        max-width: 100%;
    }

    .about2020Section {
        gap: 60px;
        justify-content: flex-start;
    }

    .about2020Img {
        flex: 0 0 45%;
        width: 45%;
        max-width: 600px;
    }

    .about2020TextCol {
        flex: 1 1 auto;
        max-width: 480px;
    }

    .aboutJoinOverlapSection {
        max-width: 100%;
    }

    .aboutJoinImg1 {
        left: 8%;
        width: 44%;
    }

    .aboutJoinDiffText {
        left: auto;
        right: 3%;
        width: 42%;
    }

    .aboutJoinImg2 {
        left: auto;
        right: 3%;
        width: 44%;
    }

    .aboutJoinFamilyText {
        left: 3%;
        width: 42%;
    }

    .aboutJoinHeading {
        font-size: 52px;
        line-height: 56px;
    }

    .secondaryHeaderHeading {
        font-size: 53px;
        line-height: 59px;
    }
    .certifiedTechsSection {
        padding: 40px 0;
    }
    .blogCardTitle {
        font-size: 20px;
        line-height: 25px;
    }
    .blogCardCategory {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 8px;
    }
}

@media (max-width: 1300px) {
    .serviceCardsGrid {
        gap: 25px;
    }
    .service-item {
        width: calc(100% / 4 - 19px);
    }
    .blogFilterTab {
        font-size: 16px;
    }
    .blogFilterTabs {
        gap: 13px;
    }
    .singleBrand {
        padding-top: 72%;

    }

    .brandLogoWrapper {
        left: 5%;
        gap: 13px;
    }

    .brand-logo-wrapper {
        display: flex;
        align-items: center;
        flex-direction: unset;
        gap: 16px;
        justify-content: flex-start;
    }
}

@media (max-width: 1200px) {
    .edEventTitle {
        font-size: 41px;
        line-height: 48px;
        margin-bottom: 13px;
    }
    .service-item {
        width: calc(100% / 3 - 17px);
    }
    .servicelogo {
        max-width: 150px;
    }
    .certifiedTechsTextWrap, .partsTextWrap {
        padding-left: 0;
    }
    .megaMenuInner {
        padding: 30px 20px;
        gap: 16px;
    }

    .megaMenuLeft {
        width: 160px;
    }

    .megaMenuRight {
        width: 180px;
    }

    .megaMenuBoatCard {
        height: 320px;
    }

    .megaMenuLinkLg {
        font-size: 18px;
        line-height: 28px;
    }

    .megaMenuLinkSm {
        font-size: 14px;
        line-height: 20px;
    }

    .megaMenuQuizBtn {
        width: 180px;
        height: 40px;
        font-size: 13px;
    }

    .pr-40px {
        padding-right: 15px !important;
        padding-left: 15px !important;
        margin-bottom: 40px;
    }

    .footer {
        padding-top: 40px;
    }

    .menuLogo {
        gap: 32px;
    }

    .menuItemWrapper {
        gap: 36px;
    }

    .menuItemList {
        gap: 24px;
    }

    /* About Page - 1200px */
    .secondaryHeaderHeading {
        font-size: 56px;
        line-height: 56px;
    }

    /* Home Page - 1200px */
    .customerSays {
        padding: 80px 100px;
    }

    .latestArrivalSection {
        padding: 80px 20px;
    }

    .familySection {
        min-height: 800px;
    }

    .familyImg {
        min-height: 800px;
    }

    .bannerLogoWrapper {
        width: 80%;
    }

    /* Service Page - 1200px */

    .textContentWrapper {
        padding-right: 40px;
    }

    .advantageProgramSection {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .requestServiceSection {
        margin-top: 80px;
    }

    .mainWhiteHeading {
        font-size: 48px;
        line-height: 52px;
    }

    .applyTodayLink {
        font-size: 14px;
        margin-top: 20px;
    }

    .aboutEraTitle {
        font-size: 56px;
        line-height: 56px;
    }

    .aboutEraYear {
        font-size: 64px;
        line-height: 64px;
    }

    .aboutEraRow {
        gap: 50px;
    }

    .aboutEraTextCol {
        flex: 1 1 320px;
    }

    .aboutEraImgCol {
        flex: 1 1 350px;
    }

    .aboutEraImg {
        width: 100%;
        height: 400px;
    }

    .aboutOverlapTop .aboutOverlapImg {
        width: 36vw;
        height: 280px;
    }

    .aboutOverlapBottom .aboutOverlapImg {
        width: 36vw;
        height: 280px;
    }

    .aboutOverlapReverseImg1 {
        height: 340px;
    }

    .aboutOverlapReverseImg2 {
        height: 340px;
        top: 180px;
    }

    .aboutOverlapReverse {
        height: 620px;
    }

    .aboutOverlapReverseText2 {
        top: 420px;
    }

    .about2010Section {
        height: 480px;
    }

    .about2010Img1 {
        height: 280px;
    }

    .about2010Img2 {
        height: 280px;
    }

    .about2017Section {
        gap: 50px;
    }

    .about2017Img {
        flex: 1 1 auto;
        max-width: 400px;
        height: 450px;
    }

    .about2017TextCol {
        flex: 1 1 auto;
        max-width: 360px;
    }

    .about2019Section {
        height: 480px;
    }

    .about2019Img1 {
        height: 280px;
    }

    .about2019Img2 {
        height: 280px;
    }

    .about2020Section {
        gap: 50px;
        justify-content: flex-start;
    }

    .about2020Img {
        flex: 0 0 42%;
        width: 42%;
        max-width: 520px;
        height: 400px;
    }

    .about2020TextCol {
        flex: 1 1 auto;
        max-width: 400px;
    }

    .aboutTeamBgHeading {
        font-size: 56px;
        line-height: 64px;
    }

    .aboutTeamName {
        font-size: 28px;
        line-height: 32px;
    }

    .aboutJoinHeading {
        font-size: 48px;
        line-height: 52px;
    }

    .aboutJoinOverlapSection {
        height: 760px;
    }

    .aboutJoinImg1 {
        height: 420px;
    }

    .aboutJoinImg2 {
        height: 420px;
        top: 320px;
    }

    .aboutJoinFamilyText {
        top: 500px;
    }

    .founderPara {
        font-size: 20px;
        line-height: 30px;
    }

    .aboutTeamDesc {
        font-size: 20px;
        line-height: 30px;
    }
}


@media (max-width: 1024px) {
    .borderRightFooter {
        border-right: none;
    }

    .menuLogo {
        gap: 25px;
    }

    .menuItemWrapper {
        gap: 20px;
    }

    .paraMainHeading {
        font-size: 18px;
    }

    .quoteHeading {
        font-size: 18px;
    }

    .blueBtn,
    .whiteBtn {
        font-size: 12px;
    }

    .familySection {
        flex-direction: column;
    }

    .familyImg {
        min-height: 400px;
        height: 400px;
    }

    .familyOverlay {
        position: static;
        width: 100%;
        padding: 50px 6%;
    }

    /* About Page - 1024px */
    .secondaryHeaderHeading {
        font-size: 48px;
        line-height: 52px;
    }

    /* Home Page - 1024px */
    .customerSays {
        padding: 60px 80px;
    }

    .latestArrivalSection {
        padding: 60px 20px;
    }

    .familySection {
        flex-direction: column;
        min-height: auto;
    }

    .familyImg {
        min-height: 400px;
        height: 400px;
    }

    .familyOverlay {
        position: static;
        width: 100%;
        padding: 50px 6%;
    }

    .bannerLogoWrapper {
        width: 85%;
    }

    /* Service Page - 1024px */

    .textContentWrapper {
        padding-right: 20px;
    }

    .advantageProgramSection {
        padding-top: 60px;
        padding-bottom: 60px;
        margin-top: 60px;
        margin-bottom: 60px;
    }

    .cardProgram {
        padding-left: 24px;
    }

    .requestServiceSection {
        margin-top: 60px;
    }

    .requestContent {
        padding-left: 5%;
    }

    .mainWhiteHeading {
        font-size: 42px;
        line-height: 46px;
    }

    .programHeading {
        font-size: 26px;
        line-height: 30px;
    }

    .servicePricingDisclosure {
        padding: 50px 0;
    }

    .aboutEraTitle {
        font-size: 48px;
        line-height: 48px;
    }

    .aboutEraYear {
        font-size: 56px;
        line-height: 56px;
    }

    .aboutEraRow {
        gap: 40px;
    }

    .aboutEraImg {
        height: 360px;
    }

    .aboutOverlapSection {
        height: auto;
        position: static;
    }

    .aboutOverlapTop,
    .aboutOverlapBottom {
        position: static;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    .aboutOverlapTop .aboutOverlapImg,
    .aboutOverlapBottom .aboutOverlapImg {
        width: 100%;
        max-width: 100%;
        height: 300px;
    }

    .aboutOverlapTop .aboutOverlapText,
    .aboutOverlapBottom .aboutOverlapText {
        width: 100%;
        min-width: 0;
    }

    .aboutOverlapHeading {
        font-size: 28px;
        line-height: 32px;
    }

    .aboutOverlapReverse {
        height: auto;
        position: static;
    }

    .aboutOverlapReverseText1,
    .aboutOverlapReverseText2,
    .aboutOverlapReverseImg1,
    .aboutOverlapReverseImg2 {
        position: static;
        width: 100%;
        max-width: 100%;
    }

    .aboutOverlapReverseImg1,
    .aboutOverlapReverseImg2 {
        height: 300px;
        margin-bottom: 20px;
    }

    .aboutOverlapReverseText1,
    .aboutOverlapReverseText2 {
        margin-bottom: 40px;
        text-align: center;
    }

    .aboutOverlapHeadingLg {
        font-size: 28px;
        line-height: 32px;
    }

    .about2000Grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about2000Grid .about2000Cell {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .about2000LogoCell {
        justify-content: flex-start;
    }

    .about2000Row2 {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .about2000Row2Left {
        grid-column: 1 / -1;
    }

    .about2000Row3 {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
    }

    .about2000Row3Left {
        grid-column: 1 / -1;
    }

    .about2010Section {
        position: static;
        width: 100%;
        height: auto;
    }

    .about2010Img1,
    .about2010Text1,
    .about2010Img2,
    .about2010Text2 {
        position: static;
        width: 100%;
    }

    .about2010Img1,
    .about2010Img2 {
        height: auto;
        margin-bottom: 24px;
    }

    .about2010Text1 {
        margin-bottom: 40px;
    }

    .about2010Text2 {
        margin-top: 24px;
    }

    .about2017Section {
        flex-direction: column;
        gap: 40px;
    }

    .about2017Img {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 420px;
    }

    .about2017TextCol {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-top: 0;
    }

    .about2019Section {
        position: static;
        width: 100%;
        height: auto;
        right: 0;
        margin-top: 80px;
    }

    .about2019Year,
    .about2019Img1,
    .about2019Text1,
    .about2019Img2,
    .about2019Text2 {
        position: static;
        width: 100%;
        min-width: 0;
    }

    .about2019Img1,
    .about2019Img2 {
        height: 300px;
        margin-bottom: 24px;
    }

    .about2019Year {
        margin-bottom: 24px;
    }

    .about2019Text1 {
        margin-bottom: 40px;
    }

    .about2019Text2 {
        margin-top: 24px;
    }

    .about2020Section {
        flex-direction: column;
        gap: 40px;
    }

    .about2020Img {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 380px;
    }

    .about2020TextCol {
        max-width: 100%;
        margin-top: 0;
    }

    .aboutTeamGrid {
        gap: 32px;
    }

    .aboutJoinOverlapSection {
        position: static;
        width: 100%;
        height: auto;
        padding: 80px 5%;
        margin-top: 120px;
    }

    .aboutJoinImg1,
    .aboutJoinImg2,
    .aboutJoinDiffText,
    .aboutJoinFamilyText {
        position: static;
        width: 100%;
        max-width: 100%;
    }

    .aboutJoinImg1,
    .aboutJoinImg2 {
        height: 360px;
        margin-bottom: 40px;
    }

    .aboutJoinDiffText {
        margin-bottom: 40px;
    }

    .aboutJoinFamilyText {
        margin-top: 40px;
    }

    .aboutJoinHeading {
        font-size: 42px;
        line-height: 46px;
    }

    .aboutTeamDesc {
        margin-bottom: 80px !important;
    }

    .founderPara {
        font-size: 20px;
        line-height: 30px;
    }

    .whiteColorTag {
        font-size: 18px;
    }

    .aboutOriginsPhoto,
    .about2000ImgWrap,
    .about2000ImgSmall,
    .about2017Img,
    .about2019Img1,
    .about2019Img2,
    .about2020Img,
    .aboutJoinImg1,
    .aboutJoinImg2,
    .aboutOverlapTop .aboutOverlapImg,
    .aboutOverlapBottom .aboutOverlapImg,
    .aboutOverlapReverseImg1,
    .aboutOverlapReverseImg2,
    .aboutTeamImgNew {
        height: auto !important;
        overflow: visible;
    }

    .aboutOriginsPhoto img,
    .about2000ImgWrap img,
    .about2017Img img,
    .about2019Img1 img,
    .about2019Img2 img,
    .about2020Img img,
    .aboutJoinImg1 img,
    .aboutJoinImg2 img,
    .aboutOverlapTop .aboutOverlapImg img,
    .aboutOverlapBottom .aboutOverlapImg img,
    .aboutOverlapReverseImg1 img,
    .aboutOverlapReverseImg2 img,
    .aboutOverlapImgLg img,
    .about2010Img1 img,
    .about2010Img2 img,
    .aboutTeamImgNew img {
        height: auto !important;
        object-fit: contain !important;
    }

}

@media (max-width: 991px) {
    .service-item {
        width: calc(100% / 2 - 13px);
    }
    .proshop-sec{
        padding-top: 0 !important;
    }
    .cbcExpSectionGap2 {
        padding-top: 50px;
    }
    .blogFilterSection {
        height: auto;
    }
    .blogFilterTabs {
        gap: 0;
        flex-direction: column;
        padding: 20px;
    }
    .blogFilterTab {
        line-height: 40px;
        text-align: center;
    }
    .brandHeroImageWraplg {
        min-height: unset
    }
    .availableInventorySection {
        margin: 0 0 80px 0;
    }
    .dark-sec {
        padding: 65px 0px;
    }
    .pm-section {
        padding: 50px 0 0 0;
        margin: 50px 0;
    }
    .pageTitleHeading {
        font-size: 43px;
        line-height: 49px;
    }
    .financeBoatLoanImageWrap {
        max-width: 100%;
    }
    .financeBoatLoanTextInnerWrap {
        max-width: 100%;
    }
    .brandHeroSection {
        margin-top: 0;
    }
    .mt-100 {
        margin-top: 50px;
    }
    .light-grey-sec {
        padding: 50px 0;
    }
    .viewLineUpSection {
        margin: 80px 0;
    }
    .hoursBlock {
        margin-bottom: 20px;
    }

    .footerBottom {
        margin-top: 64px;
    }
    .sideMenu {
        top: 57px !important;
        height: calc(100vh - 57px) !important;
        height: calc(100dvh - 57px) !important;
    }

    .sideMenuChevron {
        display: inline-block;
    }

    .sideMenuSubLinks {
        display: none !important;
    }

    .sideMenuSubLinks.open {
        display: flex !important;
    }
    .pm-title {
        font-size: 28px;
        margin-bottom: 20px;
    }
    .barletta-cta-title {
        font-size: 36px;
    }

    .barletta-cta-box {
        padding: 60px 30px;
    }
    .brandHeroImageWrap {
        max-width: 100%;
    }

    .brandHeroTextWrap {
        max-width: 100%;
        margin-top: 40px;
    }

    .reverse-column {
        flex-direction: column-reverse;
    }

    .aboutMemberModalImgCol {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

    .aboutMemberModalTextCol {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 40px;
    }

    .aboutMemberModalImgCol img {
        min-height: unset;
    }

    .aboutMemberModalName {
        font-size: 35px;
    }

    .aboutMemberModalRole {
        font-size: 19px;
        margin-bottom: 20px;
    }

    .megaMenu {
        display: none !important;
    }

    .megaMenuActive {
        display: none !important;
    }

    .quizModal {
        width: 90vw;
        height: 90vh;
    }

    .quizOptionsGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 0 40px;
    }

    .quizQuestion {
        font-size: 24px;
        line-height: 28px;
    }

    .brandCtaAndLogoWrap {
        justify-content: center;
        flex-direction: column-reverse;
    }

    .blogPostTitle {
        font-size: 56px;
        line-height: 60px;
    }

    .brandCtaBarLogoWrap {
        max-width: 140px;
    }
    .partsSection {
        margin-top: 50px;
    }

    .logoServiceWrapper {
        max-width: 200px;
    }

    .footerLogo {
        margin: 0 auto;
    }

    .footerParaWrap {
        margin: 0 auto;
    }

    .desktopHeader {
        display: none;
    }

    .brandCtaBar {
        top: 64px;
    }

    .brandCtaBar.is-fixed {
        top: 64px;
    }

    .mobileHeader {
        display: block;
    }

    /* About Page - 991px */
    .secondaryHeaderHeading {
        font-size: 42px;
        line-height: 46px;
    }

    /* Home Page - 991px */
    .customerSays {
        padding: 60px 60px;
    }

    .latestArrivalSection {
        padding: 60px 15px;
    }

    .bannerLogoWrapper {
        width: 85%;
        gap: 20px;
    }

    .boatTitle {
        font-size: 24px;
        line-height: 28px;
    }

    .boatTag {
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 1.5px;
    }

    /* Service Page - 991px */
    .pageTitleHeading {
        font-size: 56px;
        line-height: 56px;
    }

    .serviceCardContent {
        width: 100%;
    }

    .textContentWrapper {
        padding-right: 15px;
    }

    .advantageProgramSection {
        padding-top: 50px;
        padding-bottom: 50px;
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .headerProgram {
        margin-bottom: 40px;
    }

    .cardProgram {
        padding-left: 20px;
        margin-bottom: 40px;
    }

    .programHeading {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 16px;
        width: 100%;
    }

    .calenderImg {
        margin-bottom: 24px;
    }

    .requestServiceSection {
        margin-top: 50px;
    }

    .requestContent {
        padding-left: 0;
    }

    .pr-40 {
        padding-right: 15px;
    }

    .serviceBrandSection {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .quickWrapper {
        width: 100%;
        gap: 16px;
        margin-bottom: 30px;
    }

    .specificHeight {
        height: calc(100vh - 200px);
    }

    .certifiedTechsSection {
        padding: 60px 0;
    }

    .partsSection {
        padding: 0 0 60px;
    }

    .certifiedTechsImgWrap,
    .partsImgWrap {
        height: 420px;
    }

    .certifiedTechsTextWrap {
        padding-left: 40px;
    }

    .partsTextWrap {
        padding-right: 40px;
    }

    .mainWhiteHeading {
        font-size: 36px;
        line-height: 40px;
    }

    .servicePricingDisclosure {
        padding: 50px 0;
    }

    .applyTodayLink {
        font-size: 14px;
        margin-top: 16px;
    }

    .aboutHistorySection {
        padding: 80px 0;
    }

    .aboutEraBlock {
        margin-bottom: 80px;
    }

    .aboutEraTitle {
        font-size: 42px;
        line-height: 42px;
    }

    .aboutEraYear {
        font-size: 48px;
        line-height: 48px;
    }

    .about2000Heading {
        font-size: 28px;
        line-height: 32px;
    }

    .aboutTeamGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .aboutTeamCardNew {
        width: 100%;
    }

    .aboutTeamName {
        font-size: 24px;
        line-height: 28px;
        margin-top: 24px;
    }

    .aboutTeamRole {
        font-size: 18px;
        line-height: 28px;
        margin-top: 8px;
    }

    .aboutTeamBgSection {
        height: 400px;
    }

    .aboutTeamBgHeading {
        font-size: 48px;
        line-height: 56px;
    }

    .aboutTeamDesc {
        font-size: 18px;
        line-height: 28px;
        margin-bottom: 60px !important;
    }

    .aboutFloorplan4 {
        height: 500px;
    }

    .aboutJoinHeading {
        font-size: 36px;
        line-height: 40px;
    }

    .aboutJoinOverlapSection {
        padding: 60px 5%;
        margin-top: 100px;
    }

    .aboutJoinImg1,
    .aboutJoinImg2 {
        height: 320px;
    }

    .founderPara {
        font-size: 18px;
        line-height: 28px;
    }

    .founderSection {
        padding: 60px 15px 80px;
    }

    .founderInnerWrap {
        padding: 0 15px;
    }

    .aboutOriginsBg {
        height: 450px;
        padding-bottom: 200px;
    }

    .aboutOriginsPhoto {
        height: 450px;
    }

    .aboutOriginsLine {
        margin-top: -220px;
    }

    .aboutOverlapSection.aboutOverlapReverse[style] {
        margin-top: 60px !important;
    }

    .aboutEraBlock .text-center[style*="margin-top: 80px"] {
        margin-top: 40px !important;
        margin-bottom: 40px !important;
    }

    .aboutEraBlock .text-center[style*="margin-bottom: 50px"] {
        margin-bottom: 30px !important;
    }

    .proshopResources,
    .proshopOneStop,
    .proshopWhatsInStore,
    .proshopCoastGuard,
    .proshopAddons,
    .proshopWomenWaves,
    .proshopVisit,
    .proshopContact,
    .proshopFaqs {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .proshopResourcesHeading {
        font-size: 42px;
        line-height: 48px;
        margin-bottom: 10px;
    }

    .proshopResourcesSubtext {
        font-size: 18px;
        text-align: left;
    }

    .proshopResourceLabel {
        font-size: 28px;
        line-height: 32px;
    }

    .proshopOneStopHeading {
        font-size: 42px;
        line-height: 48px;
    }

    .proshopCgHeading {
        font-size: 42px;
        line-height: 48px;
    }

    .proshopCgSubtext {
        font-size: 18px;
    }

    .proshopChecklist {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .proshopChecklistContent {
        padding: 40px 30px;
    }

    .proshopChecklistImgWrapper {
        min-height: 400px;
    }

    .proshopChecklistHeading {
        font-size: 42px;
        line-height: 48px;
    }

    .proshopChecklistItems li {
        font-size: 18px;
        line-height: 28px;
    }

    .proshopVantageContent {
        padding: 40px 30px;
    }

    .proshopVantageImgWrapper {
        min-height: 350px;
    }

    .proshopVantageHeading {
        font-size: 42px;
        line-height: 48px;
    }

    .proshopVantageTagline {
        font-size: 24px;
        line-height: 30px;
    }

    .proshopAddonsHeading {
        font-size: 42px;
        line-height: 48px;
    }

    .proshopAddonLabel {
        font-size: 22px;
        line-height: 28px;
    }

    .proshopVisitHeading {
        font-size: 42px;
        line-height: 48px;
    }

    .proshopContactHeading {
        font-size: 42px;
        line-height: 48px;
    }

    .proshopMapPlaceholder {
        height: 400px;
    }

    .proshopWmwLogoOverlay {
        width: 200px;
        height: 200px;
    }

    .proshopFaqsHeading {
        font-size: 42px;
        line-height: 48px;
    }

    .proshopStripImg,
    .proshopStripSlider .item img {
        height: 350px;
    }

    .proshopImageStrip {
        padding: 40px 0;
    }

    .proshopResourceCard {
        height: auto;
    }

    .proshopResourceLabel {
        font-size: 24px;
        line-height: 28px;
    }

    .proshopResourcesHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .proshopResourcesSubtext {
        font-size: 16px;
    }

    .proshopOneStopHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .proshopWhatsHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .proshopWhatsSubtext {
        font-size: 16px;
    }

    .proshopStoreItemLabel {
        font-size: 18px;
        line-height: 24px;
    }

    .proshopBrandLogo {
        height: 60px;
    }

    .proshopBrandLogoSmall {
        height: 30px;
    }

    .proshopCgHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .proshopCgSubtext {
        font-size: 16px;
    }

    .proshopBrandLogo {
        height: 80px;
    }

    .proshopBrandLogoSmall {
        height: 40px;
    }

    .proshopStoreItemLabel {
        font-size: 22px;
        line-height: 28px;
    }

    .proshopWhatsHeading {
        font-size: 42px;
        line-height: 48px;
    }

    .proshopWhatsSubtext {
        font-size: 18px;
    }

    .proshopVantageContent {
        padding: 30px 20px;
    }

    .proshopVantageImgWrapper {
        min-height: 280px;
    }

    .proshopVantageHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .proshopVantageTagline {
        font-size: 20px;
        line-height: 26px;
    }

    .proshopChecklistHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .proshopChecklistContent {
        padding: 30px 20px;
    }

    .proshopChecklistImgWrapper {
        min-height: 300px;
    }

    .proshopChecklistItems li {
        font-size: 16px;
        line-height: 24px;
    }

    .proshopAddonsHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .proshopAddonLabel {
        font-size: 18px;
        line-height: 24px;
    }

    .proshopStripImg,
    .proshopStripSlider .item img {
        height: 280px;
    }

    .proshopImageStrip {
        padding: 30px 0;
        margin-bottom: 40px;
    }

    .proshopVisitHeading {
        font-size: 36px;
        line-height: 42px;
    }

    .proshopContactHeading {
        font-size: 36px;
        line-height: 48px;
    }

    .proshopMapPlaceholder {
        height: 350px;
    }

    .proshopWmwLogoOverlay {
        width: 180px;
        height: 180px;
    }

    .proshopFaqsHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .proshopVisitHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .proshopContactHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .proshopFormRow {
        flex-direction: column;
        gap: 12px;
    }

    .proshopFormInput {
        width: 100%;
    }

    .proshopVisitPhone {
        font-size: 24px;
    }

    .proshopMapPlaceholder span {
        font-size: 40px;
    }

    /* Customer Stories Responsive - 991px */
    .csHeroSection {
        height: 400px;
    }

    .csFeaturedPlayBtn {
        width: 56px;
        height: 56px;
    }

    .csVerticalLine {
        height: 60px;
        margin-top: 40px;
        margin-bottom: -30px;
    }

    .csIntroSection {
        padding-top: 40px;
    }

    .csFeaturedVideoWrapper {
        height: 450px;
    }

    .csTestimonialsSection {
        padding-top: 80px;
    }

    .csTestimonialsHeading {
        font-size: 42px;
        line-height: 48px;
    }

    .csTestimonialText {
        max-width: 100%;
    }

    .csStoriesHeading {
        font-size: 42px;
        line-height: 48px;
    }

    .csStoryImgWrapper {
        height: 200px;
    }

    .csStoriesSection {
        padding-top: 40px;
    }

    .csStoriesRow {
        margin-bottom: 48px;
    }

    .csTestimonialRow {
        margin-bottom: 40px;
    }

    /* Start Your Boat Journey Responsive - 991px */


    .sybQuickNav {
        padding: 12px 20px;
    }

    .sybQuickNavItem {
        font-size: 16px;
        padding: 0 20px;
        line-height: 48px;
    }

    .sybFindFitCta {
        padding-top: 40px;
        padding-bottom: 32px;
    }

    .sybBoatImgWrap {
        height: auto;
    }

    .sybScrollTop {
        right: 20px;
        bottom: 20px;
        width: 48px;
        height: 48px;
    }

    .sybDirectionContent,
    .sybDirectionContentLeft {
        padding-left: 0;
        padding-right: 0;
        max-width: 100%;
    }

    .sybDirectionRow {
        margin-bottom: 48px;
    }

    .sybPricingSection {
        padding: 60px 0 0;
    }

    .sybPricingHeader {
        gap: 24px;
    }

    .sybPricingContent {
        padding-left: 88px;
    }

    .sybFinanceImgWrap {
        height: 280px;
    }

    .sybDeliverySection {
        min-height: 600px;
    }

    .sybDeliveryCardWrap {
        padding: 40px 30px 40px 0;
    }

    .sybDeliveryCard {
        padding: 40px 30px;
        min-height: auto;
        width: 50%;
    }

    .sybSayYesSection {
        padding: 50px 0;
    }

    .sybNextStepSection {
        padding: 60px 0 0;
    }

    .sybNextStepRow {
        margin-top: 32px;
    }

    .sybNextStepCard {
        height: 240px;
    }

    .sybNextStepLabel {
        font-size: 24px;
        line-height: 30px;
    }

    .sybFaqSection {
        padding: 60px 0 40px;
    }

    /* Sell/Trade Responsive - 991px */
    .smallerSection {
        margin-top: 50px;
    }

    .fullWidthSection {
        margin: 50px 0;
    }

    .ourGoalSection {
        margin: 50px 0;
    }

    .tradeVSconsignmentSection {
        padding: 50px 0;
    }

    .howItWorksSection {
        padding: 50px 0;
    }

    .howItWorksHeadingWrap {
        margin-bottom: 40px;
    }

    .sellTradeFormSection {
        padding: 60px 0;
    }

    .tradeConsignmentGuideLineSection {
        margin: 50px 0;
        padding: 0 15px;
    }

    .tradeGuideLinesContainer {
        padding: 0 15px;
    }

    .faqInnerWrapper {
        padding: 0 15px;
    }

    .faqsSection {
        padding: 50px 15px;
    }

    .whySellTradeList li {
        margin-bottom: 28px;
    }

    .sybStepNumber {
        font-size: 42px;
        line-height: 48px;
    }

    .sybStepTitle {
        font-size: 24px;
        line-height: 30px;
        margin-bottom: 16px;
    }

    .sybStepCard {
        padding-left: 24px;
    }

    .sybOwnershipContent {
        padding: 40px 30px;
        min-height: auto;
    }

    .sybOwnershipImgWrap {
        min-height: 350px;
    }

    .sybOwnershipRow {
        min-height: auto;
    }

    .sybProcessSection {
        padding: 60px 0 40px;
    }

    .sybProcessContainer {
        padding-left: 30px;
        padding-right: 30px;
    }

    .sybProcessHeader {
        margin-bottom: 40px;
    }

    .blogCard {
        padding: 0 15px;
        margin-bottom: 32px;
    }

    .cbcExpTextWrap, .cbcExpImgWrap {
        margin: 0 auto;
        max-width: 100%;
    }

    /* Contact Page Responsive - 991px */
    .headerSection {
        padding-top: 40%;
        min-height: 320px;
    }

    .contactFormSection {
        padding: 60px 15px;
    }

    .contactMapWrapper {
        min-height: 400px;
    }

    .contactMapWrapper iframe {
        min-height: 400px;
    }

    .contactTextWrapper {
        padding: 40px 20px;
    }

    .contactTextInnerWrap {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .largeWhitePara {
        font-size: 16px;
        line-height: 28px;
    }
    .brandCtaBtnWrapper {
        flex-direction: column;
        width: 100%;
        justify-content: center;
    }
    .light-grey-sec {
        padding: 0;
    }
    .brandHeroImageWrap {
        min-height: 350px;
    }

    .footer {
        padding-top: 20px;
    }

    .p-60px {
        padding: 40px !important;
    }

    .pr-40px {
        margin-bottom: 25px;
    }

    .mb-40px {
        margin-bottom: 25px !important;
    }

    .menuItem {
        display: none;
    }

    .phoneNum {
        display: none;
    }

    .headerHeading {
        font-size: 36px;
    }

    .heroLogo {
        max-width: 150px;
    }

    .heroButtons {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 15px;
    }

    .blackBtn {
        max-width: unset;
        text-align: center;
    }

    .familySection {
        flex-direction: column;
    }

    .familyImg {
        min-height: 400px;
        height: 400px;
    }

    .familyOverlay {
        position: static;
        width: 100%;
        padding: 50px 6%;
    }

    .familySubHeading {
        font-size: 16px;
    }

    .customerSays {
        padding: 40px;
    }

    /* Home Page - 768px */
    .latestArrivalSection {
        padding: 50px 15px;
    }

    .bannerLogoWrapper {
        width: 90%;
        gap: 16px;
        top: 70%;
    }

    .brandLogo {
        width: 120px;
        height: auto;
    }

    .boatTitle {
        font-size: 22px;
        line-height: 26px;
    }

    .boatTag {
        font-size: 14px;
        line-height: 22px;
        letter-spacing: 1px;
    }

    .quoteWrapper {
        padding: 40px 15px;
    }

    .customerQuote {
        gap: 16px;
    }

    .avatar {
        width: 48px;
        height: 48px;
        font-size: 22px;
    }

    .customerName {
        font-size: 16px;
        letter-spacing: 1px;
    }

    .customerInfo {
        gap: 16px;
    }

    /* Service Page - 768px */
    .paraText {
        font-size: 14px;
        line-height: 22px;
    }

    .mainHeading {
        font-size: 32px;
        line-height: 36px;
    }

    .whiteBtn,
    .blueBtn,
    .darkBlackBtn {
        font-size: 13px;
        padding: 10px 22px;
        letter-spacing: 1.2px;
    }

    .pageTitleHeading {
        font-size: 42px;
        line-height: 46px;
    }

    .serviceCardContent {
        width: 100%;
        padding: 16px;
        min-height: 60px;
    }

    .serviceCardHeading {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 0.08em;
    }

    .textContentWrapper {
        padding-right: 0;
    }

    .advantageProgramSection {
        padding-top: 40px;
        padding-bottom: 40px;
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .headerProgram {
        margin-bottom: 32px;
    }

    .cardProgram {
        padding-left: 16px;
        margin-bottom: 32px;
    }

    .programHeading {
        font-size: 22px;
        line-height: 26px;
        margin-bottom: 12px;
        width: 100%;
    }

    .calenderImg {
        margin-bottom: 20px;
        width: 40px;
    }

    .requestServiceSection {
        margin-top: 40px;
    }

    .requestContent {
        padding-left: 0;
        padding-top: 30px;
    }

    .pr-40 {
        padding-right: 0;
    }

    .serviceBrandSection {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .customGap {
        gap: 16px;
    }

    .quickWrapper {
        flex-direction: column;
        align-items: center;
        gap: 8px;
    }

    .quickHr {
        width: 80%;
    }

    .quickNav {
        width: auto;
    }

    .specificHeight {
        height: calc(100vh - 150px);
    }

    .cbcConciergeSection {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .proshopContact {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .proshopContactHeading {
        font-size: 36px;
        line-height: 42px;
    }

    .proshopStripImg,
    .proshopStripSlider .item img {
        height: 220px;
    }

    .proshopImageStrip {
        padding: 24px 0;
        margin-bottom: 30px;
    }

    .proshopMapPlaceholder {
        height: 300px;
    }

    .certifiedTechsSection {
        padding: 50px 0;
    }

    .partsSection {
        padding: 0 0 50px;
    }

    .certifiedTechsImgWrap,
    .partsImgWrap {
        height: 360px;
    }

    .certifiedTechsTextWrap {
        padding-left: 0;
        padding-top: 30px;
    }

    .partsTextWrap {
        padding-right: 0;
        padding-top: 30px;
    }

    .servicePricingDisclosure {
        padding: 40px 0;
    }

    .servicePricingDisclosure .programHeading {
        margin-bottom: 16px;
    }

    /* 404 & Thank You - 768px */
    .errorPageCode {
        font-size: 120px;
        letter-spacing: 4px;
    }

    .errorPageHeading,
    .thankYouHeading {
        font-size: 36px;
        line-height: 44px;
    }

    .errorPageText,
    .thankYouText {
        font-size: 16px;
        line-height: 26px;
    }

    .errorPageLine,
    .thankYouLine {
        height: 40px;
        margin: 28px auto;
    }

    .errorPageSection,
    .thankYouPageSection {
        padding: 60px 20px;
    }

    /* Customer Stories Responsive - 768px */
    .csHeroSection {
        height: 350px;
    }

    .csIntroSection {
        padding-top: 30px;
    }

    .csVerticalLine {
        margin-top: 30px;
        margin-bottom: -20px;
    }

    .csFeaturedVideoWrapper {
        height: 350px;
    }

    .csFeaturedPlayBtn {
        width: 50px;
        height: 50px;
    }

    .csTestimonialsSection {
        padding-top: 60px;
    }

    .csTestimonialsHeading {
        font-size: 36px;
        line-height: 42px;
    }

    .csStoriesSection {
        padding-top: 40px;
    }

    .csStoriesHeading {
        font-size: 36px;
        line-height: 42px;
    }

    .csStoryImgWrapper {
        height: 200px;
    }

    .csStoriesRow {
        margin-bottom: 40px;
    }

    /* About Page Responsive - 768px */
    .secondaryHeaderHeading {
        font-size: 36px;
        line-height: 40px;
    }

    .mainWhiteHeading {
        font-size: 32px;
        line-height: 36px;
    }

    .aboutOriginsBg {
        height: 400px;
        padding-bottom: 160px;
    }

    .aboutOriginsPhoto {
        height: 400px;
    }

    .aboutOriginsLine {
        margin-top: -180px;
    }

    .aboutHistorySection {
        padding: 80px 0;
    }

    .aboutEraBlock {
        margin-bottom: 80px;
    }

    .aboutEraTitle {
        font-size: 36px;
        line-height: 40px;
    }

    .aboutEraYear {
        font-size: 42px;
        line-height: 42px;
        text-align: center;
    }

    .aboutEraRow {
        gap: 60px;
    }

    .aboutEraTextCol {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .aboutEraImgCol {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }

    .aboutEraImg {
        width: 100%;
        height: 360px;
    }

    .aboutOverlapSection {
        width: 100%;
        height: auto;
        position: static;
    }

    .aboutOverlapTop,
    .aboutOverlapBottom {
        position: static;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
    }

    .aboutOverlapTop .aboutOverlapImg,
    .aboutOverlapBottom .aboutOverlapImg {
        width: 100%;
        max-width: 100%;
        height: 280px;
    }

    .aboutOverlapTop .aboutOverlapText,
    .aboutOverlapBottom .aboutOverlapText {
        width: 100%;
        min-width: 0;
        text-align: center;
    }
    .aboutTimelineContent {
        max-width: 520px;
        margin: 0 auto;
        text-align: center;
    }
    .aboutEraTitle{
        text-align: center !important;
    }

    .aboutOverlapHeading {
        font-size: 24px;
        line-height: 28px;
    }

    .aboutOverlapPara {
        width: 100%;
    }

    .aboutOverlapReverse {
        width: 100%;
        max-width: 100%;
        height: auto;
        position: static;
    }

    .aboutOverlapReverseText1,
    .aboutOverlapReverseText2,
    .aboutOverlapReverseImg1,
    .aboutOverlapReverseImg2 {
        position: static;
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .aboutOverlapReverseImg1,
    .aboutOverlapReverseImg2 {
        height: 280px;
        margin-bottom: 20px;
    }

    .aboutOverlapReverseText1,
    .aboutOverlapReverseText2 {
        margin-bottom: 40px;
        text-align: center;
    }

    .aboutOverlapHeadingLg {
        font-size: 24px;
        line-height: 28px;
    }

    .aboutOverlapParaLg {
        width: 100%;
    }

    .aboutTeamDarkSection {
        padding: 0 0 80px;
    }

    .aboutTeamBgSection {
        height: 360px;
    }

    .aboutTeamBgHeading {
        font-size: 42px;
        line-height: 48px;
    }

    .aboutTeamGrid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }

    .aboutTeamCardNew {
        width: 100%;
    }

    .aboutTeamName {
        font-size: 22px;
        line-height: 26px;
        margin-top: 20px;
    }

    .aboutTeamRole {
        font-size: 16px;
        line-height: 24px;
        margin-top: 6px;
    }

    .aboutTeamDesc {
        font-size: 16px;
        line-height: 26px;
        margin-bottom: 50px !important;
    }

    .aboutFloorplan4 {
        height: 400px;
    }

    .aboutJoinOverlapSection {
        position: static;
        width: 100%;
        height: auto;
        padding: 60px 5%;
        margin-top: 80px;
    }

    .aboutJoinImg1,
    .aboutJoinImg2,
    .aboutJoinDiffText,
    .aboutJoinFamilyText {
        position: static;
        width: 100%;
    }

    .aboutJoinImg1,
    .aboutJoinImg2 {
        height: 300px;
        margin-bottom: 40px;
    }

    .aboutJoinDiffText {
        margin-bottom: 40px;
    }

    .aboutJoinFamilyText {
        margin-top: 40px;
    }

    .aboutJoinHeading {
        font-size: 32px;
        line-height: 36px;
        margin-bottom: 24px;
    }

    .aboutJoinPara {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 24px;
    }

    .aboutJoinList {
        font-size: 15px;
        line-height: 22px;
    }

    .founderSection {
        padding: 50px 15px 60px;
    }

    .founderPara {
        font-size: 18px;
        line-height: 28px;
    }

    .whiteColorTag {
        font-size: 16px;
        letter-spacing: 1.5px;
    }

    .founderHeaderWrap {
        margin: 24px 0;
    }

    .aboutLogoImg {
        max-width: 120px;
    }

    .aboutTimelineImgWrap {
        padding-top: 55%;
    }

    .aboutOverlapSection {
        margin-top: 60px !important;
    }

    .aboutOverlapReverse {
        height: auto !important;
    }

    .aboutOverlapSection.aboutOverlapReverse {
        height: auto !important;
    }

    .aboutEraBlock .text-center[style*="margin-bottom: 160px"] {
        margin-bottom: 80px !important;
    }

    /* 2000s Grid Responsive - 768px */
    .about2000Grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about2000Grid .about2000Cell {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .about2000LogoCell {
        justify-content: flex-start;
    }

    .about2000Logo {
        width: 100px;
        margin: 0 auto;
    }

    .about2000Heading {
        font-size: 24px;
        line-height: 28px;
        text-align: center;
    }
    .about2000HeadingWithArrow {
        justify-content: center;
    }
    .about2000Para {
        text-align: center;
    }

    .about2000Row2 {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about2000Row2Left {
        grid-column: 1;
        text-align: center;
    }

    .about2000Row2Left .d-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .about2000Row2Left .about2000Logo {
        margin-right: 0 !important;
        margin-bottom: 16px;
        height: auto !important;
    }

    .about2000Row2Center {
        grid-column: 1;
    }

    .about2000Row2Right {
        grid-column: 1;
    }

    .about2000Row3 {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .about2000Row3Left {
        grid-column: 1;
    }

    .about2000Row3Center {
        grid-column: 1;
    }

    .about2000Row3Right {
        grid-column: 1;
    }

    .about2000ImgWrap {
        height: 280px;
    }

    .about2000ImgSmall {
        height: 220px;
    }

    .about2000RightEntry {
        margin-bottom: 32px;
    }

    .about2000Arrow {
        left: -30px;
        width: 20px;
        height: 20px;
    }

    /* 2010s Responsive - 768px */
    .about2010Section {
        position: static;
        width: 100%;
        height: auto;
    }

    .about2010Img1,
    .about2010Text1,
    .about2010Img2,
    .about2010Text2 {
        position: static;
        width: 100%;
    }

    .about2010Img1,
    .about2010Img2 {
        height: auto;
        margin-bottom: 24px;
    }

    .about2010Text1 {
        margin-bottom: 40px;
    }

    .about2010Text2 {
        margin-top: 24px;
        text-align: center;
    }

    /* 2017/2019 Responsive - 768px */
    .about2017Section {
        flex-direction: column;
        gap: 32px;
    }

    .about2017Img {
        width: 100%;
        height: 360px;
    }

    .about2017TextCol {
        width: 100%;
        padding-top: 0;
    }

    .about2017Entry {
        margin-bottom: 32px;
    }

    .about2019Section {
        position: static;
        width: 100%;
        height: auto;
        right: 0;
        margin-top: 60px;
    }

    .about2019Year,
    .about2019Img1,
    .about2019Text1,
    .about2019Img2,
    .about2019Text2 {
        position: static;
        width: 100%;
    }

    .about2019Img1,
    .about2019Img2 {
        height: 260px;
        margin-bottom: 24px;
    }

    .about2019Year {
        margin-bottom: 24px;
    }

    .about2019Text1 {
        margin-bottom: 40px;
    }

    .about2019Text2 {
        margin-top: 24px;
    }

    /* 2020s Responsive - 768px */
    .about2020Section {
        flex-direction: column;
        gap: 32px;
    }

    .about2020Img {
        width: 100%;
        height: 320px;
    }

    .about2020TextCol {
        max-width: 100%;
        margin-top: 0;
    }

    /* CBC Experience, Blog, Events Responsive - 991px */
    .cbcExpSectionGap,
    .cbcExpSectionGap2 {
        padding-top: 60px;
    }

    .cbcExpRow {
        min-height: auto;
        column-gap: 0;
    }

    .cbcExpRow>[class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .cbcExpImgWrap {
        padding-top: 75%;
    }

    .cbcExpImgTall {
        padding-top: 100%;
    }

    .cbcExpBtnWrap {
        margin-top: 32px;
    }

    .blogFilterTab {
        font-size: 16px;
    }

    .blogCardTitle {
        font-size: 26px;
        line-height: 30px;
        margin-bottom: 16px;
    }

    .blogCardCategory {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 12px;
    }

    .blogCardExcerpt {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 16px;
    }

    .blogReadMore {
        font-size: 14px;
    }

    .blogCardsSection,
    .eventsGridSection {
        padding: 48px 0 60px;
    }

    .edHeroBanner {
        height: 450px;
    }

    .edEventTitle {
        font-size: 32px;
        line-height: 40px;
    }

    .edGalleryItem {
        height: 250px;
    }

    .edInventoryImgWrap {
        height: 240px;
    }

    .edRegImgWrap {
        height: 400px;
    }

    .edBrandsRow {
        gap: 40px;
    }

    .edBrandLogo {
        height: 48px;
        width: 150px;
    }

    /* Start Your Boat Journey Responsive - 768px */

    .sybQuickNavItem {
        font-size: 14px;
        padding: 0 12px;
        line-height: 40px;
    }

    .sybHeroSubtitle {
        font-size: 18px;
        line-height: 26px;
    }

    .sybBoatRow .col-lg-4 {
        margin-bottom: 40px;
    }

    .miniHeading {
        font-size: 18px;
        line-height: 24px;
        letter-spacing: 1.5px;
        margin-bottom: 10px;
    }

    .largeBlackPara {
        font-size: 18px;
        line-height: 28px;
    }

    .sybDirectionContent,
    .sybDirectionContentLeft {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .sybFinanceImgWrap {
        height: 240px;
    }

    .sybDeliverySection {
        min-height: 500px;
    }

    .sybDeliveryCardWrap {
        padding: 30px 20px 30px 0;
    }

    .sybDeliveryCard {
        padding: 30px 20px;
        width: 55%;
    }

    .sybSayYesSection {
        padding: 40px 0;
    }

    .sybNextStepSection {
        padding: 40px 0 0;
    }

    .sybNextStepCard {
        height: 220px;
    }

    .sybFaqSection {
        padding: 40px 0 30px;
    }

    /* Sell/Trade Responsive - 768px */
    .smallerSection {
        margin-top: 40px;
    }

    .fullWidthSection {
        margin: 40px 0;
    }

    .fullWidthTextWrap {
        padding: 30px 20px;
    }

    .ourGoalSection {
        margin: 40px 0;
        padding: 0 20px;
    }

    .tradeVSconsignmentSection {
        padding: 40px 15px;
    }

    .howItWorksSection {
        padding: 40px 15px;
    }

    .howItWorksHeadingWrap {
        margin-bottom: 32px;
    }

    .howItWorksBorderLeft {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding-top: 24px;
    }

    .sellTradeFormSection {
        padding: 40px 15px;
    }

    .sellTradeFormTextWrap {
        max-width: 100%;
    }

    .sellTradeFormWrapper {
        max-width: 100%;
    }

    .tradeConsignmentGuideLineSection {
        margin: 40px 0;
        padding: 0 20px;
    }

    .tradeGuideLinesContainer {
        padding: 0;
    }

    .faqInnerWrapper {
        padding: 0;
    }

    .faqsSection {
        padding: 40px 20px;
    }

    .whySellTradeList li {
        margin-bottom: 24px;
    }

    .inspectionTextWrap {
        padding: 30px 20px;
    }

    .stepNumberText {
        font-size: 48px;
    }

    .sellFaqQuestion {
        font-size: 15px;
        line-height: 22px;
    }

    /* Contact Page Responsive - 768px */
    .headerSection {
        padding-top: 50%;
        min-height: 300px;
    }

    .headerHeadingWrap {
        margin-bottom: 24px;
    }

    .contactFormSection {
        padding: 50px 15px;
    }

    .contactFormWrapper {
        max-width: 100%;
    }

    .contactMapWrapper {
        min-height: 350px;
    }

    .contactMapWrapper iframe {
        min-height: 350px;
    }

    .contactTextWrapper {
        padding: 40px 20px;
    }

    .hoursBlock {
        padding: 16px;
    }

    .dayLabel {
        font-size: 14px;
        min-width: 90px;
    }

    .timeLabel {
        font-size: 14px;
    }

    /* Footer Responsive - 768px */
    .joinConversation {
        font-size: 24px;
        line-height: 30px;
    }

    .footerMenuItem {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .footerBottomList li:not(:last-child)::after {
        margin: 0 8px;
    }

    .footerBottomLink {
        font-size: 12px;
    }

    .footerBottom {
        padding: 0 10px;
        gap: 0;
    }

    .footerBottomList {
        padding: 6px 0;
        gap: 2px;
    }

    .gotopIconWrap {
        bottom: 15%;
    }

    .mob-p {
        margin: 0 15px !important;
    }
    .formsDownloadSection {
        margin: 50px 0;
    }
}

@media (max-width: 576px) {
    .service-item {
        width: 100%;
    }
    .sybBoatTypesSection {
        padding-bottom: 0;
    }
    .blogTitle {
        font-size: 20px;
        line-height: 30px;
    }
    .headerContent {
        top: 60%;
    }
    .brand-subtitle {
        font-size: 20px;
    }
    .singleBrand {
        padding-top: 64%;
    }

    .footerBottom {
        margin-top: 40px;
    }

    .blogPostTitle {
        font-size: 40px;
        line-height: 46px;
    }

    .quizModal {
        width: 95vw;
        height: 90vh;
    }

    .quizOptionsGrid {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 0 20px;
    }

    .quizOptionImg {
        height: 120px;
        width: 100%;
    }

    .quizQuestion {
        font-size: 20px;
        line-height: 24px;
        max-width: 100%;
        padding: 0 20px;
    }

    .quizCounter {
        font-size: 24px;
    }

    .quizTitle {
        font-size: 16px;
    }

    .quizNextBtn,
    .quizPrevBtn {
        width: 40px;
        height: 40px;
        bottom: 20px;
    }

    .quizNextBtn {
        right: 20px;
    }

    .quizPrevBtn {
        left: 20px;
    }

    .quizFindBtn {
        bottom: 20px;
        right: 20px;
        width: 150px;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    .footer {
        padding-left: 20px;
        padding-top: 40px;
    }

    .customerWrapper {
        justify-content: center;
    }

    .p-60px {
        padding: 30px !important;
    }

    .menuItem {
        display: none;
    }

    .phoneNum {
        display: none;
    }

    .menuLogo {
        gap: 15px;
    }

    .headerHeading {
        font-size: 28px;
    }

    .heroLogo {
        max-width: 120px;
    }

    .blackBtn {
        padding: 12px 20px;
        font-size: 12px;
    }

    .familyImg {
        min-height: 250px;
        height: 250px;
    }

    .familyOverlay {
        padding: 40px 6%;
    }

    .quoteWrapper {
        padding: 40px 20px;
    }

    /* Home Page - 576px */
    .customerSays {
        padding: 30px 15px;
    }

    .latestArrivalSection {
        padding: 40px 10px;
    }

    .bannerLogoWrapper {
        width: 92%;
        gap: 12px;
        top: 65%;
    }

    .brandLogo {
        width: 100px;
        height: auto;
    }

    .boatTitle {
        font-size: 20px;
        line-height: 24px;
    }

    .boatTag {
        font-size: 13px;
        line-height: 20px;
        letter-spacing: 0.5px;
    }

    .newPreOwnd {
        gap: 20px;
    }

    .customerQuote {
        flex-direction: column;
        gap: 12px;
    }

    .quoteIcon {
        width: 30px;
        height: 30px;
    }

    .avatar {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .customerName {
        font-size: 14px;
        letter-spacing: 0.5px;
    }

    .customerInfo {
        gap: 12px;
    }

    .customerWrapper {
        gap: 16px;
    }

    .ctaShopNow {
        font-size: 14px;
    }

    .overlayBanner {
        height: 60%;
        top: 40%;
    }

    /* Service Page - 576px */
    .paraText {
        font-size: 13px;
        line-height: 20px;
    }

    .mainHeading {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 16px;
    }

    .whiteBtn,
    .blueBtn,
    .darkBlackBtn {
        font-size: 12px;
        padding: 10px 18px;
        letter-spacing: 1px;
    }

    .pageTitleHeading {
        font-size: 32px;
        line-height: 36px;
    }

    .serviceCardContent {
        width: 100%;
        padding: 12px;
        min-height: 50px;
    }

    .serviceCardHeading {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.05em;
    }

    .advantageProgramSection {
        padding-top: 30px;
        padding-bottom: 30px;
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .headerProgram {
        margin-bottom: 24px;
    }

    .cardProgram {
        padding-left: 12px;
        margin-bottom: 24px;
    }

    .programHeading {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 10px;
        width: 100%;
    }

    .calenderImg {
        margin-bottom: 16px;
        width: 32px;
    }

    .requestServiceSection {
        margin-top: 30px;
        margin-bottom: 10px;
    }

    .serviceBrandSection {
        margin-top: 30px;
        margin-bottom: 30px;
    }

    .servicelogo {
        max-width: 150px;
    }

    .servicebrandLogoWrapper {
        gap: 16px;
    }

    .customGap {
        gap: 12px;
    }

    .specificHeight {
        height: calc(100vh - 120px);
        min-height: 350px;
    }

    .cbcConciergeSection {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .cbcpoints {
        padding-left: 16px;
    }

    .proshopContact {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .proshopContactHeading {
        font-size: 28px;
        line-height: 34px;
    }

    .proshopStripImg,
    .proshopStripSlider .item img {
        height: 160px;
    }

    .proshopImageStrip {
        padding: 20px 0;
        margin-bottom: 24px;
    }

    .proshopVisitHeading {
        font-size: 24px;
        line-height: 30px;
    }

    .proshopVisitPhone {
        font-size: 20px;
    }

    .proshopMapPlaceholder {
        height: 260px;
    }

    .proshopFormWrap {
        padding: 0 10px;
    }

    .superiorRepair {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .certifiedTechsSection {
        padding: 40px 0;
    }

    .partsSection {
        padding: 0 0 40px;
    }

    .certifiedTechsImgWrap,
    .partsImgWrap {
        height: 280px;
    }

    .certifiedTechsList {
        padding-left: 16px;
    }

    .servicePricingDisclosure {
        padding: 30px 0;
    }

    .servicePricingDisclosure .programHeading {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 12px;
    }

    .applyTodayLink {
        font-size: 13px;
        margin-top: 12px;
    }

    /* 404 & Thank You - 576px */
    .errorPageCode {
        font-size: 80px;
        letter-spacing: 2px;
    }

    .errorPageHeading,
    .thankYouHeading {
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 16px;
    }

    .errorPageText,
    .thankYouText {
        font-size: 15px;
        line-height: 24px;
        margin-bottom: 32px;
    }

    .errorPageLine,
    .thankYouLine {
        height: 32px;
        margin: 20px auto;
    }

    .errorPageBtns,
    .thankYouBtns {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }

    .errorPageBtns .blackBtn,
    .errorPageBtns .blueBtn,
    .thankYouBtns .blackBtn,
    .thankYouBtns .blueBtn {
        width: 100%;
        max-width: 280px;
    }

    .errorPageSection,
    .thankYouPageSection {
        padding: 40px 15px;
    }

    .thankYouIconWrap svg {
        width: 48px;
        height: 48px;
    }

    .thankYouIconWrap {
        margin-bottom: 20px;
    }

    /* Customer Stories Responsive - 576px */
    .csHeroSection {
        height: 280px;
    }

    .csIntroSection {
        padding-top: 24px;
    }

    .csFeaturedVideoWrapper {
        height: 240px;
    }

    .csFeaturedPlayBtn {
        width: 40px;
        height: 40px;
    }

    .csVerticalLine {
        height: 40px;
        margin-top: 24px;
        margin-bottom: -20px;
    }

    .csTestimonialsSection {
        padding-top: 40px;
    }

    .csTestimonialsHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .csStoryPlayBtn {
        width: 30px;
        height: 30px;
    }

    .csStoriesHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .csStoryImgWrapper {
        height: 180px;
    }

    .csStoriesRow {
        margin-bottom: 32px;
    }

    .csTestimonialRow {
        margin-bottom: 32px;
    }

    /* CBC Experience, Blog, Events Responsive - 576px */
    .cbcExpSectionGap,
    .cbcExpSectionGap2 {
        padding-top: 40px;
    }

    .cbcExpRow {
        column-gap: 0;
    }

    .cbcExpRow>[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .cbcExpImgWrap {
        padding-top: 60%;
    }

    .cbcExpImgTall {
        padding-top: 75%;
    }

    .blogCardTitle {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 14px;
    }

    .blogCardCategory {
        font-size: 15px;
        line-height: 22px;
        margin-bottom: 10px;
    }

    .blogCardExcerpt {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 14px;
    }

    .blogReadMore {
        font-size: 13px;
    }

    .blogCardImgWrap,
    .eventCardImgWrap {
        height: 200px;
    }

    .blogCardsSection,
    .eventsGridSection {
        padding: 40px 0 50px;
    }

    .edHeroBanner {
        height: 400px;
    }

    .edEventTitle {
        font-size: 24px;
        line-height: 32px;
    }

    .edGalleryItem {
        height: 200px;
    }

    .edInventoryImgWrap {
        height: 200px;
    }

    .edRegImgWrap {
        height: 300px;
    }

    /* Start Your Boat Journey Responsive - 576px */

    .sybBoatRow .col-lg-4 {
        margin-bottom: 32px;
    }

    .miniHeading {
        font-size: 16px;
        line-height: 22px;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .largeBlackPara {
        font-size: 16px;
        line-height: 24px;
    }

    .regularBlackPara {
        font-size: 14px;
        line-height: 22px;
    }

    .smallHeading {
        font-size: 24px;
        line-height: 28px;
    }

    .sybDirectionContent,
    .sybDirectionContentLeft {
        max-width: 100%;
    }

    .sybDirectionRow {
        margin-bottom: 32px;
    }

    .sybFinanceImgWrap {
        height: 200px;
    }

    .sybScrollIcon {
        width: 40px;
        height: 40px;
    }

    .sybPricingSection {
        padding: 40px 0 0;
    }

    .sybPricingHeader {
        gap: 16px;
    }

    .sybPricingIcon {
        width: 48px;
        min-width: 48px;
        height: 48px;
    }

    .sybPricingContent {
        padding-left: 64px;
    }

    .sybScrollTop {
        width: 40px;
        height: 40px;
        right: 15px;
        bottom: 15px;
    }

    .sybDeliverySection {
        min-height: auto;
        align-items: flex-end;
    }

    .sybDeliveryCardWrap {
        padding: 200px 15px 24px;
        justify-content: center;
    }

    .sybDeliveryCard {
        padding: 24px 15px;
        min-height: auto;
        width: 100%;
    }

    .sybSayYesSection {
        padding: 30px 0;
    }

    .sybSayYesImgWrap {
        padding-top: 75%;
    }

    .sybNextStepSection {
        padding: 30px 0 0;
    }

    .sybNextStepRow {
        margin-top: 24px;
    }

    .sybNextStepCard {
        height: 200px;
    }

    .sybNextStepLabel {
        font-size: 20px;
        line-height: 26px;
    }

    .sybFaqSection {
        padding: 30px 0 24px;
    }

    .sybFaqDesc {
        margin-bottom: 24px;
    }

    .sybFaqQuestion strong {
        font-size: 15px;
        line-height: 22px;
    }

    .sybStepNumber {
        font-size: 30px;
        line-height: 36px;
    }

    .sybStepTitle {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 12px;
    }

    .sybStepCard {
        padding-left: 16px;
    }

    .sybOwnershipContent {
        padding: 30px 20px;
    }

    .sybOwnershipImgWrap {
        min-height: 250px;
    }

    .sybOwnershipLabel {
        font-size: 16px;
        line-height: 24px;
    }

    .sybProcessSection {
        padding: 40px 0 24px;
    }

    .sybProcessContainer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .sybProcessHeader {
        margin-bottom: 24px;
    }

    /* Sell/Trade Responsive - 576px */
    .smallerSection {
        margin-top: 30px;
    }

    .fullWidthSection {
        margin: 30px 0;
    }

    .fullWidthTextWrap {
        padding: 24px 15px;
    }

    .fullWidthTextInneWrap {
        padding: 0;
    }

    .ourGoalSection {
        margin: 30px 0;
        padding: 0 15px;
    }

    .tradeVSconsignmentSection {
        padding: 30px 15px;
    }

    .tradeVSconsignmentCard {
        max-width: 100%;
    }

    .howItWorksSection {
        padding: 30px 15px;
    }

    .howItWorksHeadingWrap {
        margin-bottom: 24px;
    }

    .sellTradeFormSection {
        padding: 30px 15px;
    }

    .sellTradeFormTextWrap {
        max-width: 100%;
        margin-bottom: 24px;
    }

    .sellTradeFormWrapper {
        max-width: 100%;
    }

    .tradeConsignmentGuideLineSection {
        margin: 30px 0;
        padding: 0 15px;
    }

    .faqsSection {
        padding: 30px 15px;
    }

    .whySellTradeList li {
        margin-bottom: 20px;
    }

    .inspectionTextWrap {
        padding: 24px 15px;
    }

    .stepNumberText {
        font-size: 40px;
    }

    .sellFaqQuestion {
        font-size: 14px;
        line-height: 20px;
    }

    .sellTradeReachOutCard {
        gap: 16px;
    }

    .reachOutHeading {
        font-size: 16px;
    }

    .sellTradePhone {
        font-size: 18px;
    }

    /* About Page Responsive - 576px */
    .secondaryHeaderHeading {
        font-size: 28px;
        line-height: 32px;
    }

    .mainWhiteHeading {
        font-size: 24px;
        line-height: 28px;
    }

    .aboutOriginsBg {
        height: 220px;
        padding-bottom: 80px;
    }

    .aboutOriginsPhoto {
        height: 200px;
        max-width: 100%;
        padding: 0 10px;
    }

    .aboutOriginsLine {
        margin-top: -100px;
        height: 30px;
    }

    .aboutHistorySection {
        padding: 40px 0;
    }

    .aboutEraBlock {
        margin-bottom: 40px;
    }

    .aboutEraTitle {
        font-size: 24px;
        line-height: 28px;
        text-align: center;
    }

    .aboutEraYear {
        font-size: 28px;
        line-height: 32px;
    }

    .aboutEraRow {
        gap: 20px;
        flex-direction: column;
    }

    .aboutEraImg {
        height: 280px;
    }

    .aboutOverlapTop .aboutOverlapImg,
    .aboutOverlapBottom .aboutOverlapImg,
    .aboutOverlapReverseImg1,
    .aboutOverlapReverseImg2 {
        height: 180px;
    }

    .aboutOverlapHeading,
    .aboutOverlapHeadingLg {
        font-size: 20px;
        line-height: 24px;
    }

    .aboutOverlapPara,
    .aboutOverlapParaLg {
        font-size: 14px;
        line-height: 20px;
        width: 100%;
    }

    .aboutOverlapSection {
        margin-top: 30px !important;
    }

    .aboutTeamDarkSection {
        padding: 0 0 40px;
    }

    .aboutTeamBgSection {
        height: 250px;
        background-attachment: scroll;
    }

    .aboutTeamBgHeading {
        font-size: 28px;
        line-height: 36px;
    }

    .aboutTeamGrid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .aboutTeamName {
        font-size: 20px;
        line-height: 24px;
        margin-top: 16px;
    }

    .aboutTeamRole {
        font-size: 14px;
        line-height: 20px;
        margin-top: 4px;
    }

    .aboutTeamDesc {
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 32px !important;
    }

    .aboutFloorplan4 {
        height: 250px;
        background-attachment: scroll;
    }

    .aboutJoinImg1,
    .aboutJoinImg2 {
        height: 200px;
        margin-bottom: 24px;
    }

    .aboutJoinOverlapSection {
        padding: 40px 15px;
        margin-top: 60px;
    }

    .aboutJoinHeading {
        font-size: 24px;
        line-height: 28px;
        margin-bottom: 16px;
    }

    .aboutJoinPara {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 16px;
    }

    .aboutJoinList {
        font-size: 14px;
        line-height: 20px;
        margin-top: 16px;
    }

    .aboutJoinDiffText {
        margin-bottom: 24px;
    }

    .aboutJoinFamilyText {
        margin-top: 24px;
    }

    .aboutJoinBtn {
        font-size: 14px;
    }

    .founderSection {
        padding: 30px 15px 40px;
    }

    .founderPara {
        font-size: 16px;
        line-height: 24px;
    }

    .founderHeaderWrap {
        margin: 16px 0;
    }

    .whiteColorTag {
        font-size: 14px;
        letter-spacing: 1px;
    }

    .aboutHeaderContent {
        padding: 0 15px;
    }

    .aboutHeaderLogoWrap {
        max-width: 100px;
    }

    .aboutLogoImg {
        max-width: 80px;
    }

    .aboutTimelineContent {
        max-width: 100%;
    }

    .aboutTimelineImgWrap {
        padding-top: 60%;
    }

    .aboutEraRow .aboutEraTitle {
        text-align: left;
    }

    .about2010Section [style*="margin-bottom: 160px"] {
        margin-bottom: 60px !important;
    }

    .aboutEraBlock .text-center[style*="margin-bottom: 160px"] {
        margin-bottom: 40px !important;
    }

    .aboutOriginsBg {
        background-attachment: fixed;
    }

    .aboutFloorplan4 {
        background-attachment: fixed;
    }

    .aboutTeamBgSection {
        background-attachment: fixed;
    }

    .aboutOriginsSection .aboutOriginsBg {
        background-attachment: fixed;
    }

    .aboutOverlapSection.aboutOverlapReverse[style] {
        margin-top: 30px !important;
    }

    .aboutEraBlock .text-center[style*="margin-top: 80px"] {
        margin-top: 24px !important;
        margin-bottom: 24px !important;
    }

    .aboutEraBlock .text-center[style*="margin-bottom: 50px"] {
        margin-bottom: 20px !important;
    }

    .about2019Section {
        margin-top: 24px !important;
    }

    .about2020Entry[style*="margin-top: 48px"] {
        margin-top: 20px !important;
    }

    .about2020Entry[style*="margin-top: 40px"] {
        margin-top: 16px !important;
    }

    /* 2000s Grid Responsive - 576px */
    .about2000Grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .about2000Grid .about2000Cell {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    .about2000LogoCell {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .about2000Logo {
        width: 60px;
        margin-bottom: 0;
    }

    .about2000Heading {
        font-size: 20px;
        line-height: 24px;
    }

    .about2000Para {
        font-size: 14px;
        line-height: 20px;
    }

    .about2000Row2 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .about2000Row2Left,
    .about2000Row2Center,
    .about2000Row2Right {
        grid-column: 1;
    }

    .about2000Row2Left .d-flex {
        flex-direction: column;
        align-items: flex-start;
    }

    .about2000Row2Left .about2000Logo {
        margin-right: 0 !important;
        margin-bottom: 16px;
        height: auto !important;
    }

    .about2000Row3 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .about2000Row3Left,
    .about2000Row3Center,
    .about2000Row3Right {
        grid-column: 1;
    }

    .about2000ImgWrap {
        height: 200px;
    }

    .about2000ImgSmall {
        height: 160px;
    }

    .about2000RightEntry {
        margin-bottom: 24px;
    }

    .about2000Arrow {
        left: -24px;
        width: 16px;
        height: 16px;
    }

    .about2000HeadingWithArrow {
        padding-left: 0;
    }

    /* 2010s Responsive - 576px */
    .about2010Img1,
    .about2010Img2 {
        height: auto;
    }

    /* 2017/2019 Responsive - 576px */
    .about2017Img {
        height: 250px;
    }

    .about2017Entry {
        margin-bottom: 24px;
    }

    .about2019Section {
        margin-top: 40px !important;
    }

    .about2019Img1,
    .about2019Img2 {
        height: 180px;
    }

    /* 2020s Responsive - 576px */
    .about2020Img {
        height: 220px;
    }

    .about2020Entry[style*="margin-top: 48px"] {
        margin-top: 24px !important;
    }

    .about2020Entry[style*="margin-top: 40px"] {
        margin-top: 20px !important;
    }

    /* CBC Experience, Blog, Events Responsive - 576px */
    .cbcExpSectionGap,
    .cbcExpSectionGap2 {
        padding-top: 30px;
    }

    .cbcExpBtnWrap {
        margin-top: 24px;
    }

    .cbcExpImgWrap {
        padding-top: 60%;
    }

    .cbcExpImgTall {
        padding-top: 75%;
    }

    .cbcExpRow>[class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .blogFilterTab {
        font-size: 13px;
        line-height: 48px;
    }

    .blogCardTitle {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 12px;
    }

    .blogCardCategory {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.05em;
        margin-bottom: 8px;
    }

    .blogCardExcerpt {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 12px;
    }

    .blogReadMore {
        font-size: 12px;
    }

    .blogCardImgWrap,
    .eventCardImgWrap {
        height: 180px;
    }

    .blogCardsSection,
    .eventsGridSection {
        padding: 32px 0 40px;
    }

    .blogRow {
        margin-bottom: 32px;
    }

    .edHeroBanner {
        height: 320px;
    }

    .edEventTitle {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 12px;
    }

    .edRegisterBtn {
        padding: 12px 24px;
        font-size: 14px;
    }

    .edGalleryItem {
        height: 150px;
    }

    .edInventoryImgWrap {
        height: 180px;
    }

    .edRegImgWrap {
        height: 250px;
    }

    .edBrandsRow {
        gap: 24px;
    }

    .edBrandLogo {
        height: 36px;
        width: 120px;
    }

    .edDetailsCards {
        padding: 40px 0;
    }

    .edDescSection {
        padding: 40px 0;
    }

    .edInventorySection {
        padding: 40px 0;
    }

    .edRegSection {
        padding: 40px 0;
    }

    /* Contact Page Responsive - 576px */
    .headerSection {
        padding-top: 60%;
    }

    .headerHeadingWrap {
        margin-bottom: 20px;
    }

    .contactFormSection {
        padding: 40px 12px;
        margin: 0;
    }

    .contactFormWrapper {
        max-width: 100%;
        padding: 0;
    }

    .contactMapWrapper {
        min-height: 300px;
    }

    .contactMapWrapper iframe {
        min-height: 300px;
    }

    .contactTextWrapper {
        padding: 32px 15px;
    }

    .contactTextInnerWrap {
        padding: 0 5px;
    }

    .hoursBlock {
        padding: 12px;
    }

    .hoursRow {
        padding: 4px 0;
    }

    .dayLabel {
        font-size: 13px;
        min-width: 80px;
    }

    .timeLabel {
        font-size: 13px;
    }

    .departmentName {
        font-size: 14px;
    }

    .heroParaWrap {
        padding: 0 5px;
    }

    /* Footer Responsive - 576px */
    .joinConversation {
        font-size: 20px;
        line-height: 26px;
    }

    .footerParaWrap {
        max-width: 100%;
    }

    .footerLogo {
        height: 60px;
    }

    .footerBottom {
        flex-direction: column;
        align-items: center;
        padding: 8px 15px;
        margin-top: 32px;
    }

    .footerBottomList {
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px 0;
    }

    .footerBottomList li:not(:last-child)::after {
        display: none;
    }

    .footerBottomLink {
        font-size: 12px;
        line-height: 20px;
    }

    .footerSubscribeForm {
        margin-top: 16px;
    }

    .borderRightFooter {
        border-right: none;
        border-bottom: 1px solid #D9D9D9;
        padding-bottom: 24px;
        margin-bottom: 24px;
    }

    .gotopIconWrap {
        bottom: 20%;
        right: 4%;
        max-width: 48px;
    }

    .barletta-cta-title {
        font-size: 28px;
        line-height: 42px
    }

    .barletta-cta-box {
        padding: 40px 20px;
    }
}


/* Extra small devices - 400px */
@media (max-width: 400px) {
    .secondaryHeaderHeading {
        font-size: 22px;
        line-height: 26px;
    }

    /* Home Page - 400px */
    .customerSays {
        padding: 24px 10px;
    }

    .latestArrivalSection {
        padding: 30px 8px;
    }

    .bannerLogoWrapper {
        width: 94%;
        gap: 10px;
        top: 60%;
    }

    .brandLogo {
        width: 80px;
        height: auto;
    }

    .boatTitle {
        font-size: 18px;
        line-height: 22px;
    }

    .boatTag {
        font-size: 12px;
        line-height: 18px;
    }

    .familyImg {
        min-height: 200px;
        height: 200px;
    }

    .familyOverlay {
        padding: 30px 5%;
    }

    .newPreOwnd {
        gap: 16px;
    }

    .quoteWrapper {
        padding: 30px 10px;
    }

    /* Service Page - 400px */
    .paraText {
        font-size: 12px;
        line-height: 18px;
    }

    .mainHeading {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 12px;
    }

    .whiteBtn,
    .blueBtn,
    .darkBlackBtn {
        font-size: 11px;
        padding: 8px 14px;
        letter-spacing: 0.8px;
    }

    .blackBtn {
        padding: 10px 16px;
        font-size: 11px;
    }

    .serviceCardContent {
        padding: 10px;
        min-height: 44px;
    }

    .serviceCardHeading {
        font-size: 12px;
        line-height: 16px;
        letter-spacing: 0;
    }

    .advantageProgramSection {
        padding-top: 24px;
        padding-bottom: 24px;
        margin-top: 24px;
        margin-bottom: 24px;
    }

    .programHeading {
        font-size: 16px;
        line-height: 20px;
        width: 100%;
    }

    .requestServiceSection {
        margin-top: 24px;
    }

    .specificHeight {
        height: calc(100vh - 100px);
        min-height: 300px;
    }

    .cbcConciergeSection {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .proshopContact {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .proshopContactHeading {
        font-size: 24px;
        line-height: 28px;
    }

    .proshopStripImg,
    .proshopStripSlider .item img {
        height: 120px;
    }

    .proshopImageStrip {
        padding: 16px 0;
        margin-bottom: 20px;
    }

    .proshopVisitHeading {
        font-size: 20px;
        line-height: 26px;
    }

    .proshopVisitPhone {
        font-size: 18px;
    }

    .proshopMapPlaceholder {
        height: 220px;
    }

    .servicelogo {
        max-width: 100px;
    }

    .certifiedTechsSection {
        padding: 30px 0;
    }

    .partsSection {
        padding: 0 0 30px;
    }

    .certifiedTechsImgWrap,
    .partsImgWrap {
        height: 220px;
    }

    .servicePricingDisclosure {
        padding: 24px 0;
    }

    .servicePricingDisclosure .programHeading {
        font-size: 16px;
        line-height: 20px;
    }

    .applyTodayLink {
        font-size: 11px;
        margin-top: 8px;
    }

    /* 404 & Thank You - 400px */
    .errorPageCode {
        font-size: 60px;
    }

    .errorPageHeading,
    .thankYouHeading {
        font-size: 22px;
        line-height: 28px;
    }

    .errorPageText,
    .thankYouText {
        font-size: 14px;
        line-height: 22px;
    }

    .errorPageLine,
    .thankYouLine {
        height: 24px;
        margin: 16px auto;
    }

    .errorPageSection,
    .thankYouPageSection {
        padding: 30px 10px;
        min-height: calc(100vh - 64px);
    }

    .mainWhiteHeading {
        font-size: 20px;
        line-height: 24px;
    }

    .aboutHeaderLogoWrap {
        max-width: 80px;
    }

    .aboutOriginsBg {
        height: 180px;
        padding-bottom: 60px;
    }

    .aboutOriginsPhoto {
        height: 160px;
        padding: 0 8px;
    }

    .aboutOriginsLine {
        margin-top: -80px;
        height: 24px;
    }

    .aboutHistorySection {
        padding: 30px 0;
    }

    .aboutEraBlock {
        margin-bottom: 30px;
    }

    .aboutEraTitle {
        font-size: 20px;
        line-height: 24px;
    }

    .aboutEraYear {
        font-size: 24px;
        line-height: 28px;
    }

    .aboutEraImg {
        height: 240px;
    }

    .aboutOverlapTop .aboutOverlapImg,
    .aboutOverlapBottom .aboutOverlapImg,
    .aboutOverlapReverseImg1,
    .aboutOverlapReverseImg2 {
        height: 150px;
    }

    .aboutOverlapHeading,
    .aboutOverlapHeadingLg {
        font-size: 18px;
        line-height: 22px;
    }

    .aboutOverlapPara,
    .aboutOverlapParaLg {
        font-size: 13px;
        line-height: 18px;
    }

    .about2000Heading {
        font-size: 18px;
        line-height: 22px;
    }

    .about2000Para {
        font-size: 13px;
        line-height: 18px;
    }

    .about2000Logo {
        width: 50px;
    }

    .about2000ImgWrap {
        height: 160px;
    }

    .about2000ImgSmall {
        height: 130px;
    }

    .about2000Arrow {
        left: -20px;
        width: 14px;
        height: 14px;
    }

    .about2010Img1,
    .about2010Img2 {
        height: auto;
    }

    .about2017Img {
        height: 200px;
    }

    .about2019Img1,
    .about2019Img2 {
        height: 150px;
    }

    .about2020Img {
        height: 180px;
    }

    .aboutTeamBgSection {
        height: 200px;
    }

    .aboutTeamBgHeading {
        font-size: 22px;
        line-height: 28px;
    }

    .aboutTeamName {
        font-size: 16px;
        line-height: 20px;
        margin-top: 12px;
    }

    .aboutTeamRole {
        font-size: 13px;
        line-height: 18px;
    }

    .aboutTeamDesc {
        font-size: 13px;
        line-height: 20px;
        margin-bottom: 24px !important;
    }

    .aboutTeamLine {
        height: 50px;
        top: -25px;
    }

    .aboutFloorplan4 {
        height: 200px;
    }

    .aboutJoinOverlapSection {
        padding: 30px 10px;
        margin-top: 40px;
    }

    .aboutJoinImg1,
    .aboutJoinImg2 {
        height: 160px;
        margin-bottom: 20px;
    }

    .aboutJoinHeading {
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 12px;
    }

    .aboutJoinPara {
        font-size: 13px;
        line-height: 18px;
        margin-bottom: 12px;
    }

    .aboutJoinList {
        font-size: 13px;
        line-height: 18px;
        margin-top: 12px;
    }

    .aboutJoinDiffText {
        margin-bottom: 20px;
    }

    .aboutJoinFamilyText {
        margin-top: 20px;
    }

    .aboutJoinBtn {
        font-size: 13px;
    }

    .founderSection {
        padding: 24px 10px 30px;
    }

    .founderPara {
        font-size: 14px;
        line-height: 22px;
    }

    .founderHeaderWrap {
        margin: 12px 0;
    }

    .whiteColorTag {
        font-size: 12px;
        letter-spacing: 0.5px;
    }

    .aboutTimelineLine {
        height: 50px;
    }

    .aboutHeaderContent {
        padding: 0 10px;
    }

    .aboutTeamGrid {
        gap: 20px;
    }

    /* Blog - 400px */
    .blogCardTitle {
        font-size: 18px;
        line-height: 22px;
        margin-bottom: 10px;
    }

    .blogCardCategory {
        font-size: 12px;
        line-height: 18px;
        letter-spacing: 0.05em;
        margin-bottom: 6px;
    }

    .blogCardExcerpt {
        font-size: 12px;
        line-height: 18px;
        margin-bottom: 10px;
    }

    .blogReadMore {
        font-size: 11px;
    }

    .blogCardImgWrap,
    .eventCardImgWrap {
        height: 150px;
    }

    .blogCardsSection,
    .eventsGridSection {
        padding: 24px 0 30px;
    }

    .blogFilterTab {
        font-size: 11px;
        line-height: 40px;
    }

    /* Start Your Boat Journey - 400px */

    .sybBoatRow .col-lg-4 {
        margin-bottom: 28px;
    }

    .miniHeading {
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
    }

    .largeBlackPara {
        font-size: 14px;
        line-height: 22px;
    }

    .regularBlackPara {
        font-size: 13px;
        line-height: 20px;
    }

    .sybFinanceImgWrap {
        height: 160px;
    }

    .sybNextStepCard {
        height: 160px;
    }

    .sybNextStepLabel {
        font-size: 16px;
        line-height: 22px;
    }

    .sybDeliveryCardWrap {
        padding: 160px 10px 20px;
    }

    .sybDeliveryCard {
        padding: 20px 12px;
    }

    /* Sell/Trade - 400px */
    .smallerSection {
        margin-top: 24px;
    }

    .fullWidthSection {
        margin: 24px 0;
    }

    .fullWidthTextWrap {
        padding: 20px 10px;
    }

    .ourGoalSection {
        margin: 24px 0;
        padding: 0 10px;
    }

    .tradeVSconsignmentSection {
        padding: 24px 10px;
    }

    .howItWorksSection {
        padding: 24px 10px;
    }

    .howItWorksHeadingWrap {
        margin-bottom: 20px;
    }

    .sellTradeFormSection {
        padding: 24px 10px;
    }

    .tradeConsignmentGuideLineSection {
        margin: 24px 0;
        padding: 0 10px;
    }

    .faqsSection {
        padding: 24px 10px;
    }

    .inspectionTextWrap {
        padding: 20px 10px;
    }

    .stepNumberText {
        font-size: 36px;
    }

    .sellFaqQuestion {
        font-size: 13px;
        line-height: 18px;
    }

    /* Contact Page Responsive - 400px */
    .headerSection {
        padding-top: 70%;
    }

    .contactFormSection {
        padding: 30px 10px;
    }

    .contactMapWrapper {
        min-height: 260px;
    }

    .contactMapWrapper iframe {
        min-height: 260px;
    }

    .contactTextWrapper {
        padding: 24px 10px;
    }

    .hoursBlock {
        padding: 10px;
    }

    .dayLabel {
        font-size: 12px;
        min-width: 72px;
    }

    .timeLabel {
        font-size: 12px;
    }

    /* Footer Responsive - 400px */
    .joinConversation {
        font-size: 18px;
        line-height: 24px;
    }

    .footerLogo {
        height: 50px;
    }

    .footerBottomLink {
        font-size: 11px;
        line-height: 18px;
    }
}