/* =====================================================
Kingo Adventurers
Premium Safari Homepage Styles
===================================================== */


/* ===========================
RESET
=========================== */


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


html{
    scroll-behavior:smooth;
}

.hero-location{

font-family:
"DM Sans",
sans-serif;

font-size:14px;

font-weight:600;

letter-spacing:4px;

text-transform:uppercase;

color:#e6c77a;

margin-bottom:25px;

display:flex;

flex-direction:column;

gap:8px;

}


.hero-location span{

font-size:12px;

letter-spacing:5px;

color:white;

opacity:.85;

}


/* ===========================
ABOUT US DROPDOWN
=========================== */


.nav-dropdown {
    position: relative;
}



.nav-dropdown > a {
    display: flex;
    align-items: center;
    gap: 6px;
}





.dropdown-menu {

    position: absolute;

    top: calc(100% + 20px);

    left: 0;

    background: #ffffff;

    min-width: 190px;

    padding: 15px 0;

    box-shadow: 0 15px 40px rgba(0,0,0,0.15);

    opacity: 0;

    visibility: hidden;

    transform: translateY(10px);

    transition:
    all .3s ease;

    z-index: 9999;

}





.dropdown-menu a {

    display: block;

    padding: 12px 25px;

    color: #12372a;

    font-size: 15px;

    white-space: nowrap;

}




.dropdown-menu a:hover {

    background: #f5f1e8;

    color: #b08b45;

}





.nav-dropdown:hover .dropdown-menu {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}

body{

    font-family:
    "DM Sans",
    Arial,
    sans-serif;

    color:#1d2722;

    background:#ffffff;

    line-height:1.6;

    overflow-x:hidden;

}


img{

    max-width:100%;

    display:block;

}


a{

    text-decoration:none;

    color:inherit;

}


ul{

    list-style:none;

}


button{

    border:none;

    background:none;

    cursor:pointer;

    font-family:inherit;

}




/* ===========================
VARIABLES
=========================== */


:root{


--green:#12372a;

--deep-green:#0b241b;

--gold:#c59a45;

--sand:#f6f1e8;

--cream:#faf8f3;

--dark:#141914;

--text:#374139;

--white:#ffffff;


--serif:
"Playfair Display",
serif;


--sans:
"DM Sans",
sans-serif;


--container:
1240px;


--transition:
all .45s ease;


}






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


.container{

width:min(
var(--container),
calc(100% - 70px)
);

margin-left:60px;

margin-right:auto;

}

@media(max-width:600px){

.container{

margin-left:30px;

width:
calc(100% - 40px);

}


.hero-content{

max-width:100%;

}

}

.section{

    padding:90px 0;

}



.eyebrow{

    font-size:12px;

    letter-spacing:3px;

    text-transform:uppercase;

    color:var(--gold);

    margin-bottom:18px;

    font-weight:600;

}


.eyebrow.light{

    color:#f3dca2;

}



h1,
h2,
h3{

    font-family:var(--serif);

    font-weight:600;

    line-height:1.15;

}


h2{

    font-size:
    clamp(42px,5vw,70px);

}


h2 em,
h1 em{

    font-style:italic;

    color:var(--gold);

}



p{

    color:var(--text);

    font-size:17px;

}





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


.button{


display:inline-flex;

align-items:center;

gap:12px;

padding:15px 32px;

font-size:14px;

font-weight:600;

text-transform:uppercase;

letter-spacing:1px;

transition:var(--transition);


}



.button-gold{

background:var(--gold);

color:white;


}



.button-gold:hover{

background:#aa7e30;

transform:translateY(-3px);

}



.button-dark{

background:var(--green);

color:white;

}



.button-outline{

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

color:white;

}



.button-outline:hover{

background:white;

color:var(--green);

}





.text-link{

display:inline-flex;

gap:12px;

align-items:center;

margin-top:25px;

font-weight:600;

text-transform:uppercase;

font-size:13px;

letter-spacing:1px;

}



.text-link i{

color:var(--gold);

}







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


.site-header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;

color:white;

transition:

background .4s ease,
padding .4s ease;

}

.site-header.scrolled{

background:

rgba(18,55,42,.96);

backdrop-filter:

blur(12px);

box-shadow:

0 8px 25px rgba(0,0,0,.15);

}

.utility-bar{

background:rgba(0,0,0,.25);

font-size:13px;

}



