/* ==========================================
   1. MAANDALIZI NA RANGI (RESET & VARIABLES)
   ========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

:root {
    --primary-color: #2c3e50;    /* Rangi kuu ya giza */
    --accent-color: #ff9f43;     /* Rangi ya machungwa kwa ajili ya vitufe/vielelezo */
    --text-color: #333333;       /* Rangi ya maandishi */
    --light-bg: #f9f9f9;         /* Rangi ya nyuma ya kurasa */
    --white: #ffffff;
    --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body {
    background-color: var(--light-bg);
    color: var(--text-color);
    line-height: 1.6;
}

.container {
    width: 85%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ==========================================================================
   COLOR ARCHITECTURE: RED & DARK PREMIUM NAVBAR STYLING (PC BASE)
   ========================================================================== */
.main-header-wrapper {
    position: relative;
    width: 100%;
    z-index: 2500;
}

/* 1. BAR YA JUU KABISA: NYEKUNDU (RED BAR) */
.upper-head {
    background-color: #b33939 !important; /* Rangi Nyekundu ya Kishua (Crimson Red) */
    padding: 0 8%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 2. BAR KUU YA NAVBAR: BACKGROUND NYEUPE KWA AJILI YA LOGO KUSHOTO */
.navbar-main-row-fixed {
    background-color: #ffffff !important; /* Kwenye PC inabaki nyeupe ili logo ionekane safi */
    padding: 15px 8%;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.site-logo {
    height: 50px;
    width: auto;
    display: block;
}

/* Kitufe cha simu kinajificha kwanza kikiwa kwenye PC */
.menu-toggle-btn {
    display: none;
}

/* Mpangilio wa Herufi za Menu Kuu ya PC */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 25px;
    margin: 0;
    padding: 0;
}

.nav-links li a {
    color: #141d26 !important; /* Maandishi ya PC yawe ya giza thabiti juu ya nyeupe */
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: color 0.3s ease;
}

.nav-links li a:hover,
.nav-links li a.active {
    color: var(--accent-color) !important; /* Inageuka rangi ya machungwa ikiguswa */
}

/* 3. PREMIUM CONTACT US BUTTON (PC) */
.btn-nav-premium {
    background-color: var(--accent-color) !important; /* Rangi ya machungwa ya Travel Nest */
    color: #ffffff !important;
    padding: 10px 22px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    transition: transform 0.3s ease, background-color 0.3s ease !important;
    display: inline-block;
    white-space: nowrap !important; /* Zuia neno lisivunjike */
    text-decoration: none;
}

.btn-nav-premium:hover {
    transform: translateY(-2px);
    background-color: #e67e22 !important;
}

/* 4. DROPDOWN SUB-MENU (PC SYSTEM) */
.has-mega-menu {
    position: relative;
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 10px 0;
    border-radius: 0 0 8px 8px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    min-width: 220px;
    z-index: 1500;
}

.has-mega-menu:hover .mega-menu {
    opacity: 1;
    visibility: visible;
}

.mega-col {
    display: flex;
    flex-direction: column;
}

.mega-col a {
    display: block !important;
    padding: 10px 20px !important;
    color: #334155 !important;
    font-size: 13.5px !important;
    border-bottom: 1px solid #f1f5f9;
    text-align: left;
    text-decoration: none;
}

.mega-col a:hover {
    color: var(--accent-color) !important;
    background-color: #f8fafc;
}


/* ==========================================================================
   TRAVELNEST AFRICA PREMIUM MOBILE MENU
   NORMAL DROPDOWN + TOP RIBBON VISIBLE
========================================================================== */


@media (max-width:768px){


/* ===============================
   TOP RIBBON (ISIBAKI HIDDEN)
================================ */

.upper-head{

    display:block !important;

    padding:8px 15px !important;

}



.upper-head-flex{

    flex-direction:column !important;

    gap:8px !important;

    text-align:center;

}



.contact-info{

    flex-direction:column !important;

    gap:5px !important;

}



.social-links-top{

    justify-content:center !important;

}





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


.navbar-main-row-fixed{

    background:#ffffff !important;

    padding:12px 5% !important;

    position:relative !important;

}



.site-logo{

    width:130px !important;

}





/* ===============================
   HAMBURGER BUTTON
================================ */


.menu-toggle-btn{

    display:block !important;

    background:#002855 !important;

    color:white !important;

    border:none !important;

    width:42px;

    height:38px;

    border-radius:6px;

    font-size:24px;

    cursor:pointer;

    position:absolute;

    right:5%;

    top:50%;

    transform:translateY(-50%);

    z-index:3000;

}





/* ===============================
   MOBILE MENU BOX
================================ */


.navbar{

    display:block !important;

    position:absolute !important;

    top:100% !important;

    left:0 !important;

    width:100% !important;

    background:#002855 !important;

    max-height:0;

    overflow:hidden;

    visibility:hidden;

    opacity:0;

    transition:
    max-height .4s ease,
    opacity .3s ease;

    z-index:2800;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

}





.navbar.open-nav-slide{

    max-height:85vh;

    overflow-y:auto;

    visibility:visible;

    opacity:1;

}





/* ===============================
   MAIN MENU LIST
================================ */


.nav-links{

    display:flex !important;

    flex-direction:column !important;

    width:100% !important;

    gap:0 !important;

    padding:10px 0 !important;

    margin:0 !important;

}



.nav-links > li{

    width:100% !important;

    border-bottom:1px solid rgba(255,255,255,.15);

}



.nav-links > li > a{

    display:flex !important;

    justify-content:space-between !important;

    align-items:center !important;

    color:#ffffff !important;

    padding:16px 22px !important;

    font-size:14px !important;

    font-weight:600 !important;

    text-transform:uppercase;

}





.nav-links > li > a:hover{

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

}





/* ===============================
   DROPDOWN MENU
================================ */


.nav-links li ul{

    display:none;

    position:static !important;

    width:100% !important;

    background:#001f3f !important;

    padding:0 !important;

    margin:0 !important;

    box-shadow:none !important;

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;

}




/* OPEN DROPDOWN */

.nav-links li.sub-open > ul{

    display:block !important;

}





/* DROPDOWN LINKS */

.nav-links li ul li{

    width:100%;

}



.nav-links li ul li a{

    display:block !important;

    padding:13px 40px !important;

    color:#dddddd !important;

    font-size:13px !important;

    text-transform:none !important;

    border-bottom:
    1px solid rgba(255,255,255,.08);

}





.nav-links li ul li a:hover{

    background:#ff9f43 !important;

    color:white !important;

}





/* ===============================
   ARROW ROTATION
================================ */


.nav-links li > a i{

    transition:.3s ease;

}



.nav-links li.sub-open > a i{

    transform:rotate(180deg);

}





/* ===============================
   CONTACT BUTTON
================================ */


.btn-nav-premium{

    margin:15px 22px !important;

    display:block !important;

    text-align:center !important;

    background:#ff9f43 !important;

    color:white !important;

    border-radius:30px;

}





}



/* SMALL PHONES */

@media(max-width:480px){


.site-logo{

    width:120px !important;

}



.contact-info p{

    font-size:12px !important;

}



.nav-links > li > a{

    font-size:13px !important;

}



}

/* ==========================================
   3. HERO SECTION
   ========================================== */
/* ==========================================
   3. HERO SECTION WITH SLIDE VIEW
   ========================================== */
.hero-section {
    height: 70vh; /* Tumeiongezea urefu kidogo ili slider ionekane vizuri zaidi */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
    padding-top: 110px;
    overflow: hidden;
}

.hero-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Muundo wa kila Slide peke yake */
.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* Picha zote zinaanza zikiwa zimefichwa */
    transition: opacity 1.5s ease-in-out; /* Madoido ya laini ya kubadilika picha (1.5 seconds) */
}

/* Slide inayotakiwa kuonekana sasa hivi */
.slide.active {
    opacity: 1;
}

.hero-content {
    position: relative;
    z-index: 5; /* Inalazimisha maandishi yawe juu ya picha wakati wote */
}

.hero-content h1 {
    font-size: 3rem;
    margin-bottom: 15px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    font-weight: 800;
}

.hero-content p {
    font-size: 1.3rem;
    max-width: 650px;
    margin: 0 auto;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}

/* VIFUNGO VYA SLIDER (ARROWS) */
.slider-btn {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.3);
    color: var(--white);
    border: none;
    font-size: 24px;
    padding: 12px 18px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: var(--transition);
}

.slider-btn:hover {
    background-color: var(--accent-color);
}

.prev-btn { left: 30px; }
.next-btn { right: 30px; }

