@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

/* common css starts here */

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
figure,
ol,
ul,
dl,
fieldset,
pre {
    margin: 0;
}

.iti {
    border: 1px solid #dedfe0;
    width: 100%;
}

.phoneInput {
    width: 100%;
    padding-left: 40px;
    outline: none;
    border: none;
}


a:hover {
    text-decoration: none;
}

html {
    scroll-behavior: smooth;
}

@font-face {
    font-family: 'Trajan Pro 3';
    src: url('../fonts/trajan-pro-3/TrajanPro3Light.woff') format('woff');
}


@font-face {
    font-family: 'Trajan Pro 3 Bold';
    src: url('../fonts/trajan-pro-3/TrajanPro3Regular.woff') format('woff');
}

.field-error {
    color: red;
    font-size: 14px;
    margin-top: 5px;
}

.error_field {
    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;
}

input.error_field::placeholder {
    color: red !important;
}

.error_field {
    border-bottom: 1px solid red !important;
}

.req_check {
    border-bottom: 1px solid red !important;
}

.alert {
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    z-index: 5;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
}

.alert-danger {
    background-color: #bb1b1b;
    text-align: center;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
    z-index: 5;
}

.alert-success {
    background-color: #109610;
    text-align: center;
    color: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 500;
    z-index: 5;
}

.whiteBtn {
    text-align: center;
    color: #000;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    border-radius: 2px;
    background: #FFF;
    border: 1px solid #FFF;
    padding: 7px 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: capitalize;
    outline: none;
    transition: all 0.4s;
}

.whiteBtn:hover {
    color: #000;
}

.greyBtn {
    color: #1D3766;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    padding: 8px 32px;
    border-radius: 2px;
    background: rgba(29, 55, 102, 0.10);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    outline: none;
}

.greyBtn:hover {
    color: #1D3766;
}

.yellowBtn {
    color: #000;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 16px;
    border-radius: 2px;
    background: #FEDC00;
    padding: 15px 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: none;
    outline: none;
}

.yellowBtn:hover {
    color: #000;
}

.secondaryWhiteBtn {
    color: #1D3766;
    text-align: center;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    border-radius: 2px;
    background: #FFF;
    border: 1px solid #1D3766;
    padding: 10px 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-transform: capitalize;
    outline: none;
    transition: all 0.4s;
}

.secondaryWhiteBtn:hover {
    color: #1D3766;
}

.blueBtn {
    color: #FFF;
    text-align: center;
    font-family: "Source Sans 3", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0.8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    outline: none;
    transition: all 0.4s;
    background-color: #1D3766;
    text-transform: capitalize;
    border: none;
    border-radius: 4px;
    padding: 3px 32px;
}

.blueBtn:hover {
    background-color: #1D3766;
    color: #FFF;
}
.purchase-btn{
    color: #FFF;
    text-align: center;
    font-family: "Source Sans 3", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0.8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    outline: none;
    transition: all 0.4s;
    background-color: #1D3766;
    text-transform: capitalize;
    border: none;
    border-radius: 4px;
    padding: 3px 32px;
    width: 230px;
}
.purchase-btn:hover{
    background-color: #1D3766;
    color: #FFF;
}
.blackBtn {
    color: #000;
    text-align: center;
    font-family: "Source Sans 3", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    outline: none;
    transition: all 0.4s;
    background-color: transparent;
    border: none;
    border-radius: 4px;
    padding: 4px 32px;
    border: 2px solid #1D3766;
}

.blackBtn:hover {
    color: #fff;
    background-color: #1D3766;
}

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