.utility-bar .container{

height:40px;

display:flex;

align-items:center;

justify-content:flex-start;

gap:20px;

padding-left:352px;

}


.utility-bar a{

margin-left:auto;

}



.navbar{

height:85px;

display:flex;

align-items:center;

justify-content:space-between;

gap:40px;

}

@media(max-width:600px){

.hero-content{

padding-left:20px;

padding-right:20px;

}


}


.logo img{

width:100px;

height:auto;

}



.nav-menu{

display:flex;

align-items:center;

gap:30px;

}



.nav-menu a{

font-size:14px;

font-weight:500;

transition:.3s;

}



.nav-menu a:hover,
.nav-menu .active{

color:var(--gold);

}



.nav-button{

background:var(--gold);

padding:13px 24px;

color:white!important;

}



.menu-toggle{

display:none;

color:white;

font-size:28px;

}





/* ===========================
HERO
=========================== */


.hero{

height:100vh;

min-height:720px;

position:relative;

overflow:hidden;

}



.hero-slider{

position:absolute;

inset:0;

}



.hero-slide{

position:absolute;

inset:0;

opacity:0;

transition:
opacity 1.8s ease;

}



.hero-slide.active{

opacity:1;

}



.hero-slide img{

width:100%;

height:100%;

object-fit:cover;

animation:
zoom 12s infinite alternate;

}



@keyframes zoom{


from{

transform:scale(1);

}


to{

transform:scale(1.08);

}


}




.hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
rgba(0,0,0,.7),
rgba(0,0,0,.25)
);


}




.hero-content{

position:relative;

z-index:2;

height:100%;

display:flex;

justify-content:center;

flex-direction:column;

max-width:850px;

color:white;

padding-left:80px;

}

margin-left:20;

}

@media(min-width:1600px){

.hero-content h1{

font-size:78px;

}

}

.hero-content h1{

font-size:

clamp(45px,5.5vw,72px);

color:white;

margin-bottom:25px;

line-height:1.12;

}


.hero-text{

color:white;

max-width:650px;

font-size:20px;

margin-bottom:35px;

}



.hero-buttons{

display:flex;

gap:20px;

}





.hero-navigation{

position:absolute;

right:50px;

bottom:60px;

z-index:3;

display:flex;

gap:15px;

}



.hero-navigation button{

width:50px;

height:50px;

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

color:white;

}



.hero-dots{

position:absolute;

bottom:70px;

left:50%;

transform:translateX(-50%);

display:flex;

gap:10px;

}



.hero-dots span{

width:10px;

height:10px;

border-radius:50%;

background:white;

opacity:.5;

}



.hero-dots .active{

opacity:1;

background:var(--gold);

}

/* =====================================================
INTRO SECTION
===================================================== */


.intro-grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:80px;

align-items:center;

}



.intro-title h2{

max-width:550px;

}



.intro-content{

max-width:520px;

}



.intro-content p{

margin-bottom:20px;

}






/* =====================================================
FEATURE STORY
===================================================== */


.feature-story{

padding:40px 0 100px;

}



.feature-grid{

display:grid;

grid-template-columns:

1.1fr .9fr;

gap:80px;

align-items:center;

}



.feature-image{

height:650px;

overflow:hidden;

}



.feature-image img{

height:100%;

width:100%;

object-fit:cover;

transition:
transform .8s ease;

}



.feature-image:hover img{

transform:scale(1.05);

}




.feature-content h2{

margin-bottom:25px;

}



.feature-content p{

margin-bottom:30px;

}




.feature-list{

margin:30px 0;

}



.feature-list li{

display:flex;

align-items:center;

gap:15px;

margin-bottom:18px;

font-size:16px;

}



.feature-list i{

color:var(--gold);

}







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


.section-header{

display:flex;

justify-content:space-between;

align-items:end;

gap:50px;

margin-bottom:60px;

}



.section-header > p{

max-width:420px;

}








/* =====================================================
DESTINATIONS
===================================================== */


.destinations{

background:
var(--cream);

}




.destination-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

grid-template-rows:
350px 350px;

gap:25px;

}




.destination-card{

position:relative;

overflow:hidden;

min-height:350px;

color:white;

}



.destination-card img{

height:100%;

width:100%;

object-fit:cover;

transition:

transform .8s ease;

}



.destination-card:hover img{

transform:scale(1.08);

}



.destination-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
to top,
rgba(0,0,0,.75),
rgba(0,0,0,.05)
);

}