/* Kuficha mishale kwenye simu ili muonekano ubaki msafi */
@media (max-width: 768px) {
    .slider-btn { display: none; }
    .hero-content h1 { font-size: 2rem; }
}


/* ==========================================
   4. FILTERS SECTION (FLEXBOX)
   ========================================== */
.filter-section {
    padding: 40px 0;
    background-color: var(--white);
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.filter-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.filter-wrapper h3 {
    font-size: 18px;
    color: var(--primary-color);
}

.filter-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 20px;
    border: 2px solid #e0e0e0;
    background-color: var(--white);
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.filter-btn:hover, .filter-btn.active {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* ==========================================
   5. PACKAGES SECTION (MATUMIZI YA CSS GRID)
   ========================================== */
.packages-section {
    padding: 80px 0;
}

.section-title {
    text-align: center;
    margin-bottom: 50px;
}

.section-title h2 {
    font-size: 2.2rem;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.section-title p {
    color: #666;
}

/* Hapa tunapanga kadi 3 kwa mstari kwa kutumia Grid */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

/* MUUNDO WA KADI (CARD STYLING & ANIMATION) */
.package-card {
    background-color: var(--white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: var(--transition);
}

/* Kadi inanyanyuka panya ikipita juu yake */
.package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.card-img-holder {
    position: relative;
    height: 220px;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #555;
}

/* Placeholder ya picha mpaka uweke picha zako halisi */
.img-placeholder {
    font-weight: bold;
}

.card-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    color: var(--white);
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
}

.bg-orange { background-color: var(--accent-color); }
.bg-green { background-color: #2ecc71; }
.bg-purple { background-color: #9b59b6; }

.card-body {
    padding: 25px;
}

.card-meta {
    display: flex;
    justify-content: space-between;
    color: #888;
    font-size: 13px;
    margin-bottom: 10px;
}

.card-body h3 {
    font-size: 19px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.card-body p {
    color: #666;
    font-size: 14px;
    margin-bottom: 20px;
    height: 44px; /* Inazuia kadi kuvurugana urefu */
    overflow: hidden;
}

.card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
}

.card-bottom .price {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
}

.btn-view-itinerary {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    transition: var(--transition);
}

.btn-view-itinerary:hover {
    background-color: var(--accent-color);
}

/* ==========================================
   6. INTERACTIVE ITINERARY MODAL (POP-UP)
   ========================================== */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Hii itatumiwa na JS kuonyesha modal */
.modal.show {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background-color: var(--white);
    width: 90%;
    max-width: 650px;
    max-height: 85vh;
    border-radius: 12px;
    padding: 30px;
    position: relative;
    overflow-y: auto; /* Inaruhusu kuscroll kama ratiba ni ndefu */
    transform: scale(0.8);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal.show .modal-content {
    transform: scale(1);
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 25px;
    font-size: 30px;
    cursor: pointer;
    color: #aaa;
}

.close-modal:hover {
    color: #333;
}

#modalTitle {
    color: var(--primary-color);
    font-size: 24px;
}

.modal-subtitle {
    color: #888;
    font-size: 14px;
    margin-bottom: 25px;
}

/* MUUNDO WA TIMELINE YA RATIBA (ITINERARY) */
.itinerary-timeline {
    position: relative;
    padding-left: 30px;
    margin-bottom: 30px;
}

/* Mstari wa kushuka chini unaounganisha siku */
.itinerary-timeline::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 7px;
    width: 2px;
    height: 95%;
    background-color: #ddd;
}

.timeline-item {
    position: relative;
    margin-bottom: 20px;
}

/* Duara la kila Siku */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 5px;
    left: -29px;
    width: 14px;
    height: 14px;
    background-color: var(--accent-color);
    border-radius: 50%;
    border: 3px solid var(--white);
    box-shadow: 0 0 0 2px var(--accent-color);
}

.timeline-item h4 {
    font-size: 16px;
    color: var(--primary-color);
    margin-bottom: 5px;
}

.timeline-item p {
    font-size: 14px;
    color: #555;
}

.modal-footer {
    border-top: 1px solid #eee;
    padding-top: 20px;
    text-align: right;
}

.btn-modal-book {
    background-color: var(--accent-color);
    color: var(--white);
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}

.btn-modal-book:hover {
    background-color: #e08528;
}
/* ==========================================
   9. NEW CONTACT PAGE LAYOUT (FLEXBOX - FIXED)
   ========================================== */
.contact-hero {
    height: 40vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4)), url('../IMAGES/watch_dogs_2_no_compromise_dlc_4k.jpg') no-repeat center center/cover;
    background-color: #34495e;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
    padding-top: 80px;
}

.contact-page-section {
    padding: 60px 0;
    position: relative;
    z-index: 10;
}

/* KODI MUHIMU: Inalazimisha kadi ya kushoto na kulia zijipange sambamba na kuacha nafasi */
.contact-page-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: wrap; /* Inafanya ikifunguliwa kwenye simu, fomu ishuke chini */
    width: 100%;
}

