
:root{
    --home-navy:#044C48;
    --home-blue:#046157;
    --home-sky:#08786C;
    --home-turquoise:#0A8B7D;
    --home-gold:#FC7507;
    --home-gold-light:#FDA008;
    --home-soft:#F3F9FC;
    --home-white:#FFFFFF;
    --home-text:#315B57;
    --home-muted:#687D8B;

    --home-ocean-gradient:
        linear-gradient(
            110deg,
            #046157 0%,
            #08786C 48%,
            #0A8B7D 100%
        );
}


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

body .zp-home-page,
body .home-page{
    color:var(--home-text);
}

body .zp-home-page h1,
body .zp-home-page h2,
body .zp-home-page h3,
body .home-page h1,
body .home-page h2,
body .home-page h3{
    color:var(--home-navy);
}


/* =========================================================
   SECTION EYEBROWS
========================================================= */

body .zp-home-page .section-label,
body .zp-home-page .section-subtitle,
body .zp-home-page .eyebrow,
body .home-page .section-label,
body .home-page .section-subtitle,
body .home-page .eyebrow{
    color:var(--home-blue) !important;
}


/* =========================================================
   GOLD HIGHLIGHTS
========================================================= */

body .zp-home-page h2 span,
body .zp-home-page h3 span,
body .home-page h2 span,
body .home-page h3 span{
    color:var(--home-gold) !important;
}


/* =========================================================
   POPULAR TOURS
========================================================= */

body .popular-tours-section,
body .popular-tours{
    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #F4FAFC 100%
        ) !important;
}

body .tour-card,
body .popular-tour-card{
    border-color:
        rgba(0,103,197,.12) !important;

    box-shadow:
        0 12px 30px
        rgba(0,103,197,.08) !important;
}

body .tour-card:hover,
body .popular-tour-card:hover{
    border-color:
        rgba(8,185,199,.55) !important;

    box-shadow:
        0 18px 42px
        rgba(0,103,197,.14) !important;
}


/* tour badges */

body .tour-card .badge,
body .popular-tour-card .badge,
body .tour-badge{
    background:var(--home-ocean-gradient) !important;
    color:#fff !important;
}


/* prices */

body .tour-card .price,
body .tour-price{
    color:var(--home-blue) !important;
}


/* small icons */

body .tour-card i,
body .popular-tour-card i{
    color:var(--home-turquoise);
}


/* =========================================================
   ABOUT SECTION
========================================================= */

body .zp-about-section,
body .home-about,
body .about-home{
    position:relative;
}

body .zp-about-section::before,
body .home-about::before,
body .about-home::before{
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-130px;
    top:10%;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(8,185,199,.08),
            transparent 70%
        );

    pointer-events:none;
}


/* feature icons */

