/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 02 2026 | 00:30:04 */
/* ==========================================================
   DIESEL PREMIER
   CMC MARINE PROMOTIONAL POPUP
   ========================================================== */


/* ==========================================================
   OVERLAY
   ========================================================== */

.dp-cmc-ad {

    --dp-navy:#031A2E;
    --dp-navy-light:#082944;

    --cmc-blue:#00A9E8;
    --cmc-cyan:#32C5F4;

    --dp-yellow:#FFD100;

    --whatsapp:#25D366;

    position:fixed;

    z-index:999999;

    inset:0;

    display:flex;

    align-items:center;
    justify-content:center;

    padding:35px;

    background:
        rgba(1,14,25,.78);

    backdrop-filter:
        blur(5px);

    -webkit-backdrop-filter:
        blur(5px);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    opacity:0;

    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


.dp-cmc-ad *,
.dp-cmc-ad *::before,
.dp-cmc-ad *::after {

    box-sizing:border-box;
}



/* OPEN STATE */

.dp-cmc-ad.dp-cmc-ad--visible {

    opacity:1;

    visibility:visible;
}



/* ==========================================================
   MODAL
   ========================================================== */

.dp-cmc-ad__modal {

    position:relative;

    display:grid;

    grid-template-columns:
        53% 47%;

    width:min(1180px,94vw);

    min-height:610px;
    max-height:90vh;

    overflow:hidden;

    border:
        2px solid
        rgba(255,255,255,.92);

    border-radius:14px;

    background:
        var(--dp-navy);

    box-shadow:
        0 30px 90px
        rgba(0,0,0,.52);

    transform:
        translateY(25px)
        scale(.975);

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1);
}


.dp-cmc-ad--visible
.dp-cmc-ad__modal {

    transform:
        translateY(0)
        scale(1);
}



/* ==========================================================
   CLOSE BUTTON
   ========================================================== */

.dp-cmc-ad__close {

    position:absolute;

    z-index:20;

    top:19px;
    right:19px;

    display:flex;

    align-items:center;
    justify-content:center;

    width:43px;
    height:43px;

    margin:0;
    padding:0;

    border:
        1px solid
        rgba(255,255,255,.42);

    border-radius:50%;

    background:
        rgba(2,20,36,.92);

    color:#FFFFFF;

    cursor:pointer;

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.22);

    transition:
        background .25s ease,
        transform .25s ease,
        border-color .25s ease;
}


.dp-cmc-ad__close:hover {

    background:
        var(--cmc-blue);

    border-color:
        var(--cmc-blue);

    transform:
        rotate(90deg);
}


.dp-cmc-ad__close svg {

    width:19px;
    height:19px;

    fill:none;

    stroke:currentColor;

    stroke-width:2;

    stroke-linecap:round;
}



/* ==========================================================
   LEFT PANEL
   ========================================================== */

.dp-cmc-ad__content {

    position:relative;

    z-index:4;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        50px 48px 43px;

    overflow:hidden;

    background:

        radial-gradient(
            circle at 100% 45%,
            rgba(0,169,232,.18),
            transparent 40%
        ),

        linear-gradient(
            135deg,
            #031A2E 0%,
            #041E35 58%,
            #052A47 100%
        );
}



/* SUBTLE GRID */

.dp-cmc-ad__content::before {

    content:"";

    position:absolute;

    z-index:-1;

    inset:0;

    opacity:.10;

    background-image:

        linear-gradient(
            rgba(50,197,244,.18) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(50,197,244,.18) 1px,
            transparent 1px
        );

    background-size:
        60px 60px;

    pointer-events:none;
}



/* ==========================================================
   BRAND ROW
   ========================================================== */

.dp-cmc-ad__brands {

    display:flex;

    align-items:center;

    gap:22px;

    margin-bottom:27px;
}



/* CMC LOGO BOX */

.dp-cmc-ad__cmc-logo {

    display:flex;

    align-items:center;
    justify-content:center;

    width:205px;
    height:72px;

    padding:
        10px 15px;

    border-radius:5px;

    background:
        rgba(255,255,255,.97);
}


.dp-cmc-ad__cmc-logo img {

    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}



/* DIVIDER */

.dp-cmc-ad__brand-divider {

    width:1px;
    height:53px;

    background:
        rgba(255,255,255,.30);
}



/* DIESEL PREMIER WORDMARK */

.dp-cmc-ad__dp-brand {

    display:flex;

    flex-direction:column;

    color:#FFFFFF;
}


.dp-cmc-ad__dp-brand strong {

    color:#FFFFFF !important;

    font-size:22px;

    line-height:1;

    font-weight:800;

    letter-spacing:.3px;
}