.destination-info{

position:absolute;

bottom:35px;

left:35px;

z-index:2;

}



.destination-info span{

font-size:12px;

letter-spacing:2px;

text-transform:uppercase;

color:#e8d19a;

}



.destination-info h3{

font-size:42px;

margin:10px 0;

color:white;

}



.destination-info p{

color:white;

}




.destination-large{

grid-column:
span 2;

}



.destination-wide{

grid-column:
span 2;

}




.center-link{

text-align:center;

margin-top:50px;

}







/* =====================================================
JOURNEYS
===================================================== */


.journeys{

background:white;

}



.journey-cards{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:30px;

}




.journey-card{

background:#fff;

box-shadow:

0 20px 50px rgba(0,0,0,.08);

overflow:hidden;

transition:

transform .4s ease;

}



.journey-card:hover{

transform:
translateY(-10px);

}




.journey-card img{

width:100%;

height:350px;

object-fit:cover;

}




.journey-content{

padding:35px;

}



.journey-content span{

font-size:12px;

text-transform:uppercase;

letter-spacing:2px;

color:var(--gold);

}



.journey-content h3{

font-size:32px;

margin:15px 0;

}



.journey-content p{

margin-bottom:25px;

}



.journey-content a{

display:flex;

align-items:center;

gap:10px;

font-size:13px;

text-transform:uppercase;

font-weight:600;

letter-spacing:1px;

}






/* =====================================================
EXPERIENCES
===================================================== */


.experiences{

background:

var(--green);

color:white;

}




.experience-header{

max-width:700px;

margin-bottom:60px;

}



.experience-header h2{

color:white;

}



.experience-header p:not(.eyebrow){

color:#e7e7e7;

}




.experience-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:25px;

}




.experience-grid a{

position:relative;

height:420px;

overflow:hidden;

display:flex;

align-items:flex-end;

color:white;

}



.experience-grid img{

position:absolute;

inset:0;

height:100%;

width:100%;

object-fit:cover;

transition:

transform .8s ease;

}




.experience-grid a::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
to top,
rgba(0,0,0,.8),
transparent
);

}



.experience-grid a:hover img{

transform:
scale(1.1);

}




.experience-grid h3{

position:relative;

z-index:2;

padding:35px;

font-size:32px;

color:white;

}





/* =====================================================
SCROLL ANIMATIONS
===================================================== */


.reveal{

opacity:0;

transform:
translateY(40px);

transition:
all .8s ease;

}


.reveal.visible{

opacity:1;

transform:
translateY(0);

}

/* =====================================================
TESTIMONIALS
===================================================== */


.testimonials{

background:
var(--cream);

text-align:center;

}



.testimonial-header{

margin-bottom:50px;

}



.testimonial-card{

max-width:850px;

margin:auto;

background:white;

padding:60px 70px;

box-shadow:

0 20px 50px rgba(0,0,0,.08);

}



.stars{

color:var(--gold);

font-size:22px;

letter-spacing:5px;

margin-bottom:30px;

}



.testimonial-card blockquote{

font-family:
var(--serif);

font-size:

clamp(25px,3vw,38px);

line-height:1.4;

color:var(--green);

margin-bottom:35px;

}



.traveller{

display:flex;

flex-direction:column;

gap:5px;

}



.traveller strong{

font-size:18px;

}



.traveller span{

font-size:14px;

color:#777;

}







/* =====================================================
FOUNDATION SECTION
===================================================== */


.foundation-section{

position:relative;

min-height:700px;

display:flex;

align-items:center;

overflow:hidden;

}



.foundation-section > img{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

}



.foundation-overlay{

position:absolute;

inset:0;

background:

rgba(10,35,27,.75);

}



.foundation-content{

position:relative;

z-index:2;

color:white;

max-width:800px;

}



.foundation-content h2{

color:white;

margin-bottom:25px;

}



.foundation-content p{

color:white;

max-width:600px;

margin-bottom:35px;

}



.impact-numbers{

display:flex;

gap:60px;

margin:45px 0;

}



.impact-numbers div{

display:flex;

flex-direction:column;

}



.impact-numbers strong{

font-family:var(--serif);

font-size:55px;

color:var(--gold);

line-height:1;

}



.impact-numbers span{

font-size:14px;

color:#eee;

margin-top:10px;

}







/* =====================================================
VIDEO SECTION
===================================================== */


