/* ==========================================================
   ZAN PEARL GLOBAL BRAND THEME
   Ocean Blue + Turquoise + Premium Gold
========================================================== */

:root{
    --zp-navy:#044C48;
    --zp-navy-dark:#044C48;

    --zp-blue:#046157;
    --zp-blue-light:#08786C;

    --zp-turquoise:#0A8B7D;
    --zp-turquoise-soft:#DDF8FA;

    --zp-gold:#FC7507;
    --zp-gold-light:#FDA008;

    --zp-white:#FFFFFF;
    --zp-pearl:#F8FBFD;

    --zp-soft:#F3F7FA;

    --zp-text:#315B57;
    --zp-muted:#687D8B;

    --zp-line:#DCE6EB;

    --zp-gradient-ocean:
        linear-gradient(
            135deg,
            #046157 0%,
            #08786C 55%,
            #0A8B7D 100%
        );

    --zp-gradient-gold:
        linear-gradient(
            135deg,
            #FC7507 0%,
            #FDA008 100%
        );
}


/* ==========================================================
   GLOBAL
========================================================== */

html,
body{
    background:var(--zp-white);
}

body{
    color:var(--zp-text);
}

::selection{
    background:var(--zp-turquoise);
    color:#fff;
}


/* ==========================================================
   HEADER
========================================================== */

body .site-header,
body .site-header .main-navbar{
    background:var(--zp-navy) !important;
}

body .site-header{
    border-top:2px solid var(--zp-turquoise) !important;
}

body .site-header .main-menu a{
    color:#fff !important;
}

body .site-header .main-menu a:hover,
body .site-header .main-menu a.active{
    color:var(--zp-gold) !important;
}

body .site-header .main-menu a.active::after{
    background:var(--zp-gold) !important;
}


/* PLAN YOUR TRIP */

body .site-header .book-btn{
    background:var(--zp-gradient-gold) !important;
    color:var(--zp-navy) !important;
}

body .site-header .book-btn:hover{
    background:var(--zp-gold-light) !important;
}


/* ==========================================================
   HEADINGS
========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{
    color:var(--zp-navy);
}

section h1 span,
section h2 span,
section h3 span{
    color:var(--zp-gold);
}


/* ==========================================================
   PRIMARY BUTTONS
========================================================== */

.primary-btn,
.primary-btn1,
.zpt-btn,
.zsf-btn,
.zsd-book-btn,
.zt-select-btn,
.ztc-continue,
.zpc-submit,
.zpa-btn-gold,
.zl-btn-gold,
.zpe-contact-primary,
.zpm-exp-button,
button[type="submit"]{
    background:var(--zp-gradient-gold) !important;
    color:var(--zp-navy) !important;

    border-color:transparent !important;
}

.primary-btn:hover,
.primary-btn1:hover,
.zpt-btn:hover,
.zsf-btn:hover,
.zsd-book-btn:hover,
.zt-select-btn:hover,
.ztc-continue:hover,
.zpc-submit:hover,
.zpa-btn-gold:hover,
.zl-btn-gold:hover,
.zpe-contact-primary:hover,
.zpm-exp-button:hover,
button[type="submit"]:hover{
    background:var(--zp-gold-light) !important;
    color:var(--zp-navy) !important;
}


/* ==========================================================
   LINKS / ACCENTS
========================================================== */

a:hover{
    color:var(--zp-blue);
}

.fa-location-dot,
.fa-map-location-dot,
.fa-compass,
.fa-arrow-right,
.fa-check,
.fa-circle-check{
    accent-color:var(--zp-gold);
}


/* ==========================================================
   PAGE EYEBROWS / LABELS
========================================================== */

.zpt-eyebrow,
.zsf-eyebrow,
.zsd-book-label,
.zpa-section-label,
.zl-section-kicker,
.zpe-label,
.zpc-eyebrow,
.zpc-form-label,
.zpm-eyebrow,
.zpm-exp-tag{
    color:var(--zp-gold) !important;
}


/* ==========================================================
   CARDS
========================================================== */

.zpt-card,
.zsf-card,
.zsd-related-card,
.zt-vehicle-card,
.ztc-card,
.ztc-summary-card,
.zpc-info-card,
.zpc-form-card,
.zpa-service-card,
.zl-why-card{
    border-color:var(--zp-line) !important;
}