.dp-cmc-ad__dp-brand span {

    margin-top:6px;

    color:
        var(--cmc-cyan) !important;

    font-size:8px;

    line-height:1;

    font-weight:800;

    letter-spacing:1.8px;
}



/* ==========================================================
   HEADLINE
   ========================================================== */

.dp-cmc-ad__headline {

    margin:
        0 0 20px !important;

    padding:0 !important;

    color:#FFFFFF !important;

    font-family:
        Arial,
        Helvetica,
        sans-serif !important;

    font-size:
        clamp(43px,4vw,61px) !important;

    line-height:
        .98 !important;

    font-weight:
        800 !important;

    letter-spacing:
        -2.5px !important;

    text-transform:
        none !important;
}


.dp-cmc-ad__headline span {

    display:block;

    margin-top:5px;

    color:
        var(--cmc-cyan) !important;
}



/* ==========================================================
   EXCLUSIVE DISTRIBUTOR BANNER
   ========================================================== */

.dp-cmc-ad__exclusive {

    display:inline-flex;

    align-items:center;

    width:max-content;
    max-width:100%;

    margin-bottom:19px;

    padding:
        11px 17px;

    border-radius:4px;

    background:
        var(--dp-yellow);

    box-shadow:
        0 7px 22px
        rgba(255,209,0,.12);

    color:
        #071B2D !important;

    font-size:13px;

    line-height:1.25;

    font-weight:900;

    letter-spacing:.5px;

    text-transform:uppercase;
}



/* ==========================================================
   DESCRIPTION
   ========================================================== */

.dp-cmc-ad__description {

    max-width:520px;

    margin:
        0 0 26px !important;

    color:
        #E2ECF3 !important;

    font-size:14px;

    line-height:1.6;
}



/* ==========================================================
   BENEFITS
   ========================================================== */

.dp-cmc-ad__benefits {

    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    margin-bottom:27px;
}



/* BENEFIT */

.dp-cmc-ad__benefit {

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    min-width:0;

    padding:
        0 9px;

    text-align:center;
}


.dp-cmc-ad__benefit:not(:last-child) {

    border-right:
        1px solid
        rgba(255,255,255,.13);
}



/* ICON */

.dp-cmc-ad__benefit svg {

    width:29px;
    height:29px;

    margin-bottom:8px;

    fill:none;

    stroke:
        var(--cmc-cyan);

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}


.dp-cmc-ad__benefit span {

    color:
        #FFFFFF !important;

    font-size:9px;

    line-height:1.25;

    font-weight:800;

    text-transform:uppercase;
}



/* ==========================================================
   ACTIONS
   ========================================================== */

.dp-cmc-ad__actions {

    display:flex;

    align-items:center;

    gap:12px;
}



/* BUTTON */

.dp-cmc-ad__button {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:15px;

    min-height:48px;

    padding:
        0 20px;

    border:
        1px solid transparent;

    border-radius:4px;

    font-size:10px;

    line-height:1;

    font-weight:900;

    letter-spacing:.25px;

    text-decoration:none !important;

    text-transform:uppercase;

    transition:
        transform .25s ease,
        background .25s ease,
        border-color .25s ease;
}


.dp-cmc-ad__button:hover {

    transform:
        translateY(-2px);
}



/* EXPLORE */

.dp-cmc-ad__button--explore {

    min-width:195px;

    background:
        var(--dp-yellow);

    color:
        #061B2C !important;
}


.dp-cmc-ad__button--explore:hover {

    background:
        #FFE15B;

    color:
        #061B2C !important;
}



/* CONTACT */

.dp-cmc-ad__button--contact {

    min-width:210px;

    border-color:
        rgba(255,255,255,.80);

    background:
        rgba(255,255,255,.04);

    color:
        #FFFFFF !important;
}


.dp-cmc-ad__button--contact:hover {

    border-color:
        var(--whatsapp);

    background:
        var(--whatsapp);

    color:
        #FFFFFF !important;
}



/* ARROW */

.dp-cmc-ad__arrow {

    font-size:18px;

    line-height:1;
}



/* WHATSAPP SVG */

.dp-cmc-ad__whatsapp {

    width:21px;
    height:24px;

    color:
        var(--whatsapp);

    fill:currentColor;

    transition:
        color .25s ease;
}


.dp-cmc-ad__button--contact:hover
.dp-cmc-ad__whatsapp {

    color:#FFFFFF;
}



/* ==========================================================
   RIGHT IMAGE
   ========================================================== */

.dp-cmc-ad__visual {

    position:relative;

    min-height:610px;

    overflow:hidden;

    /*
     * IMPORTANT:
     * Replace the URL below with the Media Library URL
     * of the yacht image we generated.
     */

    background-image:
        url("https://dieselpremier.com/wp-content/uploads/2026/10/Split-Level-Yacht.png");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;
}