.video-wrapper{

position:relative;

height:600px;

overflow:hidden;

background:#000;

}



.video-wrapper iframe{

width:100%;

height:100%;

border:0;

}




.video-section .center-link{

margin-top:40px;

}







/* =====================================================
JOURNAL
===================================================== */


.journal{

background:white;

}



.journal-grid{

display:grid;

grid-template-columns:

repeat(3,1fr);

gap:35px;

}



.journal-card{

display:block;

}



.journal-card img{

height:320px;

width:100%;

object-fit:cover;

margin-bottom:25px;

transition:

transform .6s ease;

}



.journal-card:hover img{

transform:scale(1.05);

}



.journal-card h3{

font-size:30px;

}



.journal-card .eyebrow{

margin-bottom:10px;

}







/* =====================================================
FINAL CTA
===================================================== */


.final-cta{

background:

linear-gradient(
rgba(0,0,0,.6),
rgba(0,0,0,.6)
),

url("../images/sunset.jpeg");

background-size:cover;

background-position:center;

padding:120px 0;

text-align:center;

color:white;

}



.final-cta h2{

color:white;

margin-bottom:25px;

}



.final-cta p:not(.eyebrow){

color:white;

max-width:650px;

margin:

0 auto 35px;

}







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


.footer{

background:

var(--deep-green);

color:white;

padding-top:80px;

}



.footer-grid{

display:grid;

grid-template-columns:

1.5fr 1fr 1fr 1fr;

gap:50px;

padding-bottom:60px;

}



.footer-logo{

width:100px;

margin-bottom:25px;

}



.footer-brand p{

color:#ddd;

max-width:350px;

}



.footer-column{

display:flex;

flex-direction:column;

gap:15px;

}



.footer-column h4{

font-size:18px;

margin-bottom:10px;

font-family:var(--sans);

}



.footer-column a{

color:#ddd;

transition:.3s;

}



.footer-column a:hover{

color:var(--gold);

}



.social-links{

display:flex;

gap:15px;

}



.social-links a{

width:45px;

height:45px;

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

display:flex;

align-items:center;

justify-content:center;

font-size:20px;

transition:.3s;

}



.social-links a:hover{

background:var(--gold);

border-color:var(--gold);

}



.copyright{

border-top:

1px solid rgba(255,255,255,.15);

padding:25px 0;

display:flex;

justify-content:space-between;

color:#aaa;

font-size:14px;

}







/* =====================================================
WHATSAPP FLOAT BUTTON
===================================================== */


.whatsapp-button{

position:fixed;

right:25px;

bottom:25px;

width:60px;

height:60px;

background:#25d366;

color:white;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:30px;

z-index:50;

box-shadow:

0 10px 30px rgba(0,0,0,.3);

transition:.3s;

}



.whatsapp-button:hover{

transform:

translateY(-5px);

}







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


@media(max-width:1024px){



.container{

width:

calc(100% - 50px);

}


.nav-menu{

flex:1;

justify-content:flex-end;

}

.nav-menu{

display:none;

}



.menu-toggle{

display:block;

}



.section{

padding:70px 0;

}



.intro-grid,
.feature-grid{

grid-template-columns:1fr;

gap:45px;

}



.destination-grid{

grid-template-columns:

repeat(2,1fr);

}



.destination-large,
.destination-wide{

grid-column:auto;

}



.journey-cards,
.experience-grid,
.journal-grid{

grid-template-columns:

repeat(2,1fr);

}



.footer-grid{

grid-template-columns:

repeat(2,1fr);

}



}







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


@media(max-width:600px){



.container{

width:

calc(100% - 35px);

}



.utility-bar{

display:none;

}



.logo img{

width:100px;

}



.hero{

min-height:650px;

}



.hero-content h1{

font-size:48px;

}



.hero-text{

font-size:16px;

}



.hero-buttons{

flex-direction:column;

align-items:flex-start;

}



.hero-navigation{

right:20px;

bottom:30px;

}



.hero-dots{

bottom:35px;

}



.section-header{

display:block;

}



.section-header .button{

margin-top:25px;

}



.destination-grid,
.journey-cards,
.experience-grid,
.journal-grid{

grid-template-columns:1fr;

}



.destination-info h3{

font-size:32px;

}



.feature-image{

height:450px;

}



.testimonial-card{

padding:35px 25px;

}



.impact-numbers{

flex-direction:column;

gap:25px;

}



.foundation-section{

min-height:650px;

}



.video-wrapper{

height:300px;

}



.footer-grid{

grid-template-columns:1fr;

}



.copyright{

flex-direction:column;

gap:10px;

}



.final-cta{

padding:80px 0;

}



}