/* UPANDE WA KUSHOTO: Sanduku la Giza la Ofisi */
.contact-info-panel {
    flex: 1;
    min-width: 300px;
    background-color: #2c3e50 !important; /* Rangi ya giza ya kitaalamu */
    color: #ffffff !important;
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.contact-info-panel h3 {
    font-size: 26px;
    color: var(--accent-color) !important; /* Rangi ya machungwa */
    margin-bottom: 15px;
    font-weight: 700;
}

/* Maandishi ya chini ya Our Office Details yaliyorudi */
.contact-info-panel p {
    color: #e2e8f0 !important;
    font-size: 15px;
}

.info-items-list {
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-item-box {
    display: flex;
    align-items: center;
    gap: 15px;
}

.info-icon {
    font-size: 20px;
    background: rgba(255,255,255,0.1) !important;
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.info-item-box h4 {
    font-size: 16px;
    color: var(--accent-color) !important;
    margin-bottom: 2px;
    font-weight: 600;
}

/* Namba ya simu na email ziwe nyeupe safi zisionekane za kijivu */
.info-item-box p {
    color: #ffffff !important;
    font-size: 14.5px;
    margin: 0;
}

/* UPANDE WA KULIA: Fomu ya Booking */
.contact-form-panel {
    flex: 1.5;
    min-width: 320px;
    background-color: var(--white);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.04);
    border: 1px solid #eef2f5;
}

.contact-form-panel h3 {
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 700;
}

/* RESPONSIVE LAYOUT KWA AJILI YA SIMU */
@media (max-width: 768px) {
    .contact-info-panel, .contact-form-panel {
        width: 100% !important;
    }
}

/* ==========================================
   FIX FOR CONTACT PAGE UNCLICKABLE ELEMENTS
   ========================================== */

/* Hii inazuia Mega Menu isifunike screen isivyo lazima wakati haijafunguka */
.mega-menu {
    pointer-events: none; /* Inazuia isizuie kubonyeza fomu */
}

/* Inaruhusu kubonyeza vitu vya ndani pale tu panya inapopita juu ya menu */
.has-mega-menu:hover .mega-menu {
    pointer-events: auto;
}

/* Inajenga nafasi ya kutosha juu ya ukurasa ili kuzuia Navbar isifunike herufi za mwanzo */
.contact-hero {
    margin-top: 0;
    padding-top: 120px; /* Alama ya kuongeza nafasi juu */
}

/* Ulinzi wa mwisho wa fomu ili iweze kubonyezeka kwa nguvu zote */
.contact-page-section {
    position: relative;
    z-index: 10; /* Inaiweka fomu tabaka la juu zaidi ya kitu chochote */
}

.contact-form-panel input, 
.contact-form-panel select, 
.contact-form-panel textarea, 
.contact-form-panel button {
    position: relative;
    z-index: 20; /* Inahakikisha sehemu za kujaza kodi zipo juu */
    pointer-events: auto !important; /* Inalazimisha fomu ikubali kubonyezwa */
}
/* ==========================================
   CLASSIC & PROFESSIONAL FORM STYLING
   ========================================== */
/* ==========================================
   CLASSIC & PROFESSIONAL FORM STYLING (FIXED)
   ========================================== */
.contact-form-panel {
    background-color: var(--white);
    padding: 40px;
    border-radius: 16px;
    border: 1px solid #eef2f5;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05) !important;
    width: 100%;
}

.form-header {
    margin-bottom: 35px;
    border-bottom: 2px solid #f4f6f8;
    padding-bottom: 15px;
}

.form-header h3 {
    font-size: 26px;
    color: var(--primary-color);
    font-weight: 700;
    margin-bottom: 5px;
}

.form-header p {
    color: #7f8c8d;
    font-size: 14px;
}

/* Flexbox kwa ajili ya kupanga visanduku viwili kwa kila mstari */
.form-row {
    display: flex;
    gap: 25px;
    margin-bottom: 25px;
    width: 100%;
}

.form-group {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Sehemu ya Ujumbe inachukua upana wote chini yenyewe */
.form-group-full {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    width: 100%;
}

.form-group label, 
.form-group-full label {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
    text-align: left;
}

.input-with-icon {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.field-icon {
    position: absolute;
    left: 15px;
    font-size: 16px;
    color: #95a5a6;
    z-index: 5;
}

.form-group input, 
.form-group select {
    width: 100%;
    padding: 14px 15px 14px 45px !important; /* Nafasi ya kutosha kwa ajili ya Icon */
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    outline: none;
    transition: var(--transition);
}

.form-group-full textarea {
    width: 100%;
    padding: 15px !important;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    outline: none;
    resize: vertical; /* Inaruhusu kurefusha kwenda chini tu si pembeni */
    transition: var(--transition);
}

.form-group input:focus, 
.form-group select:focus, 
.form-group-full textarea:focus {
    background-color: var(--white);
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px rgba(255, 159, 67, 0.15) !important;
}

/* Kitufe cha Classic */
.btn-submit {
    background-color: var(--accent-color);
    color: var(--white);
    border: none;
    padding: 16px 35px;
    font-size: 15px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: var(--transition);
}

.btn-submit:hover {
    background-color: #e08528;
    transform: translateY(-2px);
}

.btn-arrow {
    transition: transform 0.3s ease;
}

.btn-submit:hover .btn-arrow {
    transform: translateX(5px);
}

/* SUCCESS POPUP (Blurs background) */
.success-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 62, 80, 0.5);
    backdrop-filter: blur(5px);
    z-index: 3000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.success-overlay.show-popup {
    opacity: 1;
    pointer-events: auto;
}

.success-card {
    background-color: var(--white);
    padding: 40px;
    border-radius: 16px;
    width: 90%;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.15);
    transform: scale(0.7);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.success-overlay.show-popup .success-card {
    transform: scale(1);
}

.success-icon-circle {
    width: 65px;
    height: 65px;
    background-color: #2ecc71;
    color: var(--white);
    font-size: 32px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin: 0 auto 20px auto;
    box-shadow: 0 10px 20px rgba(46, 204, 113, 0.2);
}

.success-card h2 {
    color: var(--primary-color);
    font-size: 22px;
    margin-bottom: 10px;
}

.success-card p {
    color: #555;
    font-size: 14.5px;
}

.success-details {
    background-color: #f8fafc;
    padding: 15px;
    border-radius: 8px;
    text-align: left;
    margin: 20px 0;
    border-left: 4px solid #2ecc71;
}

.success-details p {
    font-size: 13px;
    color: #666;
    margin-bottom: 6px;
}

.btn-success-close {
    background-color: var(--primary-color);
    color: var(--white);
    border: none;
    padding: 14px 30px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    width: 100%;
    transition: var(--transition);
}

.btn-success-close:hover {
    background-color: var(--accent-color);
}

/* RESPONSIVE: Inafanya fomu ijiadjust vizuri kwenye Simu */
@media (max-width: 680px) {
    .form-row {
        flex-direction: column;
        gap: 20px;
        margin-bottom: 20px;
    }
}
.card-img-holder {
    position: relative;
    height: 220px;
    width: 100%;
    overflow: hidden; /* Inazuia picha isitoke nje ya kadi wakati wa kuji-zoom */
    background-color: #eee;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Inafanya picha iji-fit yenyewe bila kukunjamana */
    transition: transform 0.5s ease; /* Madoido ya taratibu panya ikipita */
}

/* Picha inajikuza kidogo kwa ndani panya ikigusa kadi (Premium Feature) */
.package-card:hover .card-img {
    transform: scale(1.1);
}
/* ==========================================
   IMAGE LOGO STYLING
   ========================================== */
.logo-container {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 100px; /* Inazuia logo kuwa kubwa sana ikavuruga menu */
}

.site-logo {
    height: 100%;
    width: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

/* Madoido panya ikipita juu ya logo */
.logo-container:hover .site-logo {
    transform: scale(1.05);
}
/* ==========================================
   10. CLASSIC & PROFESSIONAL FOOTER
   ========================================== */
.main-footer {
    background-color: #1a252f; /* Rangi ya giza zaidi kuliko navbar kwa ajili ya uwiano */
    color: #e0e0e0;
    padding: 70px 0 0 0;
    margin-top: 50px;
}

/* Matumizi ya CSS Grid kwa safu 3 za Footer */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 50px;
    padding-bottom: 50px;
}

.footer-col-about .logo {
    margin-bottom: 15px;
}

.footer-desc {
    font-size: 14px;
    line-height: 1.7;
    color: #a0aab2;
    margin-bottom: 20px;
}

/* Flexbox kwa Social Media Icons */
.social-icons {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.social-link {
    background-color: rgba(255,255,255,0.05);
    color: #fff;
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    transition: var(--transition);
}

.social-link:hover {
    background-color: var(--accent-color);
    transform: translateY(-3px);
}

.footer-grid h3 {
    color: var(--white);
    font-size: 18px;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 8px;
}

/* Mstari mdogo wa mapambo chini ya vichwa vya habari vya footer */
.footer-grid h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 2026; /* reference to current year context structure placeholder width logic */
    height: 2px;
    background-color: var(--accent-color);
}

.footer-links-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links-list a {
    color: #a0aab2;
    text-decoration: none;
    font-size: 14.5px;
    transition: var(--transition);
}

.footer-links-list a:hover {
    color: var(--accent-color);
    padding-left: 5px;
}

.footer-col-contact p {
    font-size: 14px;
    margin-bottom: 12px;
    color: #a0aab2;
}

/* COPYRIGHT STRIP CHINI KABISA */
.footer-bottom {
    background-color: #111a22;
    padding: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    color: #7f8c8d;
}

/* RESPONSIVE FOOTER: Inajipanga mstari mmoja kwenye simu */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 35px;
    }
    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }
}
/* ==========================================
   12. NEW BLOG PAGE BANNER & LAYOUT
   ========================================== */
/* ==========================================
   13. PREMIUM BLOG GRID & ROUNDED IMAGE STYLING
   ========================================== */
.blog-page-content {
    padding: 80px 0;
    background-color: var(--light-bg);
}

/* Inalazimisha kadi zijipange 3 kwa mstari badala ya kushuka chini chini */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    width: 100%;
}

.blog-card {
    background-color: var(--white);
    border-radius: 16px; /* ← MDUARA KWENYE KONA ZA KADI */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.blog-img-box {
    position: relative;
    height: 220px;
    width: 100%;
    overflow: hidden;
    border-top-left-radius: 16px;  /* ← INALAZIMISHA PICHA IFUATE MDUARA WA KADI */
    border-top-right-radius: 16px; /* ← INALAZIMISHA PICHA IFUATE MDUARA WA KADI */
}

.blog-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Inazuia picha isibonyezeke au kukunjamana */
    display: block;
}

.blog-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-body h3 {
    font-size: 19px;
    color: var(--primary-color);
    margin-bottom: 12px;
    line-height: 1.4;
    text-align: left;
}

.blog-body p {
    color: #666;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: left;
}

/* Mpangilio wa vifungo vya chini kwa Flexbox */
.blog-footer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto; /* Inalazimisha viwe chini kabisa ya kadi wakati wote */
    border-top: 1px solid #f0f0f0;
    padding-top: 15px;
}

.blog-readmore {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
}

/* CLASSIC WHATSAPP DIRECT BUTTON */
.btn-whatsapp-chat {
    background-color: #25D366; /* Rangi rasmi ya WhatsApp */
    color: var(--white);
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 30px; /* Mduara kamili wa kitufe */
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    transition: background 0.3s ease, transform 0.2s ease;
    box-shadow: 0 4px 10px rgba(37, 211, 102, 0.2);
}

.btn-whatsapp-chat:hover {
    background-color: #128C7E; /* Rangi ya kijani kibichi mteja akigusa */
    transform: scale(1.05);
    color: var(--white);
}
/* ==========================================
   FIX FOR BLURRED / COVERED HERO ON BLOG PAGE
   ========================================== */

/* 1. Inasukuma sehemu yote ya juu ya Blog chini ili isifunikwe na Navbar */
.blog-hero {
    height: 40vh;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4)), url('../IMAGES/watch_dogs_2_no_compromise_dlc_4k.jpg') no-repeat center center/cover;
    background-color: #34495e;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
    padding-top: 80px;
}

