@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap');

*:focus {
    outline: 0 !important;
}

body {
    font-family: 'Epilogue', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 25px;
    color: #0A3442;
    letter-spacing: 0.5px;
}

p {
    font-family: 'Epilogue', sans-serif;
    font-size: 20px !important;
    font-weight: 400;
    line-height: 34px;
    color: #0A3442;
    letter-spacing: 0.1px;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Epilogue', sans-serif;
    color: #333333;
    font-weight: 700;
    margin: 0;
}

.subhead {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.bg-half-light-blue {
    background: linear-gradient(to right, #ffffff 0%, #ffffff 31%, #E5F3F9 25%, #E5F3F9 100%);
    background-attachment: fixed;
    padding: 7rem;
    margin-left: -100px;
}

.bg-horizontal-light-blue {
    background: linear-gradient(to bottom, #ffffff 0%, #ffffff 45%, #E5F3F9 25%, #E5F3F9 100%);
}

.btn-white-outline {
    font-family: 'Epilogue', sans-serif;
    font-weight: 700;
    letter-spacing: 0.1px;
    padding: 10px 15px;
    text-transform: none;
    max-width: 237px;
    border-radius: 3px;
    border: 2px solid white;
}

.primary-cta {
    background-color: #00AFC3;
    font-family: 'Epilogue', sans-serif;
    font-weight: 600;
    letter-spacing: 0.1px;
    padding: 10px 15px;
    text-transform: none;
    max-width: 237px;
    border-radius: 3px;
}

.primary-cta:hover {
    background-color: #1C7FA0;
}


.spec-detail{ 
    font-size: 15px !important;
}

.noSelect {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.noSelect:focus {
    outline: none !important;
}

/* ===============
   HOMEPAGE HERO
================== */
.video-container {
    width: 100%;
    height: 75vh;
    position: relative;
    overflow: hidden;
    padding-left: 0px !important;
    padding-right: 0px !important;
    padding-bottom: 85px;
    z-index: 0;
    background-size: cover;
    text-align: center; /* ensures the image is always in the h-middle */
    overflow: hidden; /* hide the cropped portion */
}

.video-container::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: linear-gradient(180deg, rgba(255,255,255,0) 70%, rgba(255,255,255,0.43043154761904767) 85%, rgba(255,255,255,0.6349133403361344) 90%, rgba(255,255,255,1) 100%);
    z-index: -1;
}

#background-video {
    position: absolute;
    left: 50%;
    top: 50%;
    /* The following will size the video to fit the full container. Not necessary, just nice.*/
    min-width: 100%;
    min-height: 100%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    z-index: -1;
}

.hero-content {
    position: relative;
    z-index: 99;
    padding-top: 30px;
}

.home-title {
    font-size: 50px;
    line-height: 52px;
}

.hero-cta {
    margin-top: 20%;
}

@media (max-width: 1200px) {
.hero-content {
    height: 75vh;
}

.hero-cta {
    margin-top: 21rem;
    }
}

@media (max-width: 768px) {
    .hero-content {
        height: 60vh ;
    }

    .hero-cta {
        margin-top: 20rem;
    }
}

@media (max-width: 375px) {
    .hero-content {
        height: 30vh;
    }

    .hero-cta {
        margin-top: 10rem;
    }
}
/* =============================
   OUR SIGNATURE SERIES + CARDS
================================ */

.models-container {
    background: #0a3442;
    position: relative;
    left: 0;
    width: 100%;
    height: 300px;
    /*padding: 27px 35px 35px;*/
    padding: 20px 10px;
    border-top: solid 2px #00afc3;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

.models-container .product_name {
    font-size: 20px;
    color: #ffffff;
    letter-spacing: 1.5px;
    margin-bottom: 0.5rem;
}

.models-container p {
    font-size: 16px;
    color: #b1b1b3;
}

.models-container .product_price {
    float: right;
    color: #48cfad;
    font-size: 22px;
    font-weight: 600;
}

.image-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0a3442;
    opacity: 0;
}

.active {
    transform: scale(1.10);
}

.product-options {
    padding: 2px 0 0;
}

#series-card-container {
    width: 100%;
    height: 572px;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.signature-series-content {
    padding: 25px;
    z-index: 1;
}

.series-name {
    letter-spacing: 1.5px;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.5rem;
}

.product_name {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 1.05px;
}

.series-heading {
    line-height: 34px;
    font-weight: 600;
}

.product-card {
    height: 550px;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
}

.signature-series ul li {
    list-style-type: none;
    padding-bottom: 10px;
}

.signature-series ul li a {
    text-decoration: none;
    list-style-type: none;
    color: white;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    font-size: 18px;
    line-height: 38px;
    letter-spacing: 1px;
    display: block;
    font-weight: bold;
}

.signature-series ul li a:hover {
    color: #00afc3;
    text-decoration: none;
}

.signature-series li:last-child a {
    border-bottom: 0px solid #00afc3 !important;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 99.9%;
    height: 100%;
    object-fit: cover; /* Ensure video fills the card */
    opacity: 0; /* Hidden by default */
    pointer-events: none; /* Prevent video from interfering with hover events */
    transition: opacity 0.3s ease;
}

/* Center Console Series */

/* Hides overflow for boat series */
#product-card {
    background-image: url("/assets/img/home/centerConsole.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    -webkit-transition: 100ms ease-out;
    -moz-transition: 100ms ease-out;
    -o-transition: 100ms ease-out;
    transition: 100ms ease-out;
}

#product-card:hover .background-video {
    opacity: 1;
}


#cc-content {
    position: absolute;
}