/* ==================================================
   KINGO ADVENTURERS - DESKTOP HEADER FIX
   ================================================== */


/* Fixed premium header */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
}


/* Compact contact strip */
.utility-bar {
    height: 34px;
    display: flex;
    align-items: center;
    font-size: 13px;
}



/* Main navigation height */
.navbar {
    height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}



/* Logo control */
/* ===========================
HEADER LOGO
=========================== */

.logo img{
    height:30px;      /* Reduced by approximately half */
    width:auto;
    display:block;
    object-fit:contain;
    transition:0.3s ease;
}

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

.footer-logo{
    height:35px;      /* Reduced by approximately half */
    width:auto;
    display:block;
    margin-bottom:20px;
}

.footer-brand img{
    height:35px;
    width:auto;
}

/* Navigation spacing */
.nav-menu {
    display: flex;
    align-items: center;
    gap: 26px;
}



.nav-menu > a,
.nav-dropdown > a {
    font-size: 15px;
    font-weight: 500;
    color: #12372a;
}



/* Plan button */
.nav-button {
    padding: 11px 22px;
    border-radius: 30px;
}




/* About dropdown positioning */
.dropdown-menu {
    top: 65px;
}



/* Prevent header from consuming screen */
body {
    overflow-x: hidden;
}





/* Laptop optimization */
@media (min-width:992px){

    .logo img{
        height:30px;
    }

    .footer-logo{
        height:35px;
    }

}

@media (max-width:1400px) and (min-width:992px) {


    .navbar {
        height: 72px;
    }


    .utility-bar {
        height:32px;
    }


    .logo img {
        height:52px;
    }


    .nav-menu {
        gap:20px;
    }


    .nav-menu > a,
    .nav-dropdown > a {
        font-size:14px;
    }


    .nav-button {
        padding:10px 18px;
    }


}

/* =========================================================
   KINGO LOGO — ENLARGE WITHIN EXISTING HEADER
   Header dimensions remain completely unchanged
   ========================================================= */

.site-header .logo {
    display: flex;
    align-items: center;
    padding: 0 !important;
    margin: 0 !important;
    height: 90%;
    flex-shrink: 0;
}

.site-header .logo img {
    display: block;

    /* Larger logo, but contained within the existing header */
    height: 100px !important;
    width: auto !important;

    max-height: 100px !important;
    max-width: 280px !important;

    object-fit: contain;
    object-position: center;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   MOBILE — SAME PRINCIPLE
   ========================================================= */

@media (max-width: 991px) {

    .site-header .logo img {
        height: 70px !important;
        max-height: 70px !important;
        max-width: 210px !important;
    }

}

<style id="kingo-master-header">

:root{
    --kingo-deep:#10251d;
    --kingo-green:#18382c;
    --kingo-gold:#d6a84f;
    --kingo-gold-light:#e4bd68;
    --kingo-cream:#f7f1e5;
}


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

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    padding-top:116px;
}


/* =========================
   HEADER — PERMANENT CREAM
========================= */

.site-header{
    position:fixed!important;
    top:0!important;
    left:0!important;
    right:0!important;

    width:100%!important;
    z-index:99999!important;

    background:#f7f1e5!important;

    box-shadow:
        0 1px 0 rgba(16,37,29,.08),
        0 8px 30px rgba(16,37,29,.04);

    transform:none!important;
    transition:none!important;
}


/* =========================
   UTILITY BAR
========================= */

.utility-bar{
    min-height:30px;

    display:flex;
    align-items:center;

    background:#10251d!important;
    color:rgba(255,255,255,.72);

    font-size:.67rem;
    letter-spacing:.03em;
}

.utility-bar .container{
    min-height:30px;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:12px;
}

.utility-bar a{
    color:rgba(255,255,255,.82);
}

.utility-bar a:hover{
    color:#e4bd68;
}

.utility-bar i{
    margin-right:5px;
    color:#e4bd68;
}


/* =========================
   NAVBAR
========================= */

.navbar{
    min-height:86px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;
}


/* =========================
   LOGO
========================= */

.logo{
    display:flex;
    align-items:center;
    flex-shrink:0;

    background:transparent!important;
}