/* 2. Inahakikisha ile overlay ya giza haivuki mipaka ya picha */
.blog-hero .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.4));
    z-index: -1;
}

/* 3. Inahakikisha maandishi yote ya ndani ya Banner yanaonekana vizuri */
.blog-hero .hero-content {
    position: relative;
    z-index: 2;
    color: var(--white) !important;
}

/* 4. Inasafisha nafasi ya kuanzia makala za blog chini ya Banner */
.blog-page-content {
    position: relative;
    z-index: 10;
    padding: 60px 0;
    background-color: var(--light-bg);
}
/* ==========================================================================
   PROFESSIONAL ADMISSIONS CHAT BOX (NEW ADDITION)
   ========================================================================== */
.admission-chat-card {
  background: var(--white);
  padding: 30px 25px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid rgba(13, 35, 58, 0.06);
  position: relative;
  text-align: left;
  margin-top: 25px; /* Inatenganisha sanduku la chat na kadi ya download ya juu yake */
}

.chat-status-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 18px;
}

.chat-avatar {
  position: relative;
  width: 48px;
  height: 48px;
  background: var(--light-bg);
  border: 2px solid rgba(13, 35, 58, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.status-dot.online {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background-color: #22c55e;
  border: 2px solid var(--white);
  border-radius: 50%;
  animation: pulse-online 2s infinite;
}

@keyframes pulse-online {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.chat-meta h4 {
  color: var(--primary);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 2px;
}

.status-text {
  font-size: 12px;
  color: #22c55e;
  font-weight: 600;
}

.chat-description {
  color: var(--muted-text);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 22px;
}

.btn-chat-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px;
  background-color: #25d366;
  color: var(--white);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2);
  transition: all 0.3s ease;
}

.btn-chat-whatsapp:hover {
  background-color: #1ebd58;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.3);
}

.whatsapp-icon {
  flex-shrink: 0;
}
/* ==========================================
   14. GOOGLE REVIEWS SECTION (PREMIUM GRID)
   ========================================== */
.reviews-section {
    padding: 80px 0;
    background-color: #f8fafc; /* Rangi laini sana ya background */
    border-top: 1px solid #e2e8f0;
}

/* Mpangilio wa Header kwa Flexbox */
.reviews-header {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

/* Beji Kubwa ya Google Rating */
.google-brand-badge {
    background-color: var(--white);
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 20px;
    border: 1px solid #e2e8f0;
}

.g-logo {
    font-size: 36px;
    font-weight: 900;
    color: #4285F4; /* Rangi rasmi ya bluu ya Google */
    font-family: 'Product Sans', Arial, sans-serif;
}

.g-brand-text h4 {
    font-size: 16px;
    color: var(--primary-color);
    margin-bottom: 2px;
}

.g-stars-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.g-score {
    font-weight: 700;
    color: #333;
}

.g-count {
    color: #7f8c8d;
}

.reviews-title-text {
    flex: 1;
    text-align: left;
}

.reviews-title-text h2 {
    font-size: 2.3rem;
    color: var(--primary-color);
    margin-bottom: 8px;
}

.reviews-title-text p {
    color: #64748b;
    font-size: 15px;
}

/* Grid ya Kadi za Reviews */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    width: 100%;
}

.review-card {
    background-color: var(--white);
    padding: 30px;
    border-radius: 16px; /* Muundo wa mduara laini kwa kadi */
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    border: 1px solid #eef2f6;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.review-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.rev-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 15px;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Avatar ya maandishi (Duara la herufi za jina) */
.user-avatar-txt {
    width: 45px;
    height: 45px;
    background-color: #34495e;
    color: var(--white);
    font-weight: 700;
    font-size: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.user-info h4 {
    font-size: 15px;
    color: var(--primary-color);
    font-weight: 700;
    text-align: left;
}

.rev-date {
    font-size: 12px;
    color: #2ecc71; /* Rangi ya kijani kuonyesha imethibitishwa */
    font-weight: 600;
    display: block;
}

.google-icon-small {
    color: #4285F4;
    font-weight: 900;
    font-size: 18px;
    background-color: #f0f4f9;
    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
}

.rev-stars {
    font-size: 14px;
    margin-bottom: 12px;
    text-align: left;
}

.rev-text {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    text-align: left;
    font-style: italic; /* Mtindo wa kishua wa nukuu */
}

/* RESPONSIVE FILTER */
@media (max-width: 768px) {
    .reviews-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

/* ==========================================
   17. SAFARI FLEET SECTION STYLING (FLEXBOX)
   ========================================== */
.fleet-section {
    padding: 80px 0;
    background-color: var(--primary-color);
    color: var(--white);
}
.fleet-wrapper {
    display: flex;
    align-items: center;
    gap: 50px;
    flex-wrap: wrap;
}
.fleet-text {
    flex: 1;
    min-width: 320px;
    text-align: left;
}
.fleet-tag {
    color: var(--accent-color);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
}
.fleet-text h2 {
    font-size: 2.3rem;
    margin: 10px 0 20px 0;
}
.fleet-text p {
    color: #e2e8f0;
    margin-bottom: 30px;
}
.fleet-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.fleet-feat {
    font-weight: 600;
    font-size: 14.5px;
}
.fleet-image-box {
    flex: 1;
    min-width: 320px;
    height: 350px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
}
.fleet-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 768px) {
    .fleet-features-grid { grid-template-columns: 1fr; }
}

/* ==========================================
   18. FAQ ACCORDION STYLING
   ========================================== */
.faq-section { padding: 80px 0; background-color: var(--light-bg); }
.faq-accordion { max-width: 750px; margin: 0 auto; }
.faq-item {
    background-color: var(--white);
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    overflow: hidden;
    border: 1px solid #e2e8f0;
}
.faq-item h4 {
    padding: 20px;
    margin: 0;
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
}
.faq-item p {
    padding: 0 20px 20px 20px;
    margin: 0;
    color: #555;
    font-size: 14.5px;
    display: none; /* Inajificha mpaka ibofywe */
    text-align: left;
}
/* ==========================================
   19. SAFARI ROUTES & INTERACTIVE MAPS
   ========================================== */
.safari-maps-section {
    padding: 80px 0;
    background-color: var(--white);
    border-top: 1px solid #e2e8f0;
}

.map-layout-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.map-selection-panel {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.map-select-btn {
    background-color: var(--light-bg);
    border: 1px solid #e2e8f0;
    padding: 18px 25px;
    border-radius: 10px;
    text-align: left;
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    cursor: pointer;
    transition: var(--transition);
}

.map-select-btn:hover, 
.map-select-btn.active {
    background-color: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
    transform: translateX(5px);
}

.map-display-panel {
    flex: 2;
    min-width: 320px;
    background-color: #eee;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
}

@media (max-width: 768px) {
    .map-layout-wrapper { flex-direction: column; }
    .map-selection-panel { width: 100%; }
}
 

/* ==========================================
   20. DETAILED ITINERARIES (PREMIUM SIDE-BY-SIDE GRID)
   ========================================== */
.detailed-itineraries {
    padding: 80px 0;
    background-color: var(--light-bg);
    border-top: 1px solid #e2e8f0;
}

/* CSS Grid ya kugawanya ukurasa pande mbili (Kushoto na Kulia) */
.itinerary-two-columns-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Safu mbili zenye upana sawa sambamba kwenye PC */
    gap: 30px; /* Nafasi kati ya safu ya kushoto na kulia */
    align-items: start;
    width: 100%;
}

.itinerary-column-side {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Nafasi kati ya kadi ya kwanza na ya pili zilizopo wima */
}

.itinerary-program-box {
    background-color: var(--white);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    border: 1px solid #eef2f6;
    width: 100%;
}

.program-header-title {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 10px;
    text-align: left;
}

.program-header-title h3 {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 700;
}

.accordion-itinerary-item {
    background-color: #f8fafc;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.accordion-day-header {
    padding: 15px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8fafc;
    transition: var(--transition);
}

.accordion-day-header:hover {
    background-color: #edf2f7;
}

.accordion-day-header h4 {
    margin: 0;
    font-size: 15px;
    color: var(--primary-color);
    font-weight: 600;
    text-align: left;
}

.accordion-icon {
    font-size: 16px;
    font-weight: bold;
    color: var(--accent-color);
    transition: transform 0.3s ease;
}

.accordion-day-content {
    padding: 0 20px;
    max-height: 0; 
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    background-color: var(--white);
}

.accordion-day-content p {
    font-size: 14px;
    color: #4a5568;
    line-height: 1.6;
    margin: 15px 0;
    text-align: left;
}

/* RESPONSIVE: Kwenye simu, grid inajivunja kiotomatiki na kuwa kadi moja chini ya nyingine */
@media (max-width: 992px) {
    .itinerary-two-columns-grid {
        grid-template-columns: 1fr; 
        gap: 30px;
    }
}
/* ==========================================
   11. UPDATED FOOTER & TRUST BADGES STYLING
   ========================================== */
.main-footer {
    background-color: #1a252f;
    color: #e0e0e0;
    padding: 70px 0 0 0;
    margin-top: 50px;
}

/* Badilisha grid iwe ya safu 3 badala ya 4 */
.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

/* BAR YA WASHIRIKA NA MALIPO (KUTOKA KWENYE PICHA) */
.footer-partners-strip {
    background-color: #151e26;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 25px 0;
}

.partners-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}

.partner-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.partner-box span {
    font-size: 12px;
    text-transform: uppercase;
    color: #7f8c8d;
    letter-spacing: 1px;
    font-weight: 700;
}

.partner-logos, .payment-logos {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.trust-badge, .pay-card {
    background-color: rgba(255, 255, 255, 0.05);
    padding: 6px 15px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.05);
}

/* COPYRIGHT SECTION CHINI KABISA */
.footer-bottom {
    background-color: #111a22;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.02);
}

.footer-bottom-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    font-size: 13px;
    color: #7f8c8d;
}

.dev-link {
    color: var(--accent-color);
    text-decoration: underline;
    font-weight: 600;
}

/* RESPONSIVE LAYOUT KWA AJILI YA SIMU */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 30px;
    }
    .partners-flex {
        flex-direction: column;
        align-items: flex-start;
    }
    .footer-bottom-content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }
}
/* ==========================================
   21. PREMIUM WILDLIFE CATEGORIZED GALLERY
   ========================================== */