.zpt-card:hover,
.zsf-card:hover,
.zsd-related-card:hover,
.zt-vehicle-card:hover,
.zpc-info-card:hover,
.zpa-service-card:hover{
    border-color:rgba(8,185,199,.55) !important;

    box-shadow:
        0 16px 40px
        rgba(0,103,197,.10) !important;
}


/* ==========================================================
   ICON CIRCLES
========================================================== */

.zpc-info-icon,
.zpa-why-icon,
.zpa-signature-icon,
.ztc-title-icon{
    background:var(--zp-turquoise-soft) !important;

    color:var(--zp-blue) !important;
}


/* ==========================================================
   FORMS
========================================================== */

input,
select,
textarea{
    border-color:var(--zp-line) !important;
}

input:focus,
select:focus,
textarea:focus{
    border-color:var(--zp-turquoise) !important;

    box-shadow:
        0 0 0 3px
        rgba(8,185,199,.12) !important;
}


/* ==========================================================
   SOFT SECTIONS
========================================================== */

.zpa-services,
.zpa-values,
.zl-experiences,
.zpe-signature,
.zpe-final,
.zpc-bottom,
.zpc-form-card,
.ztc-page{
    background:var(--zp-soft) !important;
}


/* ==========================================================
   DARK SECTIONS
========================================================== */

.zpa-purpose,
.zl-purpose,
.zpe-philosophy,
.zpc-help,
.zts-top,
.zts-total,
.ztc-total{
    background:var(--zp-navy) !important;
}


/* ==========================================================
   HOME SEARCH TABS
========================================================== */

.zp-search-tabs button.active,
.zp-search-tab.active,
.zp-booking-tab.active{
    background:var(--zp-gradient-gold) !important;

    color:var(--zp-navy) !important;
}

.zp-search-tabs button:hover,
.zp-search-tab:hover{
    border-color:var(--zp-turquoise) !important;
}


/* ==========================================================
   SEARCH / FILTER FOCUS
========================================================== */

.zpt-filter,
.zsf-filter,
.zt-search,
.zp-search-box{
    border-color:rgba(8,185,199,.25) !important;
}


/* ==========================================================
   PRICE COLORS
========================================================== */

.zpt-price,
.zsf-price,
.zsd-price-box strong,
.zsd-book-price strong,
.zt-price-line.total strong,
.ztc-total strong,
.zts-total strong{
    color:var(--zp-gold) !important;
}


/* ==========================================================
   BADGES
========================================================== */

.zpt-badge,
.zsf-badge,
.zpm-exp-tag{
    background:var(--zp-gradient-gold) !important;

    color:var(--zp-navy) !important;
}


/* ==========================================================
   TURQUOISE SECONDARY ACCENTS
========================================================== */

.zpc-success{
    border-color:rgba(8,185,199,.35) !important;

    background:#E6FAFB !important;

    color:#075E66 !important;
}

.zpe-story-points i,
.zpa-signature-icon{
    background:var(--zp-turquoise-soft) !important;

    color:var(--zp-blue) !important;
}


/* ==========================================================
   MAP / TRANSFER ACCENTS
========================================================== */

.zt-route-card .leaflet-interactive{
    stroke:var(--zp-blue) !important;
}

.zt-route-card,
.zpc-map-card{
    border-color:var(--zp-line) !important;
}


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

.site-footer{
    background:var(--zp-navy-dark) !important;
}

.site-footer h3,
.site-footer h4{
    color:#fff !important;
}

.site-footer a:hover{
    color:var(--zp-gold) !important;
}

.site-footer i{
    color:var(--zp-turquoise) !important;
}


/* ==========================================================
   SCROLLBAR
========================================================== */

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#EAF2F6;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            var(--zp-blue),
            var(--zp-turquoise)
        );

    border-radius:20px;

    border:2px solid #EAF2F6;
}


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

@media(max-width:700px){

    body .site-header{
        border-top-color:var(--zp-turquoise) !important;
    }

    .site-footer{
        background:var(--zp-navy-dark) !important;
    }

}