.logo img{
    width:110px!important;
    height:auto!important;

    display:block;

    object-fit:contain;

    background:transparent!important;
}


/* =========================
   NAVIGATION
========================= */

.nav-menu{
    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:27px;
}


/* ALL NORMAL NAVIGATION LINKS */

.nav-menu > a:not(.nav-button),
.nav-dropdown > a{
    position:relative;

    color:#18382c!important;

    font-size:.76rem;
    font-weight:700;

    letter-spacing:.055em;
    text-transform:uppercase;

    white-space:nowrap;

    transition:
        color .25s ease;
}


/* UNDERLINE */

.nav-menu > a:not(.nav-button)::after,
.nav-dropdown > a::after{
    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;
    height:2px;

    background:#d6a84f;

    transition:width .25s ease;
}


/* HOVER = GOLD + UNDERLINE */

.nav-menu > a:not(.nav-button):hover,
.nav-dropdown > a:hover{
    color:#d6a84f!important;
}

.nav-menu > a:not(.nav-button):hover::after,
.nav-dropdown > a:hover::after{
    width:100%;
}


/* =========================
   ACTIVE PAGE
========================= */

.nav-menu > a.active,
.nav-dropdown > a.active{
    color:#d6a84f!important;
}

.nav-menu > a.active::after,
.nav-dropdown > a.active::after{
    width:100%;
}


/* =========================
   ABOUT US DROPDOWN
========================= */

.nav-dropdown{
    position:relative;

    display:flex;
    align-items:center;
}

.nav-dropdown > a{
    display:flex;
    align-items:center;
    gap:7px;
}

.nav-dropdown > a i{
    font-size:.58rem;
    transition:transform .25s ease;
}

.nav-dropdown:hover > a i{
    transform:rotate(180deg);
}


.dropdown-menu{
    position:absolute;

    top:calc(100% + 22px);
    left:50%;

    transform:
        translateX(-50%)
        translateY(8px);

    min-width:190px;

    padding:10px;

    background:#f7f1e5!important;

    border-top:2px solid #d6a84f;

    box-shadow:
        0 15px 35px rgba(16,37,29,.15);

    opacity:0;
    visibility:hidden;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;

    z-index:100000;
}

.nav-dropdown:hover .dropdown-menu{
    opacity:1;
    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0);
}


.dropdown-menu a{
    display:block;

    padding:12px 14px;

    color:#18382c!important;

    font-size:.72rem;
    font-weight:700;

    letter-spacing:.045em;

    text-transform:uppercase;

    white-space:nowrap;

    transition:
        background .2s ease,
        color .2s ease;
}


.dropdown-menu a:hover{
    background:rgba(214,168,79,.12);

    color:#d6a84f!important;
}


.dropdown-menu a.active{
    background:rgba(214,168,79,.16);

    color:#d6a84f!important;
}


/* =========================
   PLAN YOUR JOURNEY
========================= */

.nav-menu > a.nav-button{
    display:inline-flex!important;

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

    gap:10px;

    padding:13px 18px;

    background:#18382c!important;

    color:#fff!important;

    transition:
        transform .25s ease,
        background .25s ease;
}

.nav-menu > a.nav-button::after{
    display:none!important;
}

.nav-menu > a.nav-button:hover{
    background:#d6a84f!important;

    color:#10251d!important;

    transform:translateY(-2px);
}

.nav-button i{
    transition:transform .25s ease;
}

.nav-button:hover i{
    transform:translateX(4px);
}


/* =========================
   MOBILE MENU BUTTON
========================= */

.menu-toggle{
    display:none;

    border:0;

    background:transparent;

    color:#18382c!important;

    font-size:1.35rem;
}


/* =========================
   RESPONSIVE
========================= */

@media(max-width:1100px){

    .nav-menu{
        gap:18px;
    }

    .nav-menu > a:not(.nav-button),
    .nav-dropdown > a{
        font-size:.69rem;
    }
}