.wildlife-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    width: 100%;
}

.gallery-item-card {
    position: relative;
    height: 250px;
    border-radius: 16px; /* ← MDUARA KWENYE KONA */
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0,0,0,0.03);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.gallery-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.gallery-item-card:hover .gallery-img {
    transform: scale(1.08);
}

.gallery-img-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0));
    display: flex;
    align-items: flex-end;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-item-card:hover .gallery-img-overlay {
    opacity: 1;
}

.gallery-img-overlay span {
    color: var(--white);
    font-weight: 700;
    font-size: 15px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    text-align: left;
}

@media (max-width: 567px) {
    .wildlife-gallery-grid {
        grid-template-columns: 1fr !important;
    }
}
/* ==========================================
   23. PREMIUM INDEPENDENT ABOUT US PAGE STYLING
   ========================================== */
.about-story-section {
    padding: 100px 0;
    background-color: #ffffff;
}

.welcome-about-wrapper {
    display: flex;
    align-items: center;
    gap: 70px; /* Nafasi kubwa zaidi kati ya maandishi na picha */
    flex-wrap: wrap;
}

.welcome-text-block {
    flex: 1.2;
    min-width: 320px;
    text-align: left;
}

.welcome-tag {
    color: var(--accent-color);
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 2px;
    display: inline-block;
    margin-bottom: 10px;
}

.welcome-text-block h2 {
    font-size: 2.8rem;
    color: var(--primary-color);
    margin-bottom: 22px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.5px;
}

.welcome-lead {
    font-size: 17px;
    color: #334155;
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: 18px;
}

.welcome-text-block p {
    color: #475569;
    font-size: 15px;
    line-height: 1.75;
    margin-bottom: 15px;
}

/* JOPO LA PICHA MPYA ZA HD (THE OVERLAPPING LUXURY STYLE) */
.welcome-images-block {
    flex: 1;
    min-width: 320px;
    position: relative;
    height: 460px; /* Tuliongeza urefu kidogo ili picha ziishe kwa unadhifu */
}

.w-img-box-large {
    width: 80%;
    height: 380px;
    border-radius: 20px; /* ← MDUARA LAINI WA KISHUA ZAIDI */
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    transition: transform 0.4s ease;
}

.w-img-box-small {
    width: 55%;
    height: 240px;
    border-radius: 20px; /* ← MDUARA LAINI WA KISHUA ZAIDI */
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    border: 8px solid #ffffff; /* Mstari mnene mweupe wa kishua unaozitenganisha */
    transition: transform 0.4s ease;
}

/* Madoido panya ikipita juu ya picha zivutane */
.welcome-images-block:hover .w-img-box-large {
    transform: scale(0.98) translateY(5px);
}
.welcome-images-block:hover .w-img-box-small {
    transform: scale(1.03) translateY(-5px);
}

.w-actual-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* 3. REKREBISHA KADI ZA WHY CHOOSE US ZIWE ZA KISHUA ZAIDI */
.why-choose-us-section {
    padding: 100px 0;
    background-color: #ffffff;
}

.why-card {
    background-color: #ffffff;
    padding: 40px 30px;
    border-radius: 16px;
    border: 1px solid #f1f5f9;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.01);
    transition: all 0.4s ease;
}

.why-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.06);
    border-color: #e2e8f0;
}

.why-icon-circle {
    font-size: 26px;
    background-color: #f8fafc;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 25px;
    color: var(--accent-color);
}

/* RESPONSIVE FILTER FOR MOBILE */
@media (max-width: 768px) {
    .about-story-section, .why-choose-us-section { padding: 60px 0; }
    .welcome-about-wrapper { gap: 45px; }
    .welcome-text-block h2 { font-size: 2.1rem; }
    .welcome-images-block { height: 340px; margin-top: 20px; }
    .w-img-box-large { height: 280px; width: 85%; }
    .w-img-box-small { height: 180px; width: 55%; border: 5px solid #ffffff; }
}

/* 2. MISSION & VISION CARD GRID */
.mission-vision-section {
    padding: 80px 0;
    background-color: var(--light-bg);
}
.mission-vision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 40px;
    width: 100%;
}
.m-v-box {
    background-color: var(--white);
    padding: 40px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    border: 1px solid #eef2f6;
    text-align: left;
}
.m-v-icon {
    font-size: 32px;
    margin-bottom: 15px;
}
.m-v-box h3 {
    font-size: 22px;
    color: var(--primary-color);
    margin-bottom: 12px;
    font-weight: 700;
}
.m-v-box p {
    color: #4a5568;
    font-size: 14.5px;
    line-height: 1.6;
}

/* 3. WHY CHOOSE US GRID */
.why-choose-us-section {
    padding: 80px 0;
    background-color: var(--white);
}
.why-choose-grid {
    display: grid;
    /* Inapanga kadi 4 sambamba kwenye PC kubwa na inajipunguza yenyewe kwenye skrini ndogo */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    width: 100%;
    margin-top: 50px;
}

.why-card {
    background-color: var(--white);
    padding: 35px 25px;
    border-radius: 12px;
    border: 1px solid #edf2f7;
    text-align: left;
    transition: var(--transition);
}
.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.05);
    border-color: var(--accent-color);
}
.why-icon-circle {
    font-size: 28px;
    background-color: var(--light-bg);
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    margin-bottom: 20px;
}
.why-card h4 {
    font-size: 18px;
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 700;
}
.why-card p {
    color: #64748b;
    font-size: 14px;
    line-height: 1.6;
}
/* ==========================================================================
   24. PREMIUM CULTURAL TOURS & WILDLIFE CARDS
   ========================================================================== */
.culture-wildlife-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 35px; /* Nafasi nzuri kati ya kadi na kadi */
    width: 100%;
    margin-top: 40px;
}

.premium-culture-card {
    background-color: #ffffff;
    border-radius: 16px; /* ← MDUARA KWENYE KONA ZA KADI ZOTE */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    border: 1px solid #f1f5f9;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

/* Madoido kadi ikiguswa (Hover Effect) */
.premium-culture-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    border-color: var(--accent-color);
}

.culture-img-holder {
    width: 100%;
    height: 240px; /* Urefu mzuri wa picha za vivutio */
    overflow: hidden;
    position: relative;
    background-color: #f8fafc;
}

.culture-img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: block;
}

.premium-culture-card:hover .culture-img-holder img {
    transform: scale(1.06); /* Zoom laini panya ikikaa juu ya kadi */
}