body .zp-about-section .icon,
body .home-about .icon,
body .about-home .icon{
    background:
        linear-gradient(
            135deg,
            rgba(0,103,197,.10),
            rgba(8,185,199,.16)
        ) !important;

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


/* =========================================================
   PRIMARY BUTTONS ON HOME
========================================================= */

body .zp-home-page .primary-btn,
body .zp-home-page .book-btn,
body .home-page .primary-btn,
body .home-page .book-btn{
    background:
        linear-gradient(
            135deg,
            var(--home-gold),
            var(--home-gold-light)
        ) !important;

    color:var(--home-navy) !important;

    border-color:transparent !important;
}


/* =========================================================
   BLUE SECONDARY BUTTONS
========================================================= */

body .zp-home-page .secondary-btn,
body .zp-home-page .outline-btn,
body .home-page .secondary-btn,
body .home-page .outline-btn{
    color:var(--home-blue) !important;

    border-color:var(--home-blue) !important;

    background:#fff !important;
}

body .zp-home-page .secondary-btn:hover,
body .home-page .secondary-btn:hover{
    background:var(--home-ocean-gradient) !important;

    color:#fff !important;

    border-color:transparent !important;
}


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

body .search-tabs button.active,
body .zp-search-tabs button.active,
body .search-tab.active{
    background:var(--home-ocean-gradient) !important;

    color:#fff !important;

    border-color:transparent !important;
}

body .search-tabs button:not(.active),
body .zp-search-tabs button:not(.active){
    color:var(--home-blue) !important;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

body .why-choose-us,
body .zp-why-section{
    background:
        linear-gradient(
            135deg,
            #F6FBFD 0%,
            #ECF8FB 100%
        ) !important;
}

body .why-choose-us .icon,
body .zp-why-section .icon{
    color:var(--home-blue) !important;

    background:
        linear-gradient(
            135deg,
            rgba(0,103,197,.10),
            rgba(8,185,199,.18)
        ) !important;
}


/* =========================================================
   STRONG ACCENT SECTION
========================================================= */

body .home-cta,
body .zp-home-cta{
    background:var(--home-ocean-gradient) !important;
}

body .home-cta h2,
body .home-cta h3,
body .home-cta p,
body .zp-home-cta h2,
body .zp-home-cta h3,
body .zp-home-cta p{
    color:#fff !important;
}


/* =========================================================
   FORM FOCUS
========================================================= */

body .zp-home-page input:focus,
body .zp-home-page select:focus,
body .home-page input:focus,
body .home-page select:focus{
    border-color:var(--home-turquoise) !important;

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


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

body .zp-home-page a:hover,
body .home-page a:hover{
    color:var(--home-blue);
}


/* =========================================================
   ZAN PEARL HOME - FULL OCEAN BRAND
   Same visual identity as premium navigation
========================================================= */

:root{
    --zp-menu-blue:#046157;
    --zp-menu-sky:#08786C;
    --zp-menu-turquoise:#0A8B7D;
    --zp-menu-navy:#044C48;
    --zp-menu-gold:#FC7507;

    --zp-menu-gradient:
        linear-gradient(
            110deg,
            #046157 0%,
            #08786C 48%,
            #0A8B7D 100%
        );
}


/* =========================================================
   ABOUT / GATEWAY SECTION
========================================================= */

.zp-about-section,
.home-about,
.about-home,
section[class*="about"]{
    position:relative;

    background:
        linear-gradient(
            135deg,
            #F7FCFE 0%,
            #ECF8FC 100%
        ) !important;
}


/* headings */

.zp-about-section h2,
.home-about h2,
.about-home h2{
    color:#044C48 !important;
}

.zp-about-section h2 span,
.home-about h2 span,
.about-home h2 span{
    color:#FC7507 !important;
}


/* labels */

.zp-about-section .section-label,
.zp-about-section .eyebrow,
.home-about .section-label,
.home-about .eyebrow{
    color:#08786C !important;
}


/* about icons */

.zp-about-section i,
.home-about i,
.about-home i{
    color:#08786C;
}


/* about feature blocks */

.zp-about-section [class*="feature"],
.home-about [class*="feature"],
.about-home [class*="feature"]{
    border-color:
        rgba(8,185,199,.20) !important;
}


/* about main button */

.zp-about-section a[class*="btn"],
.home-about a[class*="btn"],
.about-home a[class*="btn"]{
    background:
        linear-gradient(
            135deg,
            #046157,
            #0A8B7D
        ) !important;

    color:#fff !important;

    border-color:transparent !important;

    box-shadow:
        0 9px 22px
        rgba(0,103,197,.18);
}


/* gold arrow / circle */

.zp-about-section a[class*="btn"] i,
.home-about a[class*="btn"] i,
.about-home a[class*="btn"] i{
    color:#044C48 !important;

    background:#FC7507 !important;
}


/* =========================================================
   POPULAR SAFARIS
========================================================= */

section[class*="safari"],
.safaris-home,
.safari-home-section{
    background:
        linear-gradient(
            180deg,
            #FFFFFF 0%,
            #EFF9FC 100%
        );
}


/* safari heading */

section[class*="safari"] h2,
.safaris-home h2,
.safari-home-section h2{
    color:#044C48 !important;
}

section[class*="safari"] h2 span,
.safaris-home h2 span,
.safari-home-section h2 span{
    color:#FC7507 !important;
}


/* safari section small title */

section[class*="safari"] .section-label,
section[class*="safari"] .eyebrow{
    color:#08786C !important;
}


/* safari cards */

section[class*="safari"] [class*="card"]{
    border-color:
        rgba(0,103,197,.13) !important;

    box-shadow:
        0 12px 30px
        rgba(0,103,197,.08) !important;
}

section[class*="safari"] [class*="card"]:hover{
    border-color:
        rgba(8,185,199,.55) !important;

    box-shadow:
        0 19px 42px
        rgba(0,103,197,.14) !important;

    transform:translateY(-4px);
}


/* safari image lower information strip */

section[class*="safari"] [class*="meta"],
section[class*="safari"] [class*="location"]{
    border-color:
        rgba(8,185,199,.16) !important;
}


/* badges */

section[class*="safari"] [class*="badge"]:not(.popular),
section[class*="safari"] [class*="featured"]{
    background:
        linear-gradient(
            135deg,
            #046157,
            #0A8B7D
        ) !important;

    color:#fff !important;
}


/* popular badge stays gold */

section[class*="safari"] .popular,
section[class*="safari"] [class*="popular"]{
    background:#FC7507 !important;

    color:#044C48 !important;
}


/* safari icons */

section[class*="safari"] i{
    color:#08786C;
}


/* Safari card buttons */

section[class*="safari"] a[class*="btn"],
section[class*="safari"] button{
    border-color:#046157 !important;

    color:#046157 !important;
}

section[class*="safari"] a[class*="btn"]:hover,
section[class*="safari"] button:hover{
    background:
        linear-gradient(
            135deg,
            #046157,
            #0A8B7D
        ) !important;

    color:#fff !important;

    border-color:transparent !important;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.why-choose-us,
.zp-why-section,
section[class*="why"]{
    position:relative;

    background:
        linear-gradient(
            120deg,
            #EDF8FC 0%,
            #F7FCFE 55%,
            #E9F8FA 100%
        ) !important;
}


/* blue decorative glow */

.why-choose-us::before,
.zp-why-section::before,
section[class*="why"]::before{
    content:"";

    position:absolute;

    width:340px;
    height:340px;

    left:-170px;
    bottom:-150px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(0,159,227,.12),
            transparent 68%
        );

    pointer-events:none;
}


/* title */

.why-choose-us h2,
.zp-why-section h2,
section[class*="why"] h2{
    color:#044C48 !important;
}


/* gold selected words */

.why-choose-us h2 span,
.zp-why-section h2 span,
section[class*="why"] h2 span{
    color:#FC7507 !important;
}


/* WHY label */

.why-choose-us .section-label,
.why-choose-us .eyebrow,
.zp-why-section .section-label,
.zp-why-section .eyebrow{
    color:#046157 !important;
}


/* feature icons */

.why-choose-us [class*="icon"],
.zp-why-section [class*="icon"],
section[class*="why"] [class*="icon"]{
    background:
        linear-gradient(
            135deg,
            rgba(0,103,197,.10),
            rgba(8,185,199,.20)
        ) !important;

    color:#046157 !important;

    border-color:
        rgba(8,185,199,.20) !important;
}


/* feature separators */

.why-choose-us [class*="item"],
.zp-why-section [class*="item"]{
    border-color:
        rgba(0,103,197,.13) !important;
}


/* =========================================================
   ALL HOME CARD SMALL ICON CIRCLES
========================================================= */

main [class*="tour"] [class*="icon"],
main [class*="safari"] [class*="icon"],
main [class*="about"] [class*="icon"],
main [class*="why"] [class*="icon"]{
    transition:.25s ease;
}


/* =========================================================
   BLUE → TURQUOISE DECORATIVE LINES
========================================================= */

main .section-line,
main [class*="divider"],
main [class*="separator"]{
    border-color:
        rgba(8,185,199,.20) !important;
}


/* =========================================================
   GOLD ONLY FOR IMPORTANT HIGHLIGHTS
========================================================= */

main .stars,
main [class*="star"]{
    color:#FC7507 !important;
}


/* =========================================================
   HOME SECTION TRANSITIONS
========================================================= */

.zp-about-section,
section[class*="safari"],
.why-choose-us,
.zp-why-section{
    transition:
        background .25s ease,
        border-color .25s ease;
}


/* GO ZANZIBAR HERO - LIGHTER IMAGE OVERLAY */

.zp-home-hero .zp-hero-overlay{
    background:rgba(2,59,56,.28) !important;
}