/* Brings up models */
#product-card.animate .cc-models {
    top: 280px;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

/* Adds in Overlay behind tabs */
#product-card.animate .image-overlay {
    opacity: 0.7;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

/* Adjusts for 'Explore Models' Vertical Position */
.cc-models {
    top: 478px;
}

/* Rotates Arrow on click */
.arrow {
    transition: transform 0.3s ease;
}

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

/* Center Console END */

/* Center Console Special Edition */

/* Hides overflow for boat series */
#product-card-1 {
    background-image: url("/assets/img/home/specialEdition.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    height: 100%;
    width: 100%;
    -webkit-transition: 100ms ease-out;
    -moz-transition: 100ms ease-out;
    -o-transition: 100ms ease-out;
    transition: 100ms ease-out;
}

/* Brings up models */
#product-card-1.animate .se-models {
    top: 309px;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

#product-card-1.animate .image-overlay {
    opacity: 0.7;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

#product-card-1:hover .background-video {
    opacity: 1;
}

#cc-se-content {
    position: absolute;
}

/* Adjusts for 'Explore Models' Vertical Position */
.se-models {
    top: 473px;
}

/* Rotates Arrow on click */
.arrow-1 {
    transition: transform 0.3s ease;
}

.arrow-1.rotate {
    transform: rotate(180deg);
}
/* Center Console Special Edition END */


/* Sports Cabin */

/* Hides overflow for boat series */
#product-card-2 {
    background-image: url("/assets/img/home/sports-cabin-series-card.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    -webkit-transition: 100ms ease-out;
    -moz-transition: 100ms ease-out;
    -o-transition: 100ms ease-out;
    transition: 100ms ease-out;
}

/* Brings up models */
#product-card-2.animate .sc-models {
    top: 275px;
    width: 100%;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

#product-card-2.animate .image-overlay {
    opacity: 0.7;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

#product-card-2:hover .background-video {
    opacity: 1;
}

#sc-content {
    position: absolute;
}


@media (max-width: 500px) {
    #product-card .background-video {
        display: none !important;
        pointer-events: none !important;
    }

    #product-card-1 .background-video {
        display: none !important;
        pointer-events: none !important;
    }

    #product-card-2 .background-video {
        display: none !important;
        pointer-events: none !important;
    }

    .product-card .background-video {
        display: none !important;
        pointer-events: none !important;
    }
}