.culture-card-body {
    padding: 30px 25px;
    text-align: left; /* Maandishi yote yanaanza kushoto nadhifu */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.culture-card-body h4 {
    font-size: 19px;
    color: var(--primary-color);
    margin: 0 0 15px 0;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.3;
}

.culture-card-body p {
    color: #475569;
    font-size: 14.5px;
    line-height: 1.7; /* Nafasi nzuri kati ya mstari na mstari ili kusomeka kwa urahisi */
    margin: 0;
}

/* --------------------------------------------------------------------------
   RESPONSIVE: MPANGILIO WA SIMU NDOGO
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .culture-wildlife-grid {
        grid-template-columns: 1fr !important; /* Mstari mmoja tu kwenye simu ili muonekano ubaki msafi */
        gap: 30px;
    }
    
    .culture-card-body {
        padding: 25px 20px; /* Punguza kubana kwa ndani kwenye skrini ndogo */
    }
    
    .culture-img-holder {
        height: 210px; /* Punguza urefu wa picha kidogo kwenye simu */
    }
}
/* ==========================================
   25. HERO SECTION TEXT & BUTTONS (PICTURE STYLE)
   ========================================== */
.hero-content {
    text-align: left !important; /* Inalazimisha maandishi yaanzie kushoto nadhifu */
    padding-left: 8% !important; /* Inasogeza pembeni kidogo kutoka ukutani */
    max-width: 800px;
}

.hero-content h1 {
    font-size: 4rem !important; /* Herufi kubwa za kishua kama kwenye picha */
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    margin-bottom: 25px !important;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-sub-text {
    font-size: 2rem !important; /* Saizi ya maandishi ya ofa */
    font-weight: 600 !important;
    color: #ffffff !important;
    text-transform: uppercase; /* Lazinisha herufi kubwa zote */
    letter-spacing: 1px !important;
    margin-bottom: 40px !important;
    line-height: 1.2 !important;
}

/* KIKUNDI CHA VIFUNGO SAMBAMBA */
.hero-buttons-group {
    display: flex !important;
    gap: 20px !important;
    flex-wrap: wrap; /* Inajikunja vizuri kwenye simu */
}

/* KITUFE CHA KWANZA: BOOK A TRIP (SOLID) */
.btn-hero-solid {
    background-color: rgba(224, 225, 230, 0.9) !important; /* Rangi ya maziwa iliyofifia */
    color: #000000 !important; /* Maandishi meusi ya ndani */
    padding: 18px 45px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
    border-radius: 4px !important; /* Kona fupi zilizonyooka */
    transition: background-color 0.3s ease;
    display: inline-block;
    text-align: center;
}

.btn-hero-solid:hover {
    background-color: #ffffff !important;
}

/* KITUFE CHA PILI: CONTACT US (OUTLINE) */
.btn-hero-outline {
    background: none !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important; /* Mstari mweupe wa pembeni */
    padding: 16px 45px !important; /* Inapunguzwa 2px kufidia border */
    font-size: 15px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    letter-spacing: 1px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease;
    display: inline-block;
    text-align: center;
}

.btn-hero-outline:hover {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* RESPONSIVE LAYOUT KWA AJILI YA SIMU */
@media (max-width: 768px) {
    .hero-content {
        padding-left: 5% !important;
        text-align: left !important;
    }
    .hero-content h1 {
        font-size: 2.5rem !important; /* Punguza ukubwa kwenye simu ili yasiidondoke skrini */
    }
    .hero-sub-text {
        font-size: 1.3rem !important;
    }
    .hero-buttons-group {
        flex-direction: column !important; /* Vifungo vishuke chini moja baada ya kingine kwenye simu */
        width: 100%;
        gap: 15px !important;
    }
    .btn-hero-solid, .btn-hero-outline {
        width: 100% !important; /* Vifungo vichukue upana wote wa simu kwa urahisi wa kubonyeza */
        padding: 14px 20px !important;
    }
}
/* ==========================================
   26. PREMIUM LUXURY TOUR PRICE STYLING
   ========================================== */
.card-bottom .price {
    font-size: 22px !important; /* Inakuza ukubwa wa bei isomike haraka */
    font-weight: 800 !important; /* Unene mkubwa (Ultra Bold) */
    color: var(--accent-color) !important; /* Inachukua rangi yako ya machungwa ya kishua */
    letter-spacing: -0.5px !important;
    display: inline-flex;
    align-items: baseline;
    gap: 5px; /* Nafasi ndogo kati ya 'From' na namba */
}

/* Urembo maalum wa neno "From" lililopo ndani ya bei */
.card-bottom .price small {
    font-size: 13px !important; /* Neno 'From' linakuwa dogo nadhifu */
    font-weight: 500 !important; /* Linakuwa jepesi halina unene wa fujo */
    color: #64748b !important; /* Rangi ya kijivu iliyotulia isiyoumiza macho */
    text-transform: capitalize;
}

/* Hakikisha bei haisukumani vibaya kwenye simu */
@media (max-width: 768px) {
    .card-bottom .price {
        font-size: 19px !important; /* Inajipunguza kidogo kwenye simu ili ienee */
    }
    .card-bottom .price small {
        font-size: 12px !important;
    }
}
/* ==========================================
   27. NAVBAR DROPDOWN WITH IMAGE DISPLAY STYLING
   ========================================== */
.navbar-main-row-fixed .mega-menu {
    min-width: 480px !important; /* Ongeza upana wa dropdown ili picha ienee nadhifu */
    padding: 20px !important;
}

.mega-menu-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px !important;
}

.mega-col {
    flex: 1.2 !important;
}

/* Jopo la picha iliyopo kulia ndani ya Dropdown */
.mega-img-col {
    flex: 0.8 !important;
    display: block;
}

.mega-featured-card-nav {
    width: 100%;
    height: 120px;
    background-size: cover;
    background-position: center;
    border-radius: 12px; /* ← MDUARA KWENYE KONA ZA PICHA YA NAVBAR */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.mega-featured-card-nav span {
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.6);
    z-index: 5;
}

/* Zima picha ya dropdown ikiwa kwenye kioo cha simu */
@media (max-width: 768px) {
    .mega-img-col {
        display: none !important;
    }
    .navbar-main-row-fixed .mega-menu {
        min-width: 100% !important;
    }
}
.social-icons{
    display:flex;
    gap:15px;
}

.social-icons img{
    width:40px;
    height:40px;
    transition:.3s;
}

.social-icons img:hover{
    transform:scale(1.15);
}
.upper-head{
    background:#002855; /* dark blue ribbon */
    width:100%;
    padding:10px 0;
}


.upper-head-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
}


.contact-info{
    display:flex;
    align-items:center;
    gap:25px;
}


.contact-info p{
    color:white;
    margin:0;
    font-size:13px;
    font-weight:500;
}


.contact-info i{
    margin-right:7px;
    color:#ffffff;
}


.contact-info a{
    color:white;
    text-decoration:none;
}



/* Social icons */

.social-links-top{
    display:flex;
    gap:10px;
}


.social-links-top a{
    width:32px;
    height:32px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-size:15px;
    transition:.3s;
}


.social-links-top a:nth-child(1){
    background:#1877F2;
}

.social-links-top a:nth-child(2){
    background:linear-gradient(45deg,#feda75,#d62976,#962fbf);
}

.social-links-top a:nth-child(3){
    background:#000;
}

.social-links-top a:nth-child(4){
    background:#ff0000;
}

.social-links-top a:nth-child(5){
    background:#000;
}


.social-links-top a:hover{
    transform:translateY(-3px);
}




.footer-partners-strip{
    background:#050505;
    padding:20px 0;
    border-top:1px solid #070707;
}


.partners-flex{
    display:flex;
    justify-content:space-between;
    align-items:center;
}


.partner-box{
    display:flex;
    align-items:center;
    gap:20px;
}


.partner-box > span{
    font-size:14px;
    font-weight:600;
    color:#333;
}


.partner-logos,
.payment-logos{
    display:flex;
    align-items:center;
    gap:15px;
}


.partner-logos img{
    height:45px;
    width:auto;
}


.payment-logos img{
    height:35px;
    width:auto;
    object-fit:contain;
}



/* Mobile */

@media(max-width:768px){

    .partners-flex{
        flex-direction:column;
        gap:20px;
    }


    .partner-box{
        flex-direction:column;
        gap:10px;
        text-align:center;
    }


    .partner-logos img{
        height:40px;
    }


    .payment-logos img{
        height:30px;
    }

}
.contact-info-panel{

    background:#002855;
    color:white;
    padding:40px;
    border-radius:16px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);

    flex:1 1 48%;
    min-width:320px;
    box-sizing:border-box;

}


.contact-info-panel h3{

    color:#ff9f43;
    font-size:26px;
    margin-bottom:15px;
    font-weight:700;
}