@media(max-width:900px){

    body{
        padding-top:82px;
    }

    .utility-bar{
        display:none;
    }

    .navbar{
        min-height:82px;
    }

    .logo img{
        width:110px!important;
        max-height:82px;
    }

    .menu-toggle{
        display:block;
    }

    .nav-menu{
        position:absolute;

        top:100%;
        left:0;
        right:0;

        display:none;

        flex-direction:column;
        align-items:stretch;

        gap:0;

        padding:12px 24px 25px;

        background:#f7f1e5!important;

        box-shadow:
            0 15px 30px rgba(16,37,29,.12);
    }

    .nav-menu.open{
        display:flex;
    }

    .nav-menu > a:not(.nav-button),
    .nav-dropdown > a{
        padding:13px 0;
    }

    .nav-menu > a:not(.nav-button)::after,
    .nav-dropdown > a::after{
        display:none;
    }


    /* MOBILE ACTIVE LINK */

    .nav-menu > a.active,
    .nav-dropdown > a.active{
        color:#d6a84f!important;
    }


    /* MOBILE DROPDOWN */

    .nav-dropdown{
        display:block;
    }

    .nav-dropdown > a{
        display:flex;
        justify-content:space-between;

        width:100%;
    }

    .dropdown-menu{
        position:static;

        transform:none!important;

        min-width:0;

        padding:0 0 5px;

        background:transparent!important;

        border-top:0;

        box-shadow:none;

        opacity:1;
        visibility:visible;
    }

    .dropdown-menu a{
        padding:10px 15px;

        font-size:.68rem;
    }

    .nav-button{
        justify-content:center;

        margin-top:8px;
    }
}


@media(max-width:640px){

    .container{
        width:min(calc(100% - 30px),1240px);
    }
}


<style id="kingo-about-header">

/* =========================================================
   KINGO ABOUT-SECTION MASTER HEADER
   Visual system copied from ABOUT-US landing page
========================================================= */

:root{
    --kingo-deep:#10251d;
    --kingo-green:#18382c;
    --kingo-gold:#d6a84f;
    --kingo-gold-light:#e4bd68;
    --kingo-cream:#f7f1e5;
    --kingo-white:#ffffff;
}


/* =========================================================
   HEADER — ALWAYS CREAM
========================================================= */

.site-header,
.site-header.scrolled,
.site-header.transparent,
.site-header.sticky{
    background:#f7f1e5 !important;

    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;

    z-index:99999 !important;

    box-shadow:
        0 1px 0 rgba(16,37,29,.08),
        0 8px 30px rgba(16,37,29,.04) !important;

    transform:none !important;
}


/* =========================================================
   UTILITY BAR
========================================================= */

.utility-bar{
    min-height:30px;

    background:#10251d !important;

    color:rgba(255,255,255,.72) !important;

    display:flex;
    align-items:center;

    font-size:.67rem;

    letter-spacing:.03em;
}

.utility-bar .container{
    min-height:30px;

    display:flex;
    align-items:center;
    justify-content:flex-end;

    gap:12px;
}

.utility-bar a{
    color:rgba(255,255,255,.82) !important;
}

.utility-bar i{
    color:#e4bd68 !important;
}


/* =========================================================
   NAVBAR
========================================================= */

.navbar{
    min-height:86px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:30px;

    background:#f7f1e5 !important;
}


/* =========================================================
   LOGO
========================================================= */

.logo{
    display:flex;
    align-items:center;

    flex-shrink:0;

    background:transparent !important;
}

.logo img{
    width:110px !important;

    height:auto !important;

    max-height:86px !important;

    display:block;

    object-fit:contain;

    background:transparent !important;
}


/* =========================================================
   MAIN NAVIGATION
========================================================= */

.nav-menu{
    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:27px;
}


/* =========================================================
   NORMAL NAV LINKS
========================================================= */

.nav-menu > a:not(.nav-button),
.nav-dropdown > a{

    position:relative;

    color:#18382c !important;

    font-size:.76rem;

    font-weight:700;

    letter-spacing:.055em;

    text-transform:uppercase;

    white-space:nowrap;

    text-decoration:none;

    transition:
        color .25s ease;
}


/* =========================================================
   NAV UNDERLINE
========================================================= */

.nav-menu > a:not(.nav-button)::after,
.nav-dropdown > a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#d6a84f;

    transition:width .25s ease;
}


/* =========================================================
   HOVER
========================================================= */

.nav-menu > a:not(.nav-button):hover,
.nav-dropdown > a:hover{

    color:#d6a84f !important;
}

.nav-menu > a:not(.nav-button):hover::after,
.nav-dropdown > a:hover::after{

    width:100%;
}


/* =========================================================
   ACTIVE TOP-LEVEL SECTION
========================================================= */

.nav-dropdown.active > a{

    color:#d6a84f !important;
}