/* Adjusts for 'Explore Models' Vertical Position */
.sc-models {
    top: 471px;
}

/* Rotates Arrow on click */
.arrow-2 {
    transition: transform 0.3s ease;
}

.arrow-2.rotate {
    transform: rotate(180deg);
}
/* Sports Cabin END */

.series-cta {
    margin-top: 3rem;
    margin-top: 25%;
    min-width: 350px;
    margin: auto;
}

@media (max-width: 992px) {
    #series-card-container {
        height: auto;
        margin-bottom: 0px;
    }

    .product-card {
        width: 350px !important;
        height: 550px !important;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 4rem;
        transform: scale(1.10) !important;
    }

    .series-cta {
        margin-top: 0px;
    }
}


@media (max-width: 500px) {
    #series-card-container {
        height: auto;
        margin-bottom: 0px;
    }

    .product-card {
        width: 320px !important;
        height: 550px !important;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 4rem;
        transform: scale(1.10) !important;
    }

    .series-cta {
        margin-top: 0px;
    }
}
/* =============================
   EXPLORE THE LATEST SECTION
================================ */
#boat-container {
    overflow: visible;
    position: relative;
    padding-bottom: 50px;
    z-index: 1;
}

.latest-container {
    max-width: 1570px;
}

.main-card {
    height: 100%;
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

.model-heading {
    line-height: 36px;
    font-weight: 800;
}

.models-container p {
    font-size: 14px;
}

.specs_title {
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 1.05px;
}

.featured-specs {
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}

.spec-detail {
    font-size: 15px;
    line-height: 24px;
    letter-spacing: 0.8px;
    text-align: left;
}

.specs-title-container {
    display: flex;
    justify-content: space-between;
    padding-left: 10px;
    padding-right: 10px;
}

.specs-container {
    background: #0a3442;
    position: relative;
    left: 0;
    width: 100%;
    height: 300px;
    /*padding: 27px 35px 35px;*/
    padding: 20px 10px;
    border-top: solid 2px #00afc3;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    position: absolute;
    top: 470px;
}

.image-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #0a3442;
    opacity: 0;
}

.model-btn {
    font-family: "Epilogue", sans-serif;
    font-weight: 700;
    letter-spacing: 0.1px;
    padding: 10px 15px;
    text-transform: none;
    max-width: 237px;
    border-radius: 3px;
}

.btn-white-outline {
    font-family: "Epilogue", sans-serif;
    font-weight: 700;
    letter-spacing: 0.1px;
    padding: 10px 15px;
    text-transform: none;
    max-width: 237px;
    border-radius: 3px;
    border: 2px solid white !important;
}

.models-intro {
    height: 550px;
    width: 345px;
    padding: 42px;
}


/* add back the width once quote it links are available --
    in the JS file (homepage.js) remove 'Quote It' from 
    comments and remove 'col' from the Explore Link cta */

.model-btn {
/* width: 45%; */
width: 100%;
max-width: 100% !important; 
}

.model-card {
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
    height: 550px;
    width: 345px;
    -webkit-transition: 100ms ease-out;
    -moz-transition: 100ms ease-out;
    -o-transition: 100ms ease-out;
    transition: 100ms ease-out;
}

.model-card-content {
    position: absolute;
    width: 100%;
    height: 517px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 3;
}

.mySwiper {
    display: flex;
    flex-direction: row;
    padding-left: 20px;
    padding-right: 20px;
}

.swiper-scrollbar {
    background: #ffffff !important;
    border-radius: 0px !important;
    height: 15px !important;
}

.swiper-scrollbar-drag {
    background: #00afc3 !important;
    height: 15px !important;
    border-radius: 0px !important;
}

.swiper-btn {
    background-image: url("/assets/img/home/swiper-btn-bg.png");
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    top: 32% !important;
    width: 3% !important;
    height: 7% !important;
    background-size: cover;
    padding: 40px !important;
    -webkit-tap-highlight-color: transparent;
}