.office-description{

    color:#e2e8f0;
    font-size:15px;
    line-height:1.6;
    margin-bottom:30px;

}



.info-items-list{

    display:flex;
    flex-direction:column;
    gap:25px;

}



.info-item-box{

    display:flex;
    align-items:center;
    gap:15px;

}



.info-icon{

    width:45px;
    height:45px;

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

    border-radius:50%;

    color:white;

    font-size:20px;

    flex-shrink:0;

}



/* Official Icon Backgrounds */

.phone-icon{

    background:#25D366;

}


.email-icon{

    background:#EA4335;

}


.location-icon{

    background:#4285F4;

}



.info-item-box h4{

    color:#ff9f43;

    font-size:16px;

    margin:0 0 3px 0;

    font-weight:600;

}



.info-item-box p{

    color:white;

    font-size:14.5px;

    margin:0;

}



/* MOBILE RESPONSIVE */

@media(max-width:768px){

    .contact-info-panel{

        padding:25px;

    }


    .contact-info-panel h3{

        font-size:22px;

    }


    .info-item-box{

        align-items:flex-start;

    }


    .info-icon{

        width:40px;
        height:40px;

        font-size:17px;

    }


    .info-item-box p{

        font-size:13.5px;

        word-break:break-word;

    }

}

/* ==========================================
   TRAVELNEST AFRICA PREMIUM NAVBAR
========================================== */


/* MAIN NAVBAR */

.navbar-main-row-fixed{

    background:#ffffff;
    width:100%;
    position:relative;
    z-index:999;

}



.nav-container-flex{

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

    width:100%;
    min-height:85px;

}



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


.site-logo{

    width:160px;
    height:auto;
    display:block;

}



/* ==========================
      MAIN MENU
========================== */


.nav-links{

    display:flex;

    align-items:center;

    gap:20px;

    list-style:none;

    margin:0;

    padding:0;

}



.nav-links > li{

    position:relative;

}



.nav-links > li > a{

    color:#002855;

    text-decoration:none;

    font-size:14px;

    font-weight:600;

    padding:30px 0;

    display:flex;

    align-items:center;

    gap:7px;

    white-space:nowrap;

    transition:0.3s ease;

}



.nav-links > li > a:hover,
.nav-links > li > a.active{

    color:#ff9f43;

}



/* ARROW */

.nav-links i{

    font-size:12px;

}



/* ==========================
      DROPDOWN MENU
========================== */


.nav-links li ul{

    position:absolute;

    top:85px;

    left:0;

    width:250px;

    background:#ffffff;

    padding:10px 0;

    margin:0;

    list-style:none;

    border-radius:10px;

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


    opacity:0;

    visibility:hidden;

    transform:translateY(15px);

    transition:0.3s ease;

}



.nav-links li:hover > ul{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}



.nav-links li ul li{

    width:100%;

}



.nav-links li ul li a{

    display:block;

    color:#333;

    text-decoration:none;

    font-size:14px;

    font-weight:500;

    padding:12px 20px;

    transition:.3s ease;

}



.nav-links li ul li a:hover{

    background:#002855;

    color:white;

    padding-left:30px;

}




/* ==========================
      CONTACT BUTTON
========================== */


.btn-nav-premium{

    background:#ff9f43;

    color:white !important;

    padding:12px 24px !important;

    border-radius:30px;

    font-size:14px !important;

    transition:.3s ease;

}



.btn-nav-premium:hover{

    background:#002855;

    transform:translateY(-2px);

}

/* ===============================
MEGA MENU
=============================== */
.mega-menu-parent{
position:relative;
}
.mega-menu{
position:absolute;
left:50%;
transform:translateX(-50%);
top:100%;
width:900px;
background:#fff;
display:flex;
justify-content:space-between;
padding:30px;
border-radius:15px;
box-shadow:0 20px 45px rgba(0,0,0,.15);
opacity:0;
visibility:hidden;
transition:.35s;
z-index:9999;
}
.mega-menu{

    position:absolute;
    left:50%;
    transform:translateX(-50%);
    top:115%;
    width:900px;
    background:#fff;
    display:flex;
    justify-content:space-between;
    padding:30px;
    border-radius:15px;
    box-shadow:0 20px 45px rgba(0,0,0,.15);

    opacity:0;
    visibility:hidden;
    pointer-events:none;

    transition:.3s;
}

.mega-menu-parent.open .mega-menu{

    opacity:1;
    visibility:visible;
    pointer-events:auto;

}
.mega-column{
width:30%;
}
.mega-column h4{
color:#ff9f43;
margin-bottom:15px;
font-size:18px;
border-bottom:2px solid #ff9f43;
padding-bottom:8px;
}
.mega-column a{
display:block;
padding:10px 0;
color:#222;
text-decoration:none;
font-size:14px;
transition:.3s;
}
.mega-column a:hover{
padding-left:10px;
color:#ff9f43;
}
@media(max-width:991px){
.mega-menu{
position:static;
display:none;
width:100%;
transform:none;
padding:0;
box-shadow:none;
border-radius:0;
flex-direction:column;
opacity:1;
visibility:visible;
}
.mega-menu-parent.active .mega-menu{
display:flex;
}
.mega-column{
width:100%;
padding:15px;
}
.mega-column h4{
margin-top:15px;
}
}
/* =====================================================
   TRAVELNEST AFRICA MOBILE NAVBAR + MEGA MENU
===================================================== */

@media (max-width:991px){

/* HEADER */

.navbar-main-row-fixed{
    background:#fff;
    padding:10px 0;
    position:relative;
}

.nav-container-flex{
    min-height:75px;
    padding:0 15px;
}

.site-logo{
    width:130px;
}

/* HAMBURGER */

.menu-toggle-btn{
    display:flex !important;
    justify-content:center;
    align-items:center;
    width:45px;
    height:40px;
    background:#002855;
    color:#fff;
    border:none;
    border-radius:6px;
    font-size:24px;
    cursor:pointer;
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    z-index:3000;
}

/* MOBILE MENU */

.navbar{
    position:absolute;
    top:75px;
    left:0;
    width:100%;
    background:#002855;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    transition:.35s;
    z-index:2500;
}

.navbar.open-nav-slide{
    max-height:90vh;
    overflow-y:auto;
    opacity:1;
    visibility:visible;
}

/* MENU */

.nav-links{
    display:flex;
    flex-direction:column;
    width:100%;
    margin:0;
    padding:0;
}

.nav-links>li{
    width:100%;
    border-bottom:1px solid rgba(255,255,255,.15);
}

.nav-links>li>a{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    padding:16px 20px;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
}

/* ===========================
   MOBILE MEGA MENU
=========================== */

.mega-menu{

    display:none;

    position:static;

    width:100%;

    background:#001f3f;

    flex-direction:column;

    padding:0;

    margin:0;

    box-shadow:none;

    border-radius:0;

}

.mega-menu.sub-active{

    display:flex;

}

.mega-column{

    width:100%;

}

.mega-column h4{

    color:#ff9f43;

    font-size:15px;

    padding:14px 20px;

    margin:0;

    background:#002855;

    border-bottom:1px solid rgba(255,255,255,.12);

}

.mega-column a{

    display:block;

    color:#ddd;

    text-decoration:none;

    padding:12px 40px;

    font-size:13px;

    border-bottom:1px solid rgba(255,255,255,.06);

}

.mega-column a:hover{

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

}

/* Arrow */

.menu-trigger i{

    transition:.3s;

}

.sub-open .menu-trigger i{

    transform:rotate(180deg);

}

/* Contact Button */

.btn-nav-premium{

    margin:15px 20px;

    justify-content:center;

    text-align:center;

    background:#ff9f43;

    color:#fff;

    border-radius:30px;

}

}
@media(max-width:991px){

.mega-menu a{

    pointer-events:auto !important;

    position:relative;

    z-index:9999;

}


.mega-column{

    position:relative;

    z-index:9999;

}

}

.mega-menu{

    opacity:0;
    visibility:hidden;
    pointer-events:none;

}


.mega-menu.sub-active{

    opacity:1;
    visibility:visible;
    pointer-events:auto;

}


        /* ==========================================================
   PREMIUM SAFARI PAGE DESIGN
   TRAVELNEST AFRICA STYLE
========================================================== */

:root{
    --primary:#002855;
    --secondary:#0f5132;
    --accent:#ff9f43;
    --light:#f8fafc;
    --text:#334155;
}


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins', 'Helvetica Neue', Arial, sans-serif;
}


body{

    background:#ffffff;
    color:var(--text);

}


.container{

    width:90%;
    max-width:1200px;
    margin:auto;

}



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