.regularBoldText {
    color: #000;
    font-family: "Source Sans 3", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.regularWhitePara {
    color: #FFF;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.regularWhiteParaBold {
    color: #FFF;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.whiteHeaderHeading {
    color: #FFF;
    text-align: center;
    font-family: "Trajan Pro 3";
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 56px;
    text-transform: uppercase;
}

.mainHeadingWhite {
    color: #FFF;
    text-align: center;
    font-family: "Trajan Pro 3";
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 56px;
}


.mainHeading {
    color: #1D3766;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
}

.thinMainHeading {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
}

.secondaryFontMainHeading {
    color: #000;
    font-family: 'Trajan Pro 3 Bold';
    font-size: 48px;
    font-style: normal;
    font-weight: 400;
    line-height: 56px;
}

.secondaryHeading {
    color: #000;
    text-align: center;
    font-family: "Source Sans 3", sans-serif;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.secondaryHeadingWithoutSpacing {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.whiteHeadingSmall {
    color: #FFF;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
}

.miniHeading {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}


/* common css ends here */

/* desktop mega menu css starts here */
.inventoryMegaMenu {
    background-color: #fff;
    padding: 40px 0 80px 0;
    position: fixed;
    left: 0;
    top: 80px;
    width: 100%;
    z-index: 30;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

}


.inventoryMenuLinkList {
    list-style: none;
    max-width: 200px;
}

.inventoryMenuLinkList li {
    text-align: left;
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
}

.inventoryMenuLink {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.inventoryMenuLink:hover {
    color: #000;
}



.inventoryMenuBrandWrap {
    margin: 0 2px;
    position: relative;
    padding-top: 126%;
}

.inventoryMenuBrandWrap::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, rgba(40, 67, 103, 0.00) 0%, #284367 100%);
    mix-blend-mode: multiply;
}

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

.inventoryMenuBrandLogoWrap {
    max-width: 200px;
    position: absolute;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1;
}

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

.toggleServiceMegaMenu {
    position: relative;
}

.serviceMegaMenu {
    position: fixed;
    left: 0;
    top: 80px;
    background-color: #fff;
    width: 100%;
    padding: 40px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    display: none;
    z-index: 20;
}

.toggleFinancingMegaMenu {
    position: relative;
}

.financingMegaMenu {
    position: fixed;
    left: 0;
    top: 80px;
    background-color: #fff;
    width: 100%;
    padding: 40px 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    display: none;
    z-index: 20;
}

.serviceMenuCard {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 40px 0;
}

.centeredCard {
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
}

.serviceCardInnerWrap {
    max-width: 324px;
    margin: 0 auto;
}

.megaMenuIconContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 2px;
    border: 1px solid #1D3766;
    background: #1D3766;
    flex: 0 0 50px;
    height: 50px;
}

.megaMenusHeading {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.toggleComanyMegaMenu {
    position: relative;
}

.companyMegaMenu {
    position: absolute;
    left: -50%;
    top: 53px;
    background-color: #fff;
    min-width: 280px;
    padding: 10px 10px 28px 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    display: none;
    z-index: 20;
}

.toggleResourcesMegaMenu {
    position: relative;
}

.resourcesMegaMenu {
    position: absolute;
    left: -50%;
    top: 53px;
    background-color: #fff;
    min-width: 280px;
    padding: 10px 10px 28px 40px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 20;
}

.locationMenuCard {
    padding: 0 20px;
}

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

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

.locationMenuBtnWrap {
    margin-top: 8px;
}

/* desktop mega menu css ends here */

/* mobile nav css starts here */
.mobileHeader {
    display: none;
    background-color: #fff;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 20;
    padding: 14px 30px 14px 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

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

.mobileLogoWrap {
    max-width: 280px;
}

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


.burgerLine {
    background-color: #000;
    width: 35px;
    height: 2px;
    margin-bottom: 5px;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* the cross effect  */
.cross .lineOne {
    transform: rotate(45deg) translateY(10px);
}

.cross .lineThree {
    transform: rotate(-45deg) translateY(-12px);
}

.cross .lineTwo {
    opacity: 0;
}

/* mobile nav css ends here */

/* mobile mega menu css starts here */
.mobileNavMegaMenu {
    position: fixed;
    left: 0;
    top: 70px;
    width: 100%;
    background-color: #fff;
    padding: 30px;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    border-top: 1px solid #eee;
    height: 90vh;
    overflow-y: auto;
    display: none;
}

.mobileMenuCrossIcon {
    max-width: 14px;
    cursor: pointer;
}

.menuWrap {
    margin-top: 30px;
}


.mainMobileMenuInnerWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    border-bottom: 1px solid #EEEEEE;
}

.mainMobileMenuText {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
}

.menuBottomContainer {
    margin-top: 80px;
}

.menuBottomList {
    list-style: none;
}

.menuBottomList li {
    margin-bottom: 16px;
}

.menuBottomLink {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-transform: capitalize;
}

.menuBottomLink {
    color: #000;
}

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

.mainMenuIconWrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mainMenuIconText {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-transform: capitalize;
}

.subMenuContentWrap {
    margin-top: 46px;
}

.subMenuHeading {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    text-transform: capitalize;
}

.subMenuLink {
    padding: 16px 0;
    border-bottom: 1px solid #eee;
}

.subMenuLinkText {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-transform: capitalize;
}

.mobileLogoWrapper {
    border-radius: 4px;
    background: #1D3766;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    height: 80px;
}

.mobileLogoInnerWrap {
    max-width: 139px;
}

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

.mobileBoatsMenu {
    display: none;
}

.mobileFinancingMenu {
    display: none;
}

.mobileResourcesMenu {
    display: none;
}

.mobileCompanyMenu {
    display: none;
}

.mobileServiceMenu {
    display: none;
}


/* mobile mega menu css ends here */

/* desktop header css starts here */
.desktopHeader {
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
    background-color: #fff;
    z-index: 20;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.3);
}

.desktopNavInnerWrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    padding-left: 5%;
    gap: 15px;
}

.siteLogoWrap {
    max-width: 370px;
}

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

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


.navMenuList {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.navMenuList:hover {
    color: #000;
}

.navModelLinkWrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.navPhoneWrapper {
    background-color: #1D3766;
    height: 100%;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}

.navPhoneText {
    color: #FFF;
    text-align: right;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.navPhone {
    color: #FEDC00;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 900;
    line-height: 24px;
}

.navPhone:hover {
    color: #FEDC00;
}

.navPhoneInnerWrap {
    max-width: 121px;
    margin: 0 auto;
}

.navModelIconText {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: normal;
}

.modelAndPhoneSection {
    display: flex;
    align-items: center;
    gap: 36px;
    height: 100%;

}

/* desktop header css ends here */

/* footer css starts here */
.footerEmailSection {
    border-top: 1px solid #E6E6E6;
    background: rgba(187, 216, 235, 0.10);
    padding: 60px 15px;
}

.joinNewsEmailFormWrap {
    display: flex;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    padding: 7px 20px;
    border-radius: 4px;
    border: 1px solid #D8E0EA;
    background: #FFF;
    max-width: 350px;
    margin: 40px auto 0 auto;
}

.joinNewsInputFiled {
    border: none;
    outline: none;
    color: rgba(0, 0, 0, 0.60);
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}

.joinNewsBtn {
    background-color: #fff;
    border: none;
    outline: none;
    padding: 0 10px;
}

.mainFooter {
    background-color: #1D3766;
    padding: 80px 0 120px 0;
}

.siteMapHeading {
    color: #FFF;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
}

.siteMapLinkList {
    list-style: none;
    margin-top: 24px;
    max-width: 240px;
}

.siteMapLinkList li {
    cursor: pointer;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.siteMapLink {
    color: #FFF;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.siteMapLink:hover {
    color: #FFF;
}

.customFooterBorder {
    border-bottom: 1px solid #FFFFFF33;
    padding-bottom: 16px;
}

.footerLogoWrap {
    max-width: 360px;
    margin: 0 auto;
}

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

.footerAddress {
    margin: 40px 0 24px 0;
}



.footerPhone {
    color: #FEDC00;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
}

.footerPhone:hover {
    color: #FEDC00;
}

.customFooteBorderRight {
    border-right: 1px solid rgba(255, 255, 255, 0.20);
}

.footerBottom {
    background-color: #1D3766;
    padding: 17px 0 17px 0;
}

.footerBottomLinksWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.footerBottomLink {
    color: rgba(255, 255, 255, 0.40);
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.footerBottomLink:hover {
    color: rgba(255, 255, 255, 0.40);
}

.footerBottomLinkAfter {
    position: relative;
}

.footerBottomLinkAfter::after {
    content: '';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.40);
    width: 1px;
    height: 15px;
}

.socailIconsContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 40px;
}

.socailIcon {
    background-color: #1D3766;
    color: #FEDC00;
    padding: 15px 20px;
    font-size: 20px;
}

.footerLocationHeading {
    color: #FFF;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
}

.siteMapMobileHeader {
    display: none;
}

.customBorderTop {
    border-top: 1px solid #FFFFFF1A;
    ;
}

/* footer css ends here */

/* home page css starts here */
.headerWrapper {
    position: relative;
    padding-top: 34%;
    margin-top: -10px;
}

.homeBranCard{
    height: 100%;
}

.headerWrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(29, 55, 102, 0.40);
}

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

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

.headerBtnWrap {
    margin-top: 40px;
}

.inventorySearchResult {
    margin-bottom: 10px;
    border-bottom: 1px solid black;
}
.conetntSectionContainer {
    padding: 15px;
}
.invTitle {
    color: black;
}
.invPrice {
    color: black;
}
.invMiles {
    color: red;
}

.homeBlogLink{
    color: #ff0000;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    text-decoration: underline;
}

.homeSearchSection {
    margin: 44px 0;
    padding: 0 15px;
    position: relative;
}

.homeSearchContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px;
}

.homeSearchWrapper {
    width: 400px;
    display: flex;
    justify-content: center;
}

.homeSearch {
    border-radius: 2px;
    border: 1px solid #D9D9D9;
    border-right: 0;
    color: rgba(0, 0, 0, 0.60);
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 12px 16px;
    outline: none;
    width: calc(400px - 48px);
}

.homeSearchBtn {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background-color: #1D3766;
    border: 1px solid #1D3766;
    outline: none;
}

.homeBrandImageContainer {
    position: relative;
    padding-top: 142%;
    height: 100%;
}

.customCenterCardMargin{
    margin: 0 5px;
}

.homeBrandImageContainer::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 30%;
    width: 100%;
    background: linear-gradient(180deg, rgba(29, 55, 102, 0.00) 0%, rgba(29, 55, 102, 0.80) 100%);
}

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

.homeBrandLogoWrap {
    max-width: 240px;
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 2;
}

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

.welcomeSection {
    margin: 80px 0;
}

.welcomeImageContainer {
    max-width: 680px;
}

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

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

.welcomTextInnerWrap {
    max-width: 680px;
}

.paraWrapper {
    margin: 24px 0 40px 0;
}

.welcomAwardWrap {
    max-width: 600px;
    margin-bottom: 40px;
}

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

.btnWrap {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
}

.inventoryLinkCard {
    position: relative;
    height: 100%;
}

.inventoryImageContainer {
    position: relative;
    padding-top: 50%;
    height: 100%;
    min-height: 300px;
}

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

.inventoryLinkWrap {
    position: absolute;
    right: 0;
    bottom: 80px;
    z-index: 2;
}

.inventoryLinkBtn {
    color: #FFF;
    text-align: right;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
    padding: 4px 28px;
    border-radius: 2px 0px 0px 2px;
    background: #1D3766;
    display: inline-flex;
    gap: 16px;
}

.inventoryLinkBtn:hover {
    color: #FFF;
}

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

.newArrivalHeaderWrap {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

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

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

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

.brokerageInventoryCardContent {
    border-right: 1px solid #D9D9D9;
    border-bottom: 1px solid #D9D9D9;
    border-left: 1px solid #D9D9D9;
    padding: 8px 24px 17px 24px;
}

.brokerageInvenvtoryTitle {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

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

.mailbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #FFF;
    text-align: center;
    font-family: "Source Sans 3", sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 40px;
    letter-spacing: 0.8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    outline: none;
    transition: all 0.4s;
    background-color: #1D3766;
    text-transform: capitalize;
    border: none;
    border-radius: 4px;
    padding: 3px 20px;
}

.mailbtn:hover {
    color: #FFF;
}

.mailbtn img {
    flex: 0 0 16px;
}

.pricingInfo {
    display: flex;
    align-items: center;
    gap: 20px;
}

.actualPrice {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.monthlyPricing {
    color: #7C7C7C;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    position: relative;
}

.monthlyPricing::before {
    content: '';
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 15px;
    background-color: #7C7C7C;
}

.cardSpecsPara {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.cardSpecsPara img {
    flex: 0 0 14px;
}

.brokerageCardSpecsContainer {
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
    border-top: 1px solid #E3E4E6;
    padding-top: 5px;
}

.cardsSpecsParaBeforLine {
    position: relative;
}

.cardsSpecsParaBeforLine::before {
    content: '';
    position: absolute;
    left: -15px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background-color: #D9D9D9;
}

.facilityCardWrap {
    position: relative;
    height: 100%;
}

.facilityCardWrap::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, rgba(29, 55, 102, 0.00) 0%, rgba(29, 55, 102, 0.80) 100%);
}

.facilityImageWrap {
    position: relative;
    padding-top: 57%;
    height: 100%;
}

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

.faciliyContent {
    position: absolute;
    right: 40px;
    bottom: 32px;
    z-index: 2;
}

.aboutUsSection {
    margin: 80px 00;
}

.aboutUsItem {
    display: flex;
    align-items: center;
    gap: 25px;
    max-width: 350px;
    margin: 0 auto;
    padding: 48px 15px;
}

.aboutUsImageWrap {
    border-radius: 2px;
    border: 1px solid #1D3766;
    background: #1D3766;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    flex: 0 0 50px;
}

.facilityTitle {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.facilityPara {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.facilityCustomBorder {
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
}

.newArrivalCarousel {
    position: relative;
}

.newArrivalCarousel .owl-prev {
    position: absolute;
    left: -2%;
    top: 50%;
    transform: translateY(-50%);
}

.newArrivalCarousel .owl-next {
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
}

.testimonialSection {
    margin-bottom: 120px;
}

.testimonoialCard {
    height: 100%;
    padding: 40px;
    border-left: 1px solid #EEEEEE;
    border-right: 1px solid #EEEEEE;
}

.testimonialInnerWrap {
    max-width: 440px;
}

.headingWrap {
    margin-bottom: 40px;
}

.testimonialRatingWrap {
    max-width: 152px;
}

.testomonialParaWrap {
    margin: 30px 0 20px 0;
}

.clientName {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.testimonialCarousel {
    position: relative;
}

.testimonialCarousel .owl-prev {
    position: absolute;
    left: -2%;
    top: 50%;
    transform: translateY(-50%);
}

.testimonialCarousel .owl-next {
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
}

/* home page css ends here */

/* trade page css starts here */
.tradeHeroSection {
    margin: 80px 0;
}

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

.tradeHeroTextInnerWrap {
    max-width: 680px;
}

.tradeHeroParaWrap {
    margin: 24px 0 40px 0;
}


.tradeFeatureInnerWrap {
    max-width: 680px;
    border-radius: 2px;
    background: #1D3766;
    padding: 64px 68px 73px 68px;

}

.tradeFeatureItem {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 24px;
}

.brokerageInventorySection {
    border-top: 1px solid #EEEEEE;
    padding: 80px 0;
}

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

.cardLocationText {
    color: #7C7C7C;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
}

.pageFormContainer {
    padding: 80px 0 89px 0;
    border-top: 1px solid #eee;
}

.formWrapper {
    max-width: 500px;
    margin: 0 auto;
}

.formFieldWrapper {
    margin-bottom: 16px;
}

.formField {
    color: rgba(0, 0, 0, 0.60);
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    width: 100%;
    padding: 12px 16px;
    border-radius: 2px;
    border: 1px solid #D9D9D9;
    outline: none;
    position: relative;
}

.selectField {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    padding-right: 40px;
    background-image: none;
    position: relative;
    cursor: pointer;
}

.selectFieldWrapper::after {
    content: '';
    position: absolute;
    top: 40%;
    right: 20px;
    width: 16px;
    height: 16px;
    background-image: url('../images/trade/dropDownIcon.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%);
    pointer-events: none;
}

.formBoldText {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.lengthInputWrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 2px;
    border: 1px solid #D9D9D9;
    padding: 12px 16px;
    background-color: #fff;
}

.lengthLabel {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

.lengthInputField {
    width: 40px;
    border: none;
    outline: none;
    text-align: center;
    font-weight: 500;
    background: transparent;
}

.unitLabel {
    font-weight: 500;
}

.lengthInputs {
    display: flex;
    align-items: center;
    gap: 8px;
}

.formFadeText {
    color: rgba(0, 0, 0, 0.60);
    font-family: "Source Sans 3";
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.formBtnWrap {
    text-align: center;
    margin-top: 40px;
}

#formLink {
    scroll-margin-top: 80px;
}

/* ========================++++++++++++++++++++++++======================= */
/* drop zone css starts here */
.customDropzone * {
    pointer-events: none;
}

.customDropzone .dzMessage {
    font-weight: 600;
    font-size: 16px;
    pointer-events: none;
}

.dz-message {
    display: none;
}

.textMuted {
    color: #6c757d;
    font-size: 13px;
    margin-top: 4px;
}

.dzRemove {
    font-size: 13px;
    color: #dc3545;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 10px;
}


.customDropzone {
    position: relative;
    border: 2px dashed #ccc;
    border-radius: 10px;
    background-color: #f9f9f9;
    padding: 30px;
    text-align: center;
    color: #000;
    cursor: pointer;
    pointer-events: auto;
    width: 100%;
    margin: 20px 12px 0 12px;
}


.customDropzone .dzMessage * {
    pointer-events: none;
}


.dz-preview * {
    pointer-events: auto;
}


.dzRemove {
    font-size: 13px;
    color: #dc3545;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 10px;
}


.dz-success-mark,
.dz-error-mark {
    display: none !important;
}

.dz-remove {
    background-color: #ff0000;
    padding: 5px 10px;
    color: #fff;
    font-weight: 500;
    border-radius: 5px;
    margin-top: 20px;
    display: inline-block;
}

.dz-remove:hover {
    color: #fff;
}

/* ========================++++++++++++++++++++++++======================= */
/* drop zone css ends here */

/* trade page css ends here */

/* service page css starts here */
.commonHeroSection {
    margin: 80px 0;
}

.CommonHerTextInnerWrap {
    max-width: 800px;
}

.commonHeroParaWrap {
    margin-top: 24px;
}

.commonHeroLinkInnerWrap {
    max-width: 320px;
    margin: 0 auto;
}

.commonHeroCallWrap {
    margin-top: 24px;
}

.commonHeroCallTagLine {
    color: #1D3766;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-transform: capitalize;
}

.commonCallPhoneText {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-transform: capitalize;
}

.commonCallPhoneText:hover {
    color: #1D3766;
}

.commonCallText {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-transform: capitalize;
}

.availableServiceSection {
    padding: 80px 0 40px 0;
    border-top: 1px solid #EEEEEE;
}

.availabelServiceCard {
    padding: 0 12px;
    margin-bottom: 40px;
}

.availableServiceContentWrap {
    margin-top: 16px;
}

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

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

.serviceLocationSection {
    background-color: #F8FBFD;
    padding: 80px 0;
}

.serviceLocationCard {
    border-radius: 8px;
    border: 1px solid #EEE;
    background-color: #FFF;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.10);
    padding: 52px 40px 44px 40px;
    margin: 0 12px;
    height: 100%;
}

.locationPhoneText {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.locationPhoneText:hover {
    color: #1D3766;
}

.sectionBtnWrap {
    margin-top: 40px;
}

.contactFormInnerWrap {
    max-width: 480px;
    border-radius: 2px 0px 0px 2px;
    background-color: #F8FBFD;
    padding: 40px;
}

/* service page css ends here */

/* contact page css starts here */
.contactHeroSection {
    margin-top: 56px;
}

.contactTextInnerWrap {
    max-width: 800px;
}

.contactAddressSection {
    margin: 120px 0;
}

.contactAddressCard {
    padding: 0 13.5px;
}

.contactAddressImageWrap {
    position: relative;
    padding-top: 70%;
}

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

.contactAddressContent {
    border: 1px solid #D9D9D9;
    padding: 32px 40px 33px 40px;
}

.contactAddressCardTitle {
    color: #1D3766;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
}

.contactAddressDetailWrap {
    text-align: center;
    margin-top: 16px;
}

.contactAddressPhone {
    color: #000;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.contactAddressTag {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

/* contact page css ends here */

/* financing page css starts here */
.financingHeroCardWrap {
    border-radius: 2px;
    background-color: #1D3766;
    padding: 40px 40px 48px 40px;
    max-width: 320px;
}

.financingHeroParaWrap {
    margin: 16px 0 24px 0;
}
/* Chrome, Safari, Edge */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

.loanCalculatorContainer {
    max-width: 560px;
}

.loanCalculatorFieldsContainer {
    padding: 40px 40px 44px 40px;
    border-radius: 2px 0 0 2px;
    background: #F8FBFD;
    min-height: 480px;
}

.loanCalculatorResultWrap {
    border-radius: 0 2px 2px 0;
    background: #1D3766;
    padding: 40px 40px 44px 40px;
    min-height: 480px;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.loanFieldWrap {
    margin-bottom: 12px;
}

.priceInputWrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.20);
}

.currencySymbol {
    pointer-events: none;
    padding-bottom: 10px;
    color: rgba(0, 0, 0, 0.60);
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
}

.priceInputWrapper .loanFieldInput {
    border: 0;
    padding-bottom: 10px;
    color: #000;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    width: 100%;
    outline: none;
    background-color: transparent;
    padding-right: 0;
}

.loanFieldLabel {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin-bottom: 10px;
}

.percentSymbol {
    position: absolute;
    right: 10px;
    font-size: 16px;
    color: #333;
    pointer-events: none;
    color: rgba(0, 0, 0, 0.60);
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 20px;
    padding-bottom: 10px;
}

.calculatedAmount {
    color: #FFF;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
}

.calculatedAmoutWrapper {
    margin: 24px auto 80px auto;
}

.loanCalculatorNewArrivalCarousel {
    position: relative;
}

.loanCalculatorNewArrivalCarousel .owl-prev {
    position: absolute;
    left: -2%;
    top: 50%;
    transform: translateY(-50%);
}

.loanCalculatorNewArrivalCarousel .owl-next {
    position: absolute;
    right: -2%;
    top: 50%;
    transform: translateY(-50%);
}


/* financing page css ends here */

/* career page css starts here */
.commonTopTextSection {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commonTopTextInnerWrap {
    max-width: 650px;
}

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

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

.availablePositionsSection {
    margin: 80px 0 120px 0;
}

.availableJobCard {
    padding: 36px 30px;
    margin: 0 20px;
    border-radius: 2px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
    height: 100%;
}

.jobCardTitle {
    color: #231F20;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.jobDescriptionBtnWrap {
    margin-top: 24px;
    margin-bottom: 8px;
}

#availablePosition {
    scroll-margin-top: 120px;
}

.applyModalWrapper {
    max-width: 560px !important;
}

.modalTitleWrap {
    margin-bottom: 30px;
}

#applyModal .modal-header {
    border: none;
    padding-top: 40px;
}

#applyModal .modal-footer {
    border: none;
    padding-bottom: 60px;
}

.upload-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 20px;
    border-radius: 2px;
    border: 1px solid #D9D9D9;
}

#uploadButton {
    width: 45%;
    padding: 14px 15px 11px 15px;
}

.file-name {
    width: 55% !important;
}

.applyformInnerWrap {
    max-width: 400px;
    margin: auto;
}

.applyModalTitle {
    color: #1D3766;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
}

.resumeFormInput {
    color: rgba(0, 0, 0, 0.60);
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding-bottom: 15px;
    outline: none;
    width: 100%;
    border: none;
}

.jobHeading {
    color: #000;
    text-align: right;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 30px;
    text-transform: uppercase;
}

/* career page css ends here */

/* marine insurance page css starts here */
.customMarginBottom {
    margin-bottom: 80px;
}

/* marine insurance page css ends here */

/* service resources page css starts here */
.ourManualSection {
    border-top: 1px solid #EEEEEE;
    padding: 80px 0;
}

.ownerManualCard {
    position: relative;
    margin: 0 8px;
    padding-top: 133%;
}

.ownerManualCard::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 50%;
    width: 100%;
    background: linear-gradient(180deg, rgba(29, 55, 102, 0.00) 0%, rgba(29, 55, 102, 0.80) 100%);
}

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

.ownerManualLogoWrap {
    position: absolute;
    left: 50%;
    bottom: 104px;
    transform: translateX(-50%);
    max-width: 188px;
    z-index: 1;
}

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

.arrownImageWrap {
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 1;
}

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

.inverterManualWrap {
    margin-top: 80px;
}

.inverterCard {
    padding: 10px 32px;
    border-radius: 4px;
    border: 1px solid #D9D9D9;
    background: #FAFAFA;
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0 12px;
}

.heatingCard {
    padding: 10px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 4px;
    border: 1px solid #D9D9D9;
    background: #FAFAFA;
    box-shadow: 4px 4px 8px 0 rgba(0, 0, 0, 0.08);
    margin: 0 12px;
}


.downloadFileText {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
}

/* service reources page css ends here */

/* brand page css starts here */
.headerWithLinkSection {
    position: relative;
    padding-top: 31%;
    min-height: 500px;
}

.headerWithLinkSection .headerWithLinkMedia {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image_banner_pending {
    display: block;
    z-index: 1;
    position: absolute;
    top: 45px;
    opacity: .8;
    padding: 10px 65px;
    font-size: 16px;
    font-weight: 600;
    transform: rotate(316deg);
    left: -77px;
    text-align: center;
    width: 300px;
}


.production_image_banner {
    color: #fff;
    background: #B41933;
}

.headerLinkContainer {
    position: absolute;
    left: 50%;
    bottom: -48px;
    transform: translateX(-50%);
    border-radius: 4px;
    border: 1px solid #EEE;
    background: #FFF;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.05);
    z-index: 4;
    min-width: 784px;
    padding: 20px 15px;
}

.headerLinkList {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
}

.headerLink {
    color: #000;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 40px;
}

.headerLink:hover {
    color: #000;
}

.headerLinkAfter {
    position: relative;
}

.headerLinkAfter::after {
    content: '';
    width: 1px;
    height: 40px;
    background-color: #EEEEEE;
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
}

.brandHeroSection {
    margin: 120px 0 80px 0;
    padding: 0 15px;
}

.brandHeroContainer {
    display: flex;
    justify-content: center;
    gap: 156px;
}

.brandHeroLogoWrap {
    max-width: 328px;
}

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

.brandHeroBtnWrap {
    margin-top: 24px;
    text-align: center;
}

.brandHeroTextContainer {
    max-width: 800px;
}

.brandBannerWrap {
    margin: 0 auto;
    max-width: 1320px;
    border-radius: 2px;
    background: #1D3766;
    padding: 20px 16px;
    text-align: center;
}

.brandPromotionText {
    color: #FFF;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.brandGallerySection {
    margin: 80px 0;
}

.galleryImageWrap {
    position: relative;
    padding-top: 58%;
}

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

.brandModelsSection {
    margin-bottom: 80px;
}

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

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

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

.brandModelContentwrap {
    margin-top: 8px;
}

.brandModelTitle {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.brandListingLinkWrap {
    margin-top: 24px;
    text-align: center;
}

/* brand page css ends here */

/* model detail page css starts here */
.performanceList .modelSpecsListItem{
    display: flex;
    justify-content: flex-start;
    padding-bottom: 10px;
    padding-top: 10px;
}
.performanceList .modelSpecsListItem p{
    width: unset;
}
.modelDetailWrapper {
    margin-top: 40px;
}

.modelImagesSection {
    display: flex;
    gap: 8px;
}

.modelCarouselWrap {
    width: 80%;
}

.modelOtherImagesSection {
    width: 20%;
    max-height: 800px;
    overflow-y: auto;
}

.modelOtherImagesInnerWrap {
    max-height: 800px;
    overflow-y: auto;
}

.modelCarouselImageWrap {
    position: relative;
    padding-top: 65%;
}

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

.modelDetailOtherImageWrap {
    position: relative;
    padding-top: 62%;
    margin-bottom: 8px;
}

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

.shareIconContainer {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 40px;
    height: 40px;
}

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

.shareIconContainer {
    background-color: #0F0F31;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.shareIconContainer span {
    color: #fff;
}

.zoomBtnWrap {
    position: absolute;
    bottom: 35px;
    right: 30px;
    z-index: 2;
}

.zoomBtn img {
    width: 14px !important;
    height: 14px;
}

.zoomBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-radius: 20px;
    background: rgba(0, 0, 0, 0.40);
    color: #FFF;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    padding: 5px 21px;
    border: none;
    outline: none;
}

.zoomBtn:hover {
    color: #FFF;
}

.desktopShareBtn {
    display: block;
}

.mobileShareBtn {
    display: none;
}

.modelCarousel {
    position: relative;
}

.modelCarousel .owl-prev {
    position: absolute;
    left: 33px;
    top: 50%;
    transform: translateY(-50%);
}

.modelCarousel .owl-next {
    position: absolute;
    right: 33px;
    top: 50%;
    transform: translateY(-50%);
}

.modelSpecsSection {
    margin: 0 auto;
    margin-top: 40px;
    max-width: 90%;
}

.modelSpecsTitle {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.modelSpecsContainerHeading {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    padding: 20px 15px;
}

.specsList {
    list-style: none;
    max-width: 450px;
}

.specsList li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding-bottom: 10px;
}

.specsList li img {
    flex: 0 0 10px;
    height: 10px;
}

.modelSpecsLabel {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
}

.modelSpecsText {
    color: #000;
    text-align: right;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 25px;
}

.specsDownloadBtnWrap {
    margin-top: 40px;
}

.specsHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    cursor: pointer;
}

.bannerImageWrapper{
    position: relative;
    padding-top: 35%;
}

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

.bannerCarousel .owl-prev {
    position: absolute;
    left: -25px;
    top: 50%;
    transform: translateY(-50%);
}

.bannerCarousel .owl-next {
    position: absolute;
    right: -25px;
    top: 50%;
    transform: translateY(-50%);
}

.headerCarousel .owl-dots {
    position: absolute;
    right: 5%;
    bottom: 5%;
}

.headerVideoWrapper{
    position: relative;
    padding-top: 35%;
    min-height: 350px;
}

.headerOverlay{
    position: relative;
}

/* start event css */

.blogListingCardWrap {
    padding: 0 20px;
    margin-bottom: 40px;
}
 
.blogListingImageWrap {
    position: relative;
    padding-top: 50%;
}
 
.blogListingImageWrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
h4.blogListingCardTitle {
    color: #1D3766;
    font-size: 18px;
    font-weight: 800;
    line-height: 20px;
    margin-top: 16px;
}
 
.blogDetailImageContainer img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
 
.blogDetailImageContainer {
    position: relative;
    padding-top: 50%;
}
 
.similarPostCard {
    margin-bottom: 30px;
}
 
.similarPostImagContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blogHeaderTag{
        color: #1D3766;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 30px;
}

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

.blogTab{
    color: #000;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    padding-bottom: 10px;
}

.activeBlogTab{
    border-bottom: 3px solid #1D3766;
}

/* blog detail page css starts here */
.blogDetailPageWrapper {
    margin: 80px 0 120px 0;
}

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

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

.blogDetailTextContainer {
    margin-top: 30px;
}

.blogHeading {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: -0.8px;
    text-transform: uppercase;
}


.blogPara {
    color: #1B1D36;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 30px;
}

.similarHeading {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 25px;
    font-style: normal;
    font-weight: 500;
    line-height: 25px;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.similarPostsContainer {
    padding-left: 50px;
}

.similarPostHeaderWrapper {
    margin-bottom: 30px;
}

.similarPostTitleWrapper {
    margin-top: 10px;
}

.similarPostCard {
    margin-bottom: 40px;
}

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

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

.similarPostTitle {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
}

.tagLineText {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 40px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.eventsCardContainer {
    margin-bottom: 90px;
}

/* blog detail page css ends here */

/* end evevnt css */

.headerOverlay::after{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.40);
}

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

.modelDetaiFormContainer {
    border-radius: 2px;
    border: 1px solid #D9D9D9;
    background: #FBFBFB;
    padding: 24px 23px;
    max-width: 346px;
    margin: 40px auto 0 auto;
}

.modelDetailFormHeading {
    color: #1D3766;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.modelSelectField {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    padding-right: 40px;
    background-image: none;
    position: relative;
    cursor: pointer;
}

.modelSelectFieldWrapper::after {
    content: '';
    position: absolute;
    top: 32%;
    right: 28%;
    width: 16px;
    height: 16px;
    background-image: url('../images/trade/dropDownIcon.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: translateY(-50%);
    pointer-events: none;
}

.modelDetailButtonWrap {
    max-width: 346px;
    margin: 24px auto 0 auto;
}

.modelInventoryBtnWrap {
    text-align: center;
    margin-top: 40px;
}

/* model detail page css ends here */

/* crew page css starts here */
.crewPageHeroSection {
    margin: 56px 0 80px 0;
}

.crewPageHeroWrap {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.crewHeroBtnWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.crewHeadingWrap {
    position: relative;
    margin-bottom: 45px;
}


.crewHeadingWrap .mainHeading {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 5px 3%;
}

.crewCard {
    padding: 0 20px;
}

.crewImageWrap {
    position: relative;
    padding-top: 66%;
}

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

.crewContentWrap {
    border-radius: 2px;
    border-right: 1px solid #EEE;
    border-bottom: 1px solid #EEE;
    border-left: 1px solid #EEE;
    background: #FFF;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
    padding: 16px 20px 29px 20px;
}

.crewTitle {
    color: #000;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.crewPosition {
    color: rgba(0, 0, 0, 0.60);
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.crewPhone {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.crewPhone:hover {
    color: #1D3766;
}

.crewBtnWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    margin-top: 24px;
}

.crewSection {
    margin: 40px 0 80px 0;
}

.crewSection .modal-footer {
    padding-bottom: 40px;
}

/* crew page css ends here */

/* bio page with inventory css starts here */
.bioPageImageWrap {
    height: 100%;
}

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

.bioPageTextSection {
    background-color: #1D3766;
    padding: 80px 10% 40px 10%;
    height: 100%;
}

.bioTitle {
    color: #FFF;
    font-family: "Source Sans 3";
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.bioPara {
    color: #FFF;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.bioFormContainer {
    background-color: #F8FBFD;
    padding: 40px 15px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bioFormInnerWrap {
    max-width: 360px;
}

.bioFormPhone {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.bioFormHeading {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    margin: 24px 0 16px 0;
}

.bioInventoryHeadingWrapper {
    position: relative;
    margin-bottom: 40px;
}

.bioInventoryHeadingWrapper .mainHeading {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    background-color: #fff;
    padding-right: 40px;
}

/* bio page with invnetory css ends here */

/* video gallery page css starts here */
.videoGalleryHeaderSection {
    margin: 56px 0 80px 0;
    padding: 0 15px;
}

.videoFilterTabsList {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    list-style: none;
}

.videoFilterTab {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #000;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    transition: all 0.4s;
}

.videoFilterTab:hover {
    color: #000;
}

.videoFilterTab.activeVideoTab {
    color: #FFF;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    border-radius: 2px;
    background: #1D3766;
    padding: 8px 42px;
}

.videoTabAfterLine {
    position: relative;
}

.videoTabAfterLine::after {
    content: '';
    position: absolute;
    right: -40px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 24px;
    background-color: #D9D9D9;
}

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

#boat_search:focus {
    /* border: 1px solid black; */
    outline: none;
    border-radius: 2px;
}

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

.tt-suggestion {
    position: absolute;
    top: 103%;
    z-index: 10;
    background: #fff;
    height: 500px;
    overflow-y: auto;
}

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

.videoLibraryCardContent {
    margin-top: 16px;
}

.videoTitle {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.videoLibrarySection {
    margin-bottom: 80px;
}

/* video gallry page css ends here */

/* location page css starts here */
.commonHeaderSection {
    position: relative;
    padding-top: 31%;
    min-height: 300px;
}

.commonHeaderMedia {
    min-height: 300px;
}

.commonHeaderSection::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: rgba(29, 55, 102, 0.40);
}

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

.commonHeaderContentWrap {
    position: absolute;
    left: 50%;
    bottom: 112px;
    transform: translateX(-50%);
    width: 100%;
    text-align: center;
    z-index: 1;
    padding: 0 15px;
}

.locationHeroImageWrap {
    position: relative;
    padding-top: 73%;
    max-width: 600px;
}

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

.locationHeroSection {
    margin: 120px 0;
}

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

.locationHeroTextInnerWrap {
    max-width: 600px;
}

.pageCommonSection {
    margin: 80px 0;
}

.locationAddressAndMapSection {
    background-color: #F8FBFD;
    padding: 80px 0;
}

.locationMap {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 520px;
}

.locationAddressContainer {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.locationAddressInnerWrap {
    max-width: 500px;
}

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

.locationAddressIcon {
    color: #FEDC00;
    background-color: #1D3766;
    padding: 2px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border-radius: 2px;
}

.locationBoldText {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

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

/* location page css ends here */

/* testimonials page css starts here */
.testimonialsHeader {
    margin: 56px auto 80px auto;
    max-width: 800px;
}

.testimonialsCard {
    border-radius: 2px;
    border: 1px solid #D9D9D9;
    background: #FFF;
    margin: 0 20px;
    box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);
    padding: 40px;
    margin-bottom: 40px;
}

.reviewerName {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.testimonialNameWrap {
    position: relative;
    margin-top: 30px;
}

.testimonialNameWrap::after {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    width: 80px;
    height: 2px;
    background-color: #FEDC00;
}

.testimonialsCardsSection {
    margin-bottom: 80px;
}

/* testimonials page css ends here */

/* build a boat page css starts here */
.buildBoatCardContainer {
    margin-bottom: 120px;
}

.buildABoatCard {
    position: relative;
    padding-top: 57%;
    min-height: 400px;
}

.buildABoatCard::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 151px;
    background: linear-gradient(180deg, rgba(29, 55, 102, 0.00) 0%, rgba(29, 55, 102, 0.80) 100%);
}

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

.buildBoatLogo {
    position: absolute;
    left: 40px;
    bottom: 40px;
    max-width: 160px;
    z-index: 2;
}

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

.buildBoatLinkWrap {
    position: absolute;
    right: 0;
    bottom: 40px;
    z-index: 2;
}

.buildBoatLink {
    border-radius: 2px 0 0 2px;
    background: #1D3766;
    color: #FFF;
    text-align: right;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    padding: 8px 40px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border: none;
    outline: none;
}

.buildBoatLink:hover {
    color: #FFF;
}

/* build a boat page css ends here */

/* partners page css starts here */
.partnersImageWrapper {
    margin: 0 20px;
    position: relative;
    padding-top: 88%;
}

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

.partnersTextWrapper {
    margin: 0 20px;
    height: 100%;
    display: flex;
    align-items: center;
}

.partnersTextInnerWrap {
    max-width: 360px;
}

.partnersHeading {
    color: #000;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.partnerCardContainer {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    max-width: 1470px;
    margin: 0 auto;
}

.partnerCard {
    flex: 1 1 640px;
}

.partnersSection {
    margin-bottom: 80px;
}

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

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

.manufacturerCard::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(180deg, rgba(29, 55, 102, 0.00) 0%, rgba(29, 55, 102, 0.80) 100%);
}

.manufacturerLogoWrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 44px;
    max-width: 188px;
    z-index: 1;
}

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

.manufacturerCircledArrow {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -30px;
    z-index: 1;
}

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

.ownersSection {
    margin: 120px 0;
}

.engineManualCards {
    padding: 0 40px;
}

.engineManualImageWrap {
    position: relative;
    padding-top: 55%;
    min-height: 120px;
}

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

.engineManualTextSection {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1D3766;
    min-height: 120px;
}

.engineManualTextInnerWrap {
    max-width: 191px;
}

.engineManualTextInnerWrap .engineLogo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.engineManualLink {
    color: #FFF;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.engineManualLink:hover {
    color: #FFF;
}

.connectSection {
    background-color: #F8FBFD;
    padding: 40px 15px 80px 15px;
    margin: 80px 0;
}

.connectLinksContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
}


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

.connectLinkPara {
    color: #1D3766;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px;
}

.marinaCard {
    margin: 0 4px;
    position: relative;
    padding-top: 56%;
}

.marinaCard::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 120px;
    background: linear-gradient(180deg, rgba(29, 55, 102, 0.00) 0%, rgba(29, 55, 102, 0.80) 100%);
}

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

.marinaCardLinkWrap {
    position: absolute;
    right: 40px;
    bottom: 32px;
    z-index: 1;
}

.marinaCardLink {
    color: #FFF;
    text-align: right;
    font-family: "Source Sans 3";
    font-size: 24px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px;
    background-color: transparent;
    border: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marinaCardLink:hover {
    color: #FFF;
}

/* partners page css ends here */

/* faq page css starts here */
.faqContainer {
    max-width: 880px;
    margin: 0 auto 120px auto;
}

.faqCard {
    padding: 24px 16px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    border-color: #EEEEEE;
}

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

.questionText {
    color: #222;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 900;
    line-height: 24px;
}

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

.faqAnswer.activeFaq {
    display: block;
}

.regularBlackParaEmail {
    color: #222;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: none;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.faqHeaderIcon {
    position: relative;
    transition: transform 0.3s ease;
}

.faqHeaderIcon.activeFaq {
    transform: rotate(180deg);
}

/* faq page css ends here */

/* about page css starts here */
.aboutHeaderSection {
    position: relative;
}

.aboutCarousel {
    position: relative;
}

.aboutCarousel::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: rgba(29, 55, 102, 0.40);
}

.awardContainer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    padding: 0 15px;
    flex-wrap: wrap;
}

.awardWrap {
    flex: 0 0 187px;
}

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

.awardBtnWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 46px;
}

.historySection {
    border-top: 1px solid #EEEEEE;
    margin: 80px 0;
    padding-top: 80px;
}

.ourHistoryHeaderWrap {
    display: flex;
    justify-content: space-between;
    gap: 40px;
}

.ourHistoryParaWrap {
    max-width: 1232px;
}

.ourHistoryHeaderWrap {
    margin-bottom: 40px;
}

.ourHistoryContentWrap {
    margin-top: 8px;
}

.ourHistoryCard {
    margin-bottom: 40px;
}

.historyCardTitle {
    color: #1E1E1E;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.ourHistoryImageWrap {
    position: relative;
    padding-top: 66%;
}

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

/* about page css ends here */

/* status page css start here */

.commonSection {
    margin-bottom: 80px;
}
.commonSectionInnerWrap {
    display: flex;
    gap: 120px;
    max-width: calc(100% - 15%);
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}
.commonSectionTextWrapper {
    width: 50%;
    max-width: 600px;
}
.commonSectionImageWrapper {
    width: 50%;
}
.commonSectionImageWrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.commonSectionLinkWrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.featured-btn {
    color: #FFF;
    text-align: center;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px;
    text-transform: uppercase;
    background: #222;
    display: inline-block;
}
.thank-you-content-box {
    width: 50%;
}
.thank-you-inner-box{
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
}

.firstSectionTopMargin{
    margin-top: 60px;
}

/* status page css start here */

.grecaptcha-badge {
    display: none;
}

.recaptcha-disclaimer {
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-top: 10px;
    padding: 5px 0;
}

/* guide page css starts here */

.xcontainer{
    max-width: calc(100% - 15%);
    margin: 0 auto;
}
.guide-to-purchasing-content{
    padding: 80px 0;
}
.purchasing-img {
    position: relative;
    padding-top: 50%;
}
.purchasing-img img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}
.purchase-steps-list{
    padding-left: 20px;
}
.btn-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start;
}

/* summer sizzle event page css start here */
.summer-sizzle-header{
    position: relative;
    padding: 20px 15px;
    margin-top: 40px;
}
.summer-sizzle-header::after{
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 4px;
    background-color: #00000012;
}
.summer-sizzle-header h3{
    display: inline-block;
    background: white;
    position: absolute;
    top: 50%;
    z-index: 10;
    padding: 0 15px;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}
.limited-offer-box{
    display: flex;
    gap: 30px;
    max-width:calc(100% - 30%);
    margin: 50px auto;
}
.limited-offer-col-1{
    width: 33.33%;
}
.limited-offer-col-2{
    width: 66.67%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.limited-offer-img{
    position: relative;
    padding-top: 66%;
}
.limited-offer-img img{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.limited-offer-content{
    background-color: #f9fafa;
    padding: 50px;
    text-align: center;
}
.limited-offer-content h4{
    color: #1E1E1E;
    font-family: "Source Sans 3";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
}
.limited-offer-content p{
    color: #666;
    font-family: "Source Sans 3";
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 20px 0 20px 0;
}
.limited-offer-list{
    padding-left: 20px;
    margin-bottom: 50px;
}
.limited-offer-list-2 h6{
    color: #1E1E1E;
    font-family: "Source Sans 3";
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 26px;
}
.limited-offer-list-2 p{
    color: #666;
    font-family: "Source Sans 3";
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    margin: 0 0 0 0;
}
@media screen and (max-width: 1700px) {
    .desktopNavInnerWrap {
        padding-left: 0;
    }

    .similarPostsContainer {
        padding-left: 30px;
    }
}

@media screen and (max-width: 1600px) {
    .loanCalculatorFieldsContainer{
        padding: 40px 20px 44px 20px;
    }
    .desktopNavMenuList {
        gap: 40px;
    }

    .siteLogoWrap {
        max-width: 300px;
    }

    .modelAndPhoneSection {
        gap: 20px;
    }
}

@media screen and (max-width: 1440px) {
    .siteLogoWrap {
        max-width: 250px;
    }

    .desktopNavMenuList {
        gap: 30px;
    }

    .navPhoneWrapper {
        width: 150px;
    }

    .buildBoatLogo {
        left: 15px;
    }

    .brandHeroContainer {
        gap: 40px;
    }

    .similarPostsContainer {
        padding-left: 0;
    }
}

@media screen and (max-width: 1350px) {
    .limited-offer-box {
        max-width: calc(100% - 16%);
    }
    .siteLogoWrap {
        max-width: 200px;
    }
    .xcontainer {
        max-width: calc(100% - 10%);
    }
}

@media screen and (max-width: 1200px) {
    .contactTextInnerWrap {
        margin: 0 auto;
        text-align: center;
    }
    .loanCalculatorContainer {
        max-width: 560px;
        margin: 50px auto 0 auto;
    }
    .desktopNavMenuList {
        gap: 20px;
    }

    .navMenuList {
        font-size: 18px;
    }

    .navPhone {
        font-size: 16px;
    }

    .navPhoneWrapper {
        width: 120px;
    }

    .buildABoatCard::after {
        height: 100%;
    }

    .buildBoatLogo {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .videoFilterTabsList {
        gap: 40px;
    }

    .videoTabAfterLine::after {
        right: -20px;
    }

    .brandHeroContainer {
        gap: 30px;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .brandHeroSection {
        margin: 80px 0 60px 0;
    }
}

@media screen and (max-width: 1100px) {
    .siteLogoWrap {
        max-width: 160px;
    }

    .navMenuList {
        font-size: 16px;
    }
}

@media screen and (max-width: 991px) {
    .limited-offer-box {
        max-width: 100%;
        margin: 50px auto;
        padding: 0 20px;
    }

    .headerVideoWrapper{
        padding-top: 73%;
    }
    
    .xcontainer {
        max-width: 100%;
        margin: 0 auto;
    }
    .btn-box {
        justify-content: center;
        align-items: center;
    }
    .guide-to-purchasing-content {
        padding: 50px 0;
    }
    .desktopHeader {
        display: none;
    }

    .mobileHeader {
        display: block;
    }

    .inverterCard {
        padding: 10px 15px;
    }

    .whiteHeaderHeading {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: 0.5px;
    }

    .headerWrapper {
        min-height: 300px;
    }

    .mainFooter {
        padding: 40px 0 60px 0;
    }

    .desktopShareBtn {
        display: none;
    }

    .mobileShareBtn {
        display: block;
    }

    .siteMapLinkList {
        max-width: 360px;
        margin: 24px auto 0 auto;
        display: none;
    }

    .siteMapHeading {
        display: none;
    }

    .mobileSiteMapHeading {
        color: #FFF;
        font-family: "Source Sans 3";
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: 32px;
    }

    .secondaryFontMainHeading {
        font-size: 40px;
        line-height: 44px;
    }

    .siteMapMobileHeader {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 16px 0;
        border-bottom: 1px solid #FFFFFF33;
        max-width: 360px;
        margin: 0 auto;
        cursor: pointer;
    }

    .siteMapMobileHeader img {
        transition: all 0.3s;
    }

    .rotateFooterIcon {
        position: relative;
        transform: rotate(180deg);
        transition: all 0.3s;
    }

    .whiteHeaderHeading {
        font-size: 32px;
        line-height: 36px;
        letter-spacing: 0.5px;
    }

    .commonHeroSection {
        margin: 64px 0;
    }

    .welcomeSection {
        margin: 64px 0;
    }

    .welcomeImageContainer {
        margin: 0 auto;
    }

    .welcomTextInnerWrap {
        margin: 0 auto;
    }

    .newArrivalSection {
        margin: 64px 0;
    }

    .aboutUsSection {
        margin: 64px 00;
    }

    .partnerCardContainer {
        flex-direction: column;
    }

    .partnerCard {
        flex-basis: unset;
    }

    .blueBtn {
        padding: 3px 10px;
    }

    .testimonialsHeader {
        margin: 40px auto 40px auto;
        padding: 0 15px;
    }

    .ourManualSection {
        padding: 64px 0;
    }

    .inverterManualWrap {
        margin-top: 64px;
    }

    .pageFormContainer {
        padding: 64px 0;
    }

    .downloadFileText {
        line-height: 24px;
        word-break: break-all;
    }

    .tradeHeroSection {
        margin: 64px 0;
    }

    .tradeHeroTextInnerWrap {
        margin: 0 auto;
        text-align: center;
    }

    .tradeFeatureInnerWrap {
        margin: 0 auto;
    }

    .brokerageInventorySection {
        padding: 64px 0;
    }

    .commonHeroParaWrap {
        text-align: center;
    }

    .CommonHerTextInnerWrap {
        margin: 0 auto;
    }

    .availableServiceSection {
        padding: 40px 0 40px 0;
    }

    .serviceLocationSection {
        padding: 40px 0 40px 0;
    }

    .serviceLocationCard {
        text-align: center;
        padding: 44px 15px 44px 15px;
    }

    .buildBoatCardContainer {
        margin-bottom: 60px;
    }

    .videoFilterTabsList {
        gap: 20px;
        flex-wrap: wrap;
    }

    .videoTabAfterLine::after {
        right: -10px;
    }

    .financingHeroCardWrap {
        margin: 0 auto;
    }

    .contactTextInnerWrap {
        padding: 0 15px;
        text-align: center;
    }

    .loanCalculatorContainer {
        margin: 0 auto;
    }

    .headerLinkContainer {
        width: 90%;
        min-width: unset;
    }

    .headerLinkList {
        gap: 40px;
        flex-wrap: wrap;
    }

    .headerLinkAfter::after {
        right: -20px;
    }

    .customMarginBottom {
        margin-bottom: 40px;
    }

    .locationHeroTextInnerWrap {
        text-align: center;
    }

    .locationHeroSection {
        margin: 80px 0 60px 0;
    }

    .brandGallerySection {
        margin: 64px 0;
    }

    .historySection {
        margin: 64px 0;
        padding-top: 64px;
    }

    .awardBtnWrap {
        margin-top: 20px;
    }

    .ourHistoryCard {
        margin-bottom: 30px;
    }

    .contactTextInnerWrap {
        margin: 0 auto;
    }

    .contactFormInnerWrap {
        margin: 0 auto;
    }

    .contactAddressSection {
        margin: 80px 0;
    }

    .locationHeroTextInnerWrap {
        margin: 0 auto;
    }

    .locationHeroImageWrap {
        margin: 0 auto;
    }

    .commonPageBtnWrap {
        justify-content: center;
        flex-wrap: wrap;
    }

    .pageCommonSection {
        margin: 64px 0;
    }

    .locationAddressAndMapSection{
        padding: 64px 0;
    }

    .firstSectionTopMargin{
    margin-top: 40px;
    }

    .commonSectionInnerWrap {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 40px;
    }

    .thank-you-content-box {
        width: 100%;
    }

    .commonSectionImageWrapper {
        width: 100%;
    }

    .commonSectionLinkWrap{
        flex-wrap: wrap;
    }

    .blogPageWrap {
        margin-top: 180px;
    }

    .blogHeadingWrapper {
        margin-bottom: 30px;
    }

    .blogCardWrapper {
        margin-bottom: 20px;
    }

    .eventDateText {
        font-size: 18px;
        letter-spacing: 0.5px;
    }

    .eventsCardContainer {
        margin-bottom: 60px;
    }

    .eventDetailHeroSection {
        margin: 40px 0;
    }

    .blogTabsList {
        gap: 40px;
    }

    .blogHeading {
        font-size: 36px;
        line-height: 36px;
    }

    .blogDetailTextContainer {
        margin-top: 20px;
        text-align: center;
    }

    .blogParaTextWrapper {
        text-align: center;
    }

    .similarPostHeaderWrapper {
        margin-bottom: 20px;
        text-align: center;
    }

    .similarPostTitleWrapper {
        text-align: center;
    }

    .similarPostCard {
        margin-bottom: 30px;
    }

    .blogDetailPageWrapper {
        margin: 60px 0 60px 0;
    }

}

@media screen and (max-width: 767px) {
    .limited-offer-list {
        margin-bottom: 35px;
    }
    .limited-offer-box {
        flex-direction: column;
    }
    .limited-offer-col-1 {
        width: 100%;
    }
    .limited-offer-col-2 {
        width: 100%;
    }
    .limited-offer-list li{
        text-align: center;
        list-style: none;
    }
    .homeSearchContainer {
        flex-direction: column;
        gap: 20px;
    }

    .aboutUsItem {
        padding: 20px 15px;
        margin: unset;
    }

    .secondaryFontMainHeading {
        font-size: 36px;
        line-height: 40px;
    }

    .connectLinksContainer {
        gap: 20px;
        justify-content: flex-start;
    }

    .commonHeroSection {
        margin: 40px 0;
    }

    .ourManualSection {
        padding: 40px 0;
    }

    .inverterManualWrap {
        margin-top: 40px;
    }

    .pageFormContainer {
        padding: 40px 15px;
    }

    .tradeHeroSection {
        margin: 40px 0;
    }

    .brokerageInventorySection {
        padding: 40px 0;
    }

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


    .brandGallerySection {
        margin: 40px 0;
    }

    .historySection {
        margin: 40px 0;
        padding-top: 40px;
    }

    .ourHistoryParaWrap {
        text-align: center;
    }

    .headingWrap {
        margin-bottom: 30px;
    }

    .contactAddressSection {
        margin: 40px 0;
    }

    .contactAddressContent {
        padding: 32px 20px 33px 20px;
    }

    .contactAddressCardTitle {
        font-size: 28px;
        line-height: 30px;
    }

    .contactFormInnerWrap {
        padding: 40px 15px;
    }

    .testimonialsCard {
        padding: 20px;
        margin-bottom: 30px;
        text-align: center;
    }

    .testimonialNameWrap::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .pageCommonSection {
        margin: 40px 0;
    }

    .paraWrapper {
        margin: 20px 0 30px 0;
    }

    .locationAddressAndMapSection{
        padding: 40px 0;
    }

}

@media screen and (max-width: 576px) {
    .videoFilterTab.activeVideoTab {
        padding: 8px 20px;
    }
    .inventoryLinkWrap {
        bottom: 48px;
    }

        .customCenterCardMargin {
            margin: 0 0;
        }

    .whiteHeaderHeading {
        font-size: 28px;
        line-height: 30px;
        letter-spacing: 0px;
    }

    .mainHeadingWhite {
        font-size: 30px;
        line-height: 32px;
        letter-spacing: 0.8px;
    }

    .mainHeading {
        font-size: 30px;
        line-height: 36px;
        letter-spacing: 0;
    }

    .siteMapLinkList {
        max-width: unset;
        margin-top: 15px;
    }

    .siteMapMobileHeader {
        max-width: unset;
    }

    .partnersImageWrapper {
        margin: 0 10px;
    }

    .partnersTextWrapper {
        margin: 0 10px;
    }

    .footerBottomLinksWrap {
        flex-direction: column;
        gap: 15px;
    }

    .secondaryFontMainHeading {
        font-size: 30px;
        line-height: 36px;
    }

    .footerBottomLinkAfter::after {
        display: none;
    }

    .blogHeading {
        font-size: 30px;
        line-height: 30px;
    }

    .homeSearchWrapper {
        width: 100%;
        margin: 0 auto;
    }

    .testimonoialCard {
        border: 0;
    }

    .footerEmailSection {
        padding: 52px 15px;
    }

    .mailbtn {
        position: absolute;
        right: 8px;
        bottom: 180px;
    }

    .socailIconsContainer {
        gap: 10px;
        flex-wrap: wrap;
    }

    .engineManualTextInnerWrap .engineLogo {
        max-width: 115px;
    }

    .engineManualTextSection {
        max-width: unset;
        padding: 5px 10px;
    }

    .engineManualLink {
        font-size: 14px;
    }

    .tradeFeatureInnerWrap {
        padding: 40px 15px;
    }

    .loanFieldsInnerWrap {
        max-width: unset;
    }

    .loanCalculatorFieldsContainer {
        padding: 40px 15px;
    }

    .headerLinkList {
        gap: 20px;
    }

    .headerLinkAfter::after {
        right: -10px;
    }



}

@media(max-width: 450px) {
    .summer-sizzle-header h3 {
        white-space: unset;
        width: 100%;
    }
    .mailbtn {
        position: absolute;
        right: 8px;
        bottom: 205px;
        padding: 1px 15px;
    }

    .mobileHeader {
        padding: 14px 8px 14px 8px;
    }
}