.swiper-btn:hover {
    -webkit-transform: scale(1.10,1.10);
    -webkit-transition: all 0.4s ease-in-out;
}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after {
    content: none !important;
    -webkit-tap-highlight-color: transparent;
}

.swiper-button-prev:after, .swiper-rtl .swiper-button-prev:after {
    content: none !important;
    -webkit-tap-highlight-color: transparent;
}
/* Brings up models */
.model-card.animate .specs-container {
    top: 240px;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

/* Adds in Overlay behind tabs */
.model-card.animate .image-overlay {
    opacity: 0.7;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

/* Adjusts for 'SPECS' Vertical Position */
.specs-container {
    top: 415px;
}

.model-ctas {
    margin-top: 293px;
    background-color: #0a3442;
    padding-left: 17px;
    justify-content: space-between;
    padding-right: 13px;
    padding-bottom: 50px;
    padding-top: 20px;
    width: 100%;
}

.signature-series-content {
    padding-left: 25px;
    padding-top: 25px;
}

/* Background Images for EXPLORE THE LATEST Models */
#model-18se {
    background-image: url("/assets/img/home/main-gradient-18SE-2.jpg");
    background-size: cover;
}

#model-21se {
    background-image: url("/assets/img/home/main-gradient-21SE-2.jpg");
    background-size: cover;
}

#model-23se {
    background-image: url("/assets/img/home/main-gradient-23SE-2.jpg");
    background-size: cover;
}

#model-2200cc {
    background-image: url("/assets/img/home/main-gradient-2200CC.jpg");
    background-size: cover;
}

#model-2400cc {
    background-image: url("/assets/img/home/main-gradient-2400CC.jpg");
    background-size: cover;
}

#model-2600cc {
    background-image: url("/assets/img/home/main-gradient-2600CC.jpg");
    background-size: cover;
}

#model-2900cc {
    background-image: url("/assets/img/home/main-gradient-2900CC-2.jpg");
    background-size: cover;
}

#model-2120sc {
    background-image: url("/assets/img/home/main-gradient-2120SC.jpg");
    background-size: cover;
}

#model-2420sc {
    background-image: url("/assets/img/home/main-gradient-2420SC.jpg");
    background-size: cover;
}

#model-2520xldsc {
    background-image: url("/assets/img/home/main-gradient-2520XLDSC-updated.jpg");
    background-size: cover;
}

#model-2820xldsc {
    background-image: url("/assets/img/home/main-gradient-2820XLDSC.jpg");
    background-size: cover;
}

#model-placeholder {
    opacity: 0%;
}

/* Background Images for EXPLORE THE LATEST Models END */

/* MAIN MODEL CARD LAYOUT */
#model-2200cc-content {
    position: absolute;
    width: 100%;
    height: 517px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 3;
}


/* Brings up models */
#model-2200cc.animate .model-2200cc-specs {
    top: 239px;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

/* Adds in Overlay behind tabs */
#model-2200cc.animate .image-overlay {
    opacity: 0.7;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
}

/* Adjusts for 'Explore Models' Vertical Position */
.model-2200cc-specs {
    top: 415px;
}

/* Rotates Arrow on click */
.arrow-icon {
    transition: transform 0.3s ease;
}

.arrow-icon.rotate {
    transform: rotate(180deg);
}
/* MAIN MODEL CARD LAYOUT END */

.modal-header .close {
    position: absolute;
    background-image: url("/assets/img/home/swiper-btn-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    padding: 28px;
    z-index: 9;
    right: -15px;
    top: -20px;
}

.modal-close {
    font-size: 50px;
}


@media (max-width: 1330px) {
    .models-intro {
        height: auto;
        width: auto;
    }

    .model-card {
        height: 580px;
    }

    #boat-container {
        padding: 25px;
    }
}

@media (max-width: 760px) {
    .swiper-btn {
        top: 35% !important;
        width: 1% !important;
    }
}

@media (max-width: 500px) {
    .swiper-btn {
        padding: 28px !important;
    }

    .model-card{
        margin-bottom: 30px;
    }
}