.safari-hero{

    height:520px;

    background:
    linear-gradient(
        rgba(0,0,0,.55),
        rgba(0,0,0,.35)
    ),
    url('IMAGES/tarangire.jpg');

    background-size:cover;
    background-position:center;

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

}



.hero-overlay{

    text-align:center;
    color:white;
    max-width:850px;
    padding:30px;

}



.hero-overlay h1{

    font-size:48px;
    font-weight:900;
    text-transform:uppercase;

    letter-spacing:1px;

    margin-bottom:20px;

}



.hero-overlay p{

    font-size:18px;

    line-height:1.8;

    color:#f8fafc;

    margin-bottom:35px;

}



/* BOOK BUTTON */


.booking-btn{

    display:inline-block;

    background:var(--accent);

    color:white;

    padding:16px 40px;

    border-radius:50px;

    text-decoration:none;

    font-weight:700;

    transition:.3s;

    box-shadow:
    0 10px 25px rgba(255,159,67,.35);

}



.booking-btn:hover{

    transform:translateY(-5px);

    background:#ff8800;

}



/* ==========================================================
   CONTENT SECTION
========================================================== */


.safari-details{

    padding:90px 0;

}



.safari-details h2{

    font-size:30px;

    color:var(--primary);

    font-weight:800;

    margin:50px 0 25px;

    position:relative;

}



.safari-details h2:after{

    content:"";

    width:60px;

    height:4px;

    background:var(--accent);

    display:block;

    margin-top:10px;

}



.safari-details p{

    font-size:16px;

    line-height:1.9;

    color:#475569;

}



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


.itinerary-box{


    background:white;

    padding:30px;

    margin:25px 0;


    border-radius:18px;


    border-left:6px solid var(--accent);


    box-shadow:

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


    transition:.3s;


}



.itinerary-box:hover{


    transform:translateY(-5px);


    box-shadow:

    0 15px 35px rgba(0,0,0,.12);


}



.itinerary-box h3{


    color:var(--primary);

    font-size:19px;

    margin-bottom:12px;

    font-weight:800;


}



.itinerary-box p{


    font-size:15px;

}



/* ==========================================================
   INCLUDED / EXCLUDED SECTION
========================================================== */


.inc-exc-flex-wrapper{


    display:flex;

    gap:30px;

    margin-top:40px;

    flex-wrap:wrap;


}



.legal-card-box{


    flex:1;

    min-width:320px;


    background:#ffffff;


    padding:35px;


    border-radius:20px;


    border:1px solid #e2e8f0;


    box-shadow:

    0 10px 25px rgba(0,0,0,.06);


}



.legal-card-box h2{

    margin-top:0;

}



.include-list,
.exclude-list{


    list-style:none;

}



.include-list li,
.exclude-list li{


    padding:12px 0;

    font-size:15px;

    display:flex;

    align-items:center;

    gap:12px;


}



.include-list i{

    color:#16a34a;

}



.exclude-list i{

    color:#dc2626;

}



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


.whatsapp-action-container{


    margin:60px 0;

    text-align:center;


}



.whatsapp-btn{


    display:inline-flex;

    align-items:center;

    gap:10px;


    background:#25d366;


    color:white;


    padding:17px 45px;


    border-radius:50px;


    font-weight:800;


    text-decoration:none;


    font-size:16px;


    box-shadow:

    0 10px 25px rgba(37,211,102,.35);


    transition:.3s;


}



.whatsapp-btn:hover{

    transform:translateY(-5px);

}



/* ==========================================
   FOOTER LEFT SECTION
========================================== */

.footer-section{

    color:#fff;

}

.footer-section h3{

    color:#fff;
    text-align:center;
    margin-bottom:18px;
    font-size:28px;
    font-weight:600;

}

.footer-section .intro-text{

    color:#d7dde5;
    text-align:center;
    line-height:1.8;
    margin-bottom:30px;

}

/* SOCIAL ICONS */

.social-icons{

    display:flex;
    justify-content:center;
    gap:18px;
    margin-bottom:40px;

}

.social-icons a{

    width:45px;
    height:45px;

    border-radius:50%;

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

    color:#fff;
    font-size:20px;
    text-decoration:none;

    transition:.3s;

}

.social-icons a:hover{

    transform:translateY(-4px);

}

.social-icons .instagram{

    background:#E4405F;

}

.social-icons .facebook{

    background:#1877F2;

}

.social-icons .twitter{

    background:#000;

}

.social-icons .tripadvisor{

    background:#34E0A1;
    color:#000;

}

/* HEADING */

.footer-section h4{

    color:#fff;
    text-align:center;
    margin:35px 0 25px;

}

/* MENU */

.menu-group ul{

    list-style:none;
    padding:0;
    margin:0;

}

.menu-group li{

    margin-bottom:18px;

}

.menu-group li::before{

    content:">";
    color:#ff9f43;
    margin-right:12px;
    font-weight:bold;

}

.menu-group li a{

    color:#fff;
    text-decoration:none;
    transition:.3s;

}

.menu-group li a:hover{

    color:#ff9f43;
    padding-left:6px;

}
.contact-section h3{

    color:#fff;
    margin-bottom:25px;
    font-size:24px;
    font-weight:600;

}

.contact-item{

    display:flex;
    align-items:flex-start;
    gap:15px;
    margin-bottom:20px;

}

.contact-item i{

    width:42px;
    height:42px;

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

    border-radius:50%;

    color:#fff;
    font-size:18px;

    flex-shrink:0;

}

.contact-item:nth-child(2) i{

    background:#4285F4;

}

.contact-item:nth-child(3) i{

    background:#EA4335;

}

.contact-item:nth-child(4) i{

    background:#25D366;

}

.contact-item p{

    margin:0;
    color:#d9d9d9;
    line-height:1.6;
    font-size:15px;

}

/* ==========================================================================
   DESTINATION DETAIL PAGES SHARED STYLING (TRAVELNEST AFRICA STANDARD)
   ========================================================================== */
.dest-hero-section {
    height: 460px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.dest-hero-overlay {
    text-align: center;
    color: #ffffff;
    padding: 20px;
    z-index: 5;
}

.dest-hero-overlay h1 {
    font-size: 3rem;
    font-weight: 800;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
    text-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.dest-hero-overlay p {
    font-size: 17px;
    max-width: 650px;
    margin: 0 auto;
    color: #f1f5f9;
    line-height: 1.6;
    text-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* CONTENT LAYOUT: Picha Kushoto, Maandishi Kulia au Side-by-Side */
.dest-main-content {
    padding: 70px 0;
    background-color: #ffffff;
}

.dest-grid-wrapper {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.dest-left-details {
    flex: 1.3;
    min-width: 320px;
}

.dest-left-details h2 {
    color: #141d26;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 15px;
    border-bottom: 2px solid #f1f5f9;
    padding-bottom: 8px;
}

.dest-left-details p {
    font-size: 15px;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 25px;
}

/* GRID MAALUM YA PICHA ZA NDANI YA UKURASA */
.dest-image-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin: 30px 0;
}

.dest-gallery-img-box {
    width: 100%;
    height: 190px;
    overflow: hidden;
    border-radius: 12px; /* ← MDUARA KWENYE KONA ZA PICHA ZA VIVUTIO */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
}

.dest-gallery-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.dest-gallery-img-box:hover img {
    transform: scale(1.06); /* Picha inajikuza kidogo kwa urembo mteja akiigusa */
}

/* UPANDE WA KULIA: KADI YA HARAKA YA REFA / WHATSAPP BOOKING */
.dest-right-sidebar {
    flex: 0.7;
    min-width: 280px;
}

.dest-sticky-booking-card {
    position: sticky;
    top: 100px;
    background-color: #f8fafc;
    border: 1px solid #edf2f7;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
    text-align: center;
}

.dest-sticky-booking-card h3 {
    font-size: 19px;
    color: #141d26;
    margin-bottom: 12px;
    font-weight: 700;
}

.dest-sticky-booking-card p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 25px;
}

.dest-whatsapp-btn {
    background-color: #25d366 !important;
    color: #ffffff !important;
    padding: 14px 30px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
    transition: transform 0.3s ease;
}

.dest-whatsapp-btn:hover {
    transform: translateY(-2px);
}

/* RESPONSIVE FOR SIMU */
@media (max-width: 768px) {
    .dest-hero-section { height: 350px; }
    .dest-hero-overlay h1 { font-size: 2.2rem; }
    .dest-main-content { padding: 40px 0; }
    .dest-grid-wrapper { flex-direction: column; gap: 30px; }
    .dest-sticky-booking-card { position: relative; top: 0; }
}