.nav-dropdown.active > a::after{

    width:100%;
}


/* =========================================================
   ABOUT US DROPDOWN
========================================================= */

.nav-dropdown{

    position:relative;

    display:flex;

    align-items:center;
}

.nav-dropdown > a{

    display:flex;

    align-items:center;

    gap:7px;
}

.nav-dropdown > a i{

    font-size:.58rem;

    transition:
        transform .25s ease;
}

.nav-dropdown:hover > a i{

    transform:rotate(180deg);
}


/* =========================================================
   DROPDOWN PANEL
========================================================= */

.dropdown-menu{

    position:absolute;

    top:calc(100% + 22px);

    left:50%;

    transform:
        translateX(-50%)
        translateY(8px);

    min-width:190px;

    padding:10px;

    background:#f7f1e5 !important;

    border-top:2px solid #d6a84f;

    box-shadow:
        0 15px 35px rgba(16,37,29,.15);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .22s ease,
        visibility .22s ease,
        transform .22s ease;

    z-index:100000;
}


/* SHOW DROPDOWN */

.nav-dropdown:hover .dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:
        translateX(-50%)
        translateY(0);
}


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

.dropdown-menu a{

    display:block;

    padding:12px 14px;

    color:#18382c !important;

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.045em;

    text-transform:uppercase;

    white-space:nowrap;

    text-decoration:none;

    transition:
        background .2s ease,
        color .2s ease;
}


/* DROPDOWN HOVER */

.dropdown-menu a:hover{

    background:rgba(214,168,79,.12);

    color:#d6a84f !important;
}


/* =========================================================
   CURRENT PAGE — OUR COMPANY
========================================================= */

.dropdown-menu a.active{

    background:rgba(214,168,79,.16);

    color:#d6a84f !important;
}


/* =========================================================
   PLAN YOUR JOURNEY
========================================================= */

.nav-button{

    display:inline-flex !important;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:13px 18px;

    background:#18382c !important;

    color:#ffffff !important;

    text-decoration:none;

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

.nav-button::after{

    display:none !important;
}

.nav-button:hover{

    background:#d6a84f !important;

    color:#10251d !important;

    transform:translateY(-2px);
}

.nav-button i{

    transition:
        transform .25s ease;
}

.nav-button:hover i{

    transform:translateX(4px);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle{

    display:none;

    border:0;

    background:transparent !important;

    color:#18382c !important;

    font-size:1.35rem;
}


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

@media(max-width:1100px){

    .nav-menu{
        gap:18px;
    }

    .nav-menu > a:not(.nav-button),
    .nav-dropdown > a{
        font-size:.69rem;
    }
}


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

@media(max-width:900px){

    body{
        padding-top:82px;
    }

    .utility-bar{
        display:none;
    }

    .site-header{
        background:#f7f1e5 !important;
    }

    .navbar{
        min-height:82px;

        background:#f7f1e5 !important;
    }

    .logo img{

        width:110px !important;

        max-height:82px !important;
    }

    .menu-toggle{
        display:block;
    }

    .nav-menu{

        position:absolute;

        top:100%;

        left:0;

        right:0;

        display:none;

        flex-direction:column;

        align-items:stretch;

        gap:0;

        padding:12px 24px 25px;

        background:#f7f1e5 !important;

        box-shadow:
            0 15px 30px rgba(16,37,29,.12);
    }

    .nav-menu.open{
        display:flex;
    }

    .nav-menu > a:not(.nav-button),
    .nav-dropdown > a{

        padding:13px 0;
    }

    .nav-menu > a:not(.nav-button)::after,
    .nav-dropdown > a::after{

        display:none;
    }


    /* MOBILE DROPDOWN */

    .nav-dropdown{
        display:block;
    }

    .nav-dropdown > a{

        display:flex;

        justify-content:space-between;

        width:100%;
    }

    .dropdown-menu{

        position:static;

        transform:none !important;

        min-width:0;

        padding:0 0 5px;

        background:transparent !important;

        border-top:0;

        box-shadow:none;

        opacity:1;

        visibility:visible;
    }

    .dropdown-menu a{

        padding:10px 15px;

        font-size:.68rem;
    }

    .nav-button{

        justify-content:center;

        margin-top:8px;
    }
}


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

@media(max-width:640px){

    .container{

        width:min(
            calc(100% - 30px),
            1240px
        );
    }
}

</style>