/* BLEND BETWEEN PANELS */

.dp-cmc-ad__visual::before {

    content:"";

    position:absolute;

    z-index:2;

    top:0;
    bottom:0;
    left:0;

    width:105px;

    background:
        linear-gradient(
            90deg,
            #05243D 0%,
            rgba(5,36,61,.72) 24%,
            rgba(5,36,61,0) 100%
        );

    pointer-events:none;
}



/* CYAN DIAGONAL */

.dp-cmc-ad__visual::after {

    content:"";

    position:absolute;

    z-index:3;

    top:-8%;
    left:-18px;

    width:9px;
    height:116%;

    background:
        linear-gradient(
            180deg,
            var(--cmc-blue),
            var(--cmc-cyan)
        );

    transform:
        rotate(14deg);

    transform-origin:center;

    box-shadow:
        0 0 28px
        rgba(0,169,232,.30);

    pointer-events:none;
}



/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1050px) {

    .dp-cmc-ad {

        padding:25px;
    }


    .dp-cmc-ad__modal {

        grid-template-columns:
            56% 44%;

        min-height:560px;
    }


    .dp-cmc-ad__content {

        padding:
            40px 35px 35px;
    }


    .dp-cmc-ad__visual {

        min-height:560px;
    }


    .dp-cmc-ad__headline {

        font-size:
            46px !important;
    }


    .dp-cmc-ad__benefit span {

        font-size:8px;
    }


    .dp-cmc-ad__actions {

        flex-direction:column;

        align-items:stretch;
    }


    .dp-cmc-ad__button {

        width:100%;

        min-width:0;
    }

}



/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:767px) {

    .dp-cmc-ad {

        align-items:flex-start;

        overflow-y:auto;

        padding:
            18px 14px;
    }


    .dp-cmc-ad__modal {

        display:flex;

        flex-direction:column;

        width:100%;

        min-height:0;
        max-height:none;

        border-radius:11px;
    }


    /*
     * Image first on mobile.
     */

    .dp-cmc-ad__visual {

        order:1;

        width:100%;

        min-height:225px;

        background-position:
            center 52%;
    }


    .dp-cmc-ad__content {

        order:2;

        padding:
            27px 22px 25px;
    }


    .dp-cmc-ad__visual::before {

        top:auto;
        right:0;
        bottom:0;

        width:auto;
        height:70px;

        background:
            linear-gradient(
                0deg,
                #031A2E,
                transparent
            );
    }


    .dp-cmc-ad__visual::after {

        display:none;
    }


    .dp-cmc-ad__close {

        position:fixed;

        top:28px;
        right:25px;

        width:39px;
        height:39px;
    }


    .dp-cmc-ad__brands {

        gap:13px;

        margin-bottom:20px;
    }


    .dp-cmc-ad__cmc-logo {

        width:150px;
        height:53px;

        padding:
            8px 11px;
    }


    .dp-cmc-ad__brand-divider {

        height:41px;
    }


    .dp-cmc-ad__dp-brand strong {

        font-size:16px;
    }


    .dp-cmc-ad__dp-brand span {

        font-size:6px;

        letter-spacing:1.2px;
    }


    .dp-cmc-ad__headline {

        font-size:
            clamp(37px,10vw,48px) !important;

        letter-spacing:
            -1.8px !important;
    }


    .dp-cmc-ad__exclusive {

        font-size:10px;

        padding:
            10px 12px;
    }


    .dp-cmc-ad__description {

        font-size:13px;

        margin-bottom:
            22px !important;
    }


    .dp-cmc-ad__benefits {

        grid-template-columns:
            repeat(2,minmax(0,1fr));

        gap:
            20px 0;

        margin-bottom:25px;
    }


    .dp-cmc-ad__benefit:nth-child(2) {

        border-right:0;
    }


    .dp-cmc-ad__actions {

        gap:10px;
    }

}



/* ==========================================================
   SMALL MOBILE
   ========================================================== */

@media (max-width:420px) {

    .dp-cmc-ad__visual {

        min-height:190px;
    }


    .dp-cmc-ad__content {

        padding:
            24px 18px 21px;
    }


    .dp-cmc-ad__headline {

        font-size:
            35px !important;
    }


    .dp-cmc-ad__brands {

        align-items:flex-start;

        flex-direction:column;
    }


    .dp-cmc-ad__brand-divider {

        display:none;
    }

}



/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce) {

    .dp-cmc-ad,
    .dp-cmc-ad__modal,
    .dp-cmc-ad__close,
    .dp-cmc-ad__button {

        transition:none;
    }

}