/* =============================
  HOMEPAGE TRADITIONS SECTION
================================ */
@media (max-width: 992px) {
    .bg-half-light-blue {
        padding: 0rem !important;
        background: #ffffff;
        margin-left:0px !important;
    }
    .our-traditions {
        margin-left: auto;
        margin-right: auto;
    }
    .traditions-content {
        margin-left: 0rem;
    }
}


/* =============================
  HOMEPAGE FIND A DEALER SECTION
================================ */

.bg-find-a-dealer {
    background-image: url('/assets/img/home/find-a-dealer-bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    padding: 4rem;
}

.dealer-content {
    position: absolute;
    bottom: 13px;
    right: 13px;
}

@media (max-width: 1100px){
    .dealer-img {
        height: 550px;
        background-position: center;
        margin-bottom: 30px;
    }
}

@media (max-width: 500px){
    .bg-find-a-dealer {
        padding: 0px !important;
    }    
}
/* =============================
  HOMEPAGE DISCOVER PARKER SECTION
================================ */

.discover-parker-container {
    padding-right: 0px;
    padding-left: 0px;
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

.discover-parker-main-img {
    width: 550px;
    height: 550px;
    overflow: hidden;
    padding-left: 0px;
    padding-right: 0px;
}

.discover-parker-main-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .3s ease;
}

.discover-parker-main-img img:hover {
    transform: scale(1.2);
}

.discover-parker-content {
    z-index: 3;
    position: absolute;
    top: 35%;
    right: -15px;
    width: 80%;
    padding-left: 70px;
}

.discover-parker-content p {
    width: 65%;
}

@media (max-width: 1090px) {

    .discover-parker-container {
        margin-bottom: 8rem;
    }

    .discover-parker-content {
        position: absolute;
        right: 0px;
        top: 32%;
        right: -30px;
        padding-left: 0px;
    }

    .discover-parker-content p {
        width: 80%;
    }
}

@media (max-width: 991px) {
    .discover-parker-content p {
        width: 100%;
    }

    .discover-parker-content {
        top: 64%;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .discover-parker-container {
        margin-bottom: 0rem;
    }

    .discover-parker-content {
        position: relative;
    }

    .discover-parker-content p {
        width: 100%;
    }

    .discover-parker-main-img {
        width: 100%;
        height: 100%;
    }
}
/* =============================
  HOMEPAGE SOCIAL FEEDS
================================ */
.home-social-icons {
    text-align: center;
}

.home-social-icons a {
    display: inline-block;
    font-size: 20px;
    color: #0a3442;
    margin: 10px;
}

/* =============================
  HOMEPAGE LATEST BLOGS
================================ */
#dib-posts .dib-post:nth-child(n+4) {
    display: none;
}

/* =============================
  HOMEPAGE NEWSLETTER SIGN-UP
================================ */
.newsletter-input {
    height: 44px;
}

.newsletter-form-container {
    padding-left: 30px;
}

.subscribe-cta {
    height: 48px;
    width: 160px;
}

@media (max-width: 500px){
    .subscribe-cta{
        margin-bottom: 3rem;
    }
}

/* =============================
  MAIN FOOTER
================================ */

.main-footer {
    background-color: #0a3442;
    padding-top: 50px;
    padding-bottom: 50px;
}

.main-footer p {
    color: white;
    font-size: 12px !important;
}

.main-footer h5 {
    color: white;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
    margin-top: 20px;
}

.main-footer a {
    color: white;
}

.main-footer a:hover {
    color: #00afc3;
}

.footer-links li a {
    font-size: 14px !important;
    line-height: 24px !important;
}

.footer-bottom {
    border-top: 1px solid grey;
    padding: 30px 0px;
    margin-top: 30px;
}

ul.footer-social {
    text-align: center;
}

.footer-social li {
    font-size: 26px !important;
    line-height: 30px;
    padding-right: 10px;
    position: relative;
    display: inline-block;
}

.footer-social li a {
    color: #dddddd;
}

.footer-social li a:hover {
    color: #3aa5f7;
}