/* =====================================
   JJ SAFARI CONTACT PAGE
===================================== */


.jj-contact-section{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    padding:120px 0;

    overflow:hidden;

}


/* BACKGROUND IMAGE */

.contact-background{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    top:0;

    left:0;

    z-index:0;

    animation: safariZoom 20s infinite alternate;

}



@keyframes safariZoom{

    from{

        transform:scale(1);

    }


    to{

        transform:scale(1.12);

    }

}



/* DARK OVERLAY */


.contact-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    rgba(0,0,0,.75),

    rgba(0,0,0,.55)

    );


    z-index:1;

}





.jj-contact-section .container{

    position:relative;

    z-index:2;

}





/* =====================================
   CONTACT INFORMATION
===================================== */


.contact-info{

    color:white;

    animation:fadeLeft 1s ease;

}



@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-50px);

}

to{

opacity:1;

transform:translateX(0);

}

}





.contact-info h1{

    font-size:60px;

    font-weight:900;

    line-height:1.1;

    margin-bottom:25px;

}



.contact-info h1 span{

    color:#d4a017;

    display:block;

}





.contact-info>p{

    font-size:19px;

    color:#eee;

    max-width:500px;

    line-height:1.8;

}





/* CONTACT DETAILS */


.contact-item{

    display:flex;

    align-items:center;

    gap:20px;

    margin-top:35px;

}





.contact-item i{


    width:60px;

    height:60px;

    background:

    linear-gradient(

    135deg,

    #d4a017,

    #f5c542

    );


    color:white;

    border-radius:50%;


    display:flex;

    justify-content:center;

    align-items:center;


    font-size:28px;


    box-shadow:

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


}



.contact-item h5{

    color:#d4a017;

    font-weight:700;

    margin-bottom:5px;

}



.contact-item p{

    margin:0;

    color:white;

}





/* =====================================
   CONTACT FORM GLASS CARD
===================================== */


.jj-contact-card{


    background:

    rgba(255,255,255,.15);


    backdrop-filter:blur(20px);


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


    padding:50px;


    border-radius:30px;


    border:

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



    box-shadow:


    0 25px 80px rgba(0,0,0,.5);



    animation:fadeRight 1s ease;

}





@keyframes fadeRight{

from{

opacity:0;

transform:translateX(50px);

}

to{

opacity:1;

transform:translateX(0);

}

}





.jj-contact-card h2{

    color:white;

    text-align:center;

    font-size:35px;

    font-weight:800;

    margin-bottom:35px;

}





/* INPUTS */


.jj-contact-card input,

.jj-contact-card textarea{


    width:100%;


    padding:17px 22px;


    margin-bottom:20px;


    border:none;


    border-radius:15px;


    outline:none;


    background:

    rgba(255,255,255,.95);



    font-size:16px;



    transition:.3s;


}





.jj-contact-card input:focus,

.jj-contact-card textarea:focus{


    transform:translateY(-3px);


    box-shadow:

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


}





.jj-contact-card textarea{

    resize:none;

}





/* BUTTON */


.jj-contact-card button{


    width:100%;


    padding:17px;


    border:none;


    border-radius:50px;



    background:

    linear-gradient(

    135deg,

    #d4a017,

    #b8860b

    );



    color:white;



    font-size:19px;



    font-weight:800;



    letter-spacing:1px;



    transition:.4s;



}





.jj-contact-card button:hover{


    background:

    linear-gradient(

    135deg,

    #2f5d34,

    #1e4024

    );



    transform:translateY(-5px);



    box-shadow:

    0 15px 30px rgba(0,0,0,.4);



}





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


@media(max-width:992px){


.contact-info{

    text-align:center;

}



.contact-info>p{

    margin:auto;

}



.contact-item{

    justify-content:center;

}



.contact-info h1{

    font-size:45px;

}



.jj-contact-card{

    margin-top:50px;

    padding:30px;

}


}




@media(max-width:576px){


.jj-contact-section{

    padding:80px 0;

}



.contact-info h1{

    font-size:38px;

}



.jj-contact-card h2{

    font-size:28px;

}


}


....................................................


/* =====================================
   walking safari stylessssssss
===================================== */



/* =====================================
   JJ SAFARI WALKING SAFARI PAGE
===================================== */


.walking-hero{

    min-height:90vh;

    display:flex;

    align-items:center;

    position:relative;

    overflow:hidden;

}


/* IMAGE FROM HTML */

.walking-background{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    top:0;

    left:0;

    z-index:0;

    animation:walkingZoom 18s infinite alternate;

}



@keyframes walkingZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.1);

    }

}




.walking-overlay{

    position:absolute;

    inset:0;

    background:

    linear-gradient(

    90deg,

    rgba(0,0,0,.75),

    rgba(0,0,0,.45)

    );

    z-index:1;

}




.walking-content{

    position:relative;

    z-index:2;

    color:white;

}



.walking-content h1{

    font-size:70px;

    font-weight:900;

    line-height:1.1;

}



.walking-content h1 span{

    color:#d4a017;

}



.walking-content p{

    font-size:20px;

    max-width:650px;

    line-height:1.8;

}




.walking-btn{


    display:inline-block;

    margin-top:30px;

    padding:15px 40px;

    border-radius:50px;

    background:#d4a017;

    color:white;

    font-weight:bold;

    text-decoration:none;

    transition:.4s;

}



.walking-btn:hover{

    background:#2f5d34;

    transform:translateY(-5px);

}







/* =====================================
   WALKING SAFARI INFO CARDS
===================================== */


.walking-card{


    background:white;

    padding:35px;

    border-radius:25px;

    box-shadow:

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

    height:100%;

    transition:.4s;

}



.walking-card:hover{


    transform:translateY(-10px);

}




.walking-card i{


    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#d4a017;

    color:white;

    border-radius:50%;

    font-size:30px;

    margin-bottom:20px;

}



.walking-card h3{

    font-weight:800;

    color:#2f5d34;

}



.walking-card p{

    color:#555;

    line-height:1.7;

}





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


@media(max-width:768px){


.walking-content h1{

font-size:45px;

}


.walking-content{

text-align:center;

}


.walking-content p{

margin:auto;

}


}

............................................................


/*=================================================
        JJ SAFARI LUXURY GALLERY
==================================================*/

.jj-gallery-section{

    position:relative;
    padding:140px 0;
    overflow:hidden;
    background:#08140d;

}

/*=========================================
BACKGROUND
=========================================*/

.gallery-bg{

    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background-image:url("../img/z3.jpg");
    background-size:cover;
    background-position:center;

    animation:galleryZoom 30s ease-in-out infinite alternate;

    transform:scale(1);

}

@keyframes galleryZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.18);

    }

}

.gallery-overlay{

    position:absolute;
    inset:0;

    background:

    linear-gradient(rgba(0,0,0,.82),
    rgba(0,0,0,.82));

}

/*=========================================
TITLE
=========================================*/

.gallery-title{

    position:relative;
    z-index:2;
    margin-bottom:70px;

}

.gallery-title h5{

    color:#d8b36a;
    text-transform:uppercase;
    letter-spacing:5px;
    font-weight:700;

}

.gallery-title h2{

    color:#fff;
    font-size:58px;
    font-weight:800;
    margin-top:15px;

}

.gallery-title p{

    color:#ddd;
    max-width:760px;
    margin:auto;
    margin-top:25px;
    font-size:18px;
    line-height:1.9;

}
/*=========================================
CARD
=========================================*/


.gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:22px;

    cursor:pointer;

    opacity:1;

    transform:translateY(0);

    transition:

    transform .7s ease,

    box-shadow .6s ease;

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

    backdrop-filter:blur(12px);

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

}


/* Scroll Animation */

.gallery-card.show{

    opacity:1;

    transform:translateY(0);

}



.gallery-card img{

    width:100%;

    height:330px;

    object-fit:cover;

    display:block;

    transition:1s ease;

}



/* Gold Border */

.gallery-card::before{

    content:"";

    position:absolute;

    inset:0;

    border:2px solid rgba(212,175,55,.8);

    border-radius:22px;

    opacity:0;

    transition:.5s;

    z-index:2;

}



/* Shine Effect */

.gallery-card::after{

    content:"";

    position:absolute;

    top:-150%;

    left:-70%;

    width:60%;

    height:300%;

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

    transform:rotate(25deg);

    transition:1s;

}



/* Hover */

.gallery-card:hover{


    transform:

    translateY(-15px)

    scale(1.03);


    box-shadow:

    0 25px 60px rgba(0,0,0,.7);


}



.gallery-card:hover img{


    transform:scale(1.15);


}



.gallery-card:hover::before{


    opacity:1;


}



.gallery-card:hover::after{


    left:140%;


}


.gallery-bg{

    z-index:0;

}


.gallery-overlay{

    z-index:1;

}


.jj-gallery-section .container{

    position:relative;

    z-index:3;

}

/*=========================================
LIGHTBOX
=========================================*/

#lightbox{

    position:fixed;

    inset:0;

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

    display:flex;

    justify-content:center;

    align-items:center;

    visibility:hidden;

    opacity:0;

    transition:.5s;

    z-index:99999;

}

#lightbox.active{

    visibility:visible;

    opacity:1;

}

#lightbox img{

    max-width:92%;

    max-height:90%;

    border-radius:20px;

    animation:zoomImage .4s;

}

@keyframes zoomImage{

    from{

        transform:scale(.6);

        opacity:0;

    }

    to{

        transform:scale(1);

        opacity:1;

    }

}

#closeLightbox{

    position:absolute;

    top:35px;

    right:50px;

    color:white;

    font-size:60px;

    cursor:pointer;

}

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

@media(max-width:991px){

.gallery-title h2{

font-size:42px;

}

.gallery-card img{

height:270px;

}

}

@media(max-width:768px){

.gallery-title h2{

font-size:34px;

}

.gallery-title p{

font-size:16px;

}

.gallery-card img{

height:240px;

}

}

........................................................

.gallery-ripple{


position:absolute;

width:20px;

height:20px;

background:white;

border-radius:50%;

transform:translate(-50%,-50%);

animation:ripple .7s linear;

pointer-events:none;

z-index:10;

}



@keyframes ripple{


from{

width:20px;

height:20px;

opacity:.7;

}


to{

width:500px;

height:500px;

opacity:0;

}


}

.......................................................

/*=====================================
 JJ SAFARI EXPERIENCE
======================================*/


.jj-experience{

    position:relative;

    padding:120px 0;

    background:

    linear-gradient(
    rgba(30,30,30,.92),
    rgba(30,30,30,.92)
    ),

    url("../img/z8.jpg");

    background-size:cover;

    background-position:center;

    background-attachment:fixed;

    overflow:hidden;

}



/* Dark safari atmosphere */

.experience-overlay{

    position:absolute;

    inset:0;

    background:

    radial-gradient(
    circle at center,
    rgba(212,175,55,.15),
    transparent 65%
    );

}



/* Keep content above background */

.jj-experience .container{

    position:relative;

    z-index:2;

}



/*=====================================
 TITLE
======================================*/


.experience-title{

    position:relative;

    z-index:2;

    margin-bottom:60px;

}



.experience-title h5{

    color:#d8b36a;

    letter-spacing:5px;

    text-transform:uppercase;

}



.experience-title h2{

    color:white;

    font-size:55px;

    font-weight:800;

}



.experience-title p{

    color:#f1f1f1;

    font-size:18px;

    max-width:700px;

    margin:auto;

}



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


.experience-card{

    position:relative;

    padding:40px;

    height:100%;


    background:

    rgba(255,255,255,.12);


    border-radius:25px;


    border:

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


    backdrop-filter:blur(15px);


    cursor:pointer;


    transition:.6s;


    color:white;


    overflow:hidden;

}



.experience-card span{

    font-size:55px;

}



.experience-card h3{

    margin-top:20px;

    font-size:28px;

}



.experience-card p{

    color:#ddd;

    line-height:1.8;

}



/* Hidden Story */

.hidden-text{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:.6s;

    color:#d8b36a;

    margin-top:20px;

}



/* Click Animation */

.experience-card.active{

    transform:

    translateY(-15px)

    scale(1.04);


    box-shadow:

    0 30px 70px rgba(0,0,0,.6);

}



.experience-card.active .hidden-text{

    max-height:150px;

    opacity:1;

}

/*=====================================
 JJ SAFARI EXPERIENCE OVERRIDE
======================================*/


section.jj-experience{

    background:

    linear-gradient(
        rgba(40,40,40,.90),
        rgba(40,40,40,.90)
    ),

    url("../img/h3.jpeg") !important;


    background-size:cover !important;

    background-position:center !important;

    background-attachment:fixed !important;

    position:relative;

    overflow:hidden;

}



/* overlay behind content */

.jj-experience .experience-overlay{

    position:absolute;

    inset:0;

    background:

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

    z-index:0;

}



/* keep text and cards visible */

.jj-experience .container{

    position:relative;

    z-index:5;

}



/* cards */

.jj-experience .experience-card{

    background:

    rgba(0,0,0,.35) !important;


    color:white !important;

}



/* headings */

.jj-experience h2,

.jj-experience h3,

.jj-experience p{

    color:white;

}

.........................................


/* JJ NAVBAR FIX */

.navbar{

    position:relative;

    z-index:9999;

    background:white;

}


.navbar-brand span{

    color:#222;

}


.nav-link{

    color:#222 !important;

}


.nav-link:hover{

    color:#d8b36a !important;

}

...................................

/*=====================================
 JJ NAVBAR FINAL FIX
======================================*/


.navbar{

    position:relative;

    z-index:9999;

    background:white !important;

}


.navbar-brand{

    color:#222 !important;

}


.navbar-brand span{

    color:#222 !important;

}


.nav-link{

    color:#222 !important;

    font-weight:600;

}


.nav-link:hover{

    color:#d8b36a !important;

}


.jj-logo{

    width:60px;

    height:60px;

    object-fit:contain;

}


/*====================================
 JJ SAFARI NAVBAR FINAL CONTROL
=====================================*/


.jj-navbar{

    background:white !important;

    position:relative;

    z-index:9999;

}



.jj-navbar .navbar-brand{

    color:#222 !important;

    font-weight:700;

}



.jj-navbar .navbar-brand span{

    color:#222 !important;

}



.jj-navbar .nav-link{

    color:#222 !important;

    font-weight:600;

}



.jj-navbar .nav-link:hover{

    color:#c49b3f !important;

}



.jj-logo{

    width:60px;

    height:60px;

    object-fit:contain;

}



.jj-navbar .navbar-toggler{

    border:1px solid #333;

}

.......................................


/*================================================
 JJ SAFARI ABOUT EXPERIENCE DESIGN
================================================*/


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


.jj-about-hero{

position:relative;

height:90vh;

overflow:hidden;

display:flex;

align-items:center;

}



.about-hero-image{

position:absolute;

width:100%;

height:100%;

object-fit:cover;

top:0;

left:0;

}



.about-overlay{

position:absolute;

inset:0;

background:

linear-gradient(
rgba(0,0,0,.65),
rgba(0,0,0,.45)
);

}



.about-hero-box{


position:relative;

z-index:5;

max-width:700px;

padding:50px;

background:

rgba(255,255,255,.12);

border-radius:30px;

backdrop-filter:blur(15px);

border:

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

animation:heroFloat 4s infinite alternate;

}



.about-hero-box h1{

font-size:70px;

font-weight:900;

color:white;

}



.about-hero-box p{

font-size:22px;

color:#eee;

line-height:1.8;

}



@keyframes heroFloat{

from{

transform:translateY(0);

}

to{

transform:translateY(-20px);

}

}



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


.jj-glass-btn{


display:inline-block;

padding:18px 45px;

border-radius:50px;

background:

rgba(212,175,55,.85);

color:white;

text-decoration:none;

font-weight:700;

transition:.5s;

}



.jj-glass-btn:hover{


transform:scale(1.1);

box-shadow:

0 0 40px #d4af37;

color:white;

}






/*==============================
 STORY SECTION
===============================*/


.jj-story{


padding:120px 0;

background:#222;

}



.story-image{


width:100%;

border-radius:30px;

transition:1s;

}



.story-image:hover{

transform:scale(1.05);

}



.story-glass{


padding:45px;

background:

rgba(255,255,255,.12);

backdrop-filter:blur(20px);

border-radius:30px;

color:white;

border:

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

}





.story-glass h2{

font-size:45px;

color:#d4af37;

}





/*==============================
 CHOICE SECTION
===============================*/


.jj-choice{


padding:120px 0;

background:#111;

}



.section-heading{

text-align:center;

color:white;

margin-bottom:60px;

}



.section-heading h2{

font-size:55px;

}




.choice-card{


position:relative;

overflow:hidden;

border-radius:30px;

cursor:pointer;

background:

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

backdrop-filter:blur(15px);

transition:.7s;

border:

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

}



.choice-card img{


width:100%;

height:420px;

object-fit:cover;

transition:1s;

}



.choice-content{


padding:35px;

color:white;

}



.choice-card:hover{


transform:

translateY(-20px);


box-shadow:

0 30px 70px rgba(0,0,0,.7);

}



.choice-card:hover img{

transform:scale(1.2);

}



.choice-more{


max-height:0;

opacity:0;

overflow:hidden;

color:#d4af37;

transition:.6s;

}



.choice-card.active .choice-more{


max-height:100px;

opacity:1;

}







/*==============================
 TIMELINE
===============================*/


.jj-timeline{


padding:120px 0;

background:#3b3b3b;

color:white;

text-align:center;

}



.jj-timeline h2{

font-size:55px;

margin-bottom:60px;

}



.timeline-box{


display:flex;

justify-content:space-around;

gap:30px;

flex-wrap:wrap;

}



.timeline-box div{


padding:35px;

background:

rgba(255,255,255,.15);

border-radius:25px;

backdrop-filter:blur(10px);

transition:.5s;

}



.timeline-box div:hover{


transform:translateY(-15px);

}




/*==============================
 STATISTICS
===============================*/


.jj-stats{


padding:100px 0;

background:#111;

color:white;

}



.jj-stats h2{


font-size:55px;

color:#d4af37;

}



.jj-stats p{

font-size:20px;

}






/*==============================
 PURPOSE
===============================*/


.jj-purpose{


padding:120px 0;

background:#333;

}



.purpose-glass,


.booking-glass{


max-width:800px;

margin:auto;

padding:60px;

text-align:center;

background:

rgba(255,255,255,.15);

border-radius:35px;

backdrop-filter:blur(20px);

color:white;

}




/*==============================
 FINAL BOOKING
===============================*/


.jj-final-booking{


padding:120px 0;

background:#111;

}






/* MOBILE */

@media(max-width:768px){


.about-hero-box h1{

font-size:40px;

}


.section-heading h2,

.jj-timeline h2{

font-size:35px;

}


}

......................................

/*=====================================
 JS REVEAL EFFECTS
======================================*/


.story-glass,
.choice-card,
.timeline-box div,
.purpose-glass,
.booking-glass{


opacity:0;

transform:

translateY(60px);


transition:

1s ease;

}



.show{


opacity:1;


transform:

translateY(0);


}




/* click ripple */


.safari-ripple{


position:absolute;

width:20px;

height:20px;

border-radius:50%;

background:white;

opacity:.7;

animation:

safariRipple .7s;


}



@keyframes safariRipple{


from{


transform:scale(1);

opacity:.8;


}


to{


transform:scale(20);

opacity:0;


}


}


..........................................


/*====================================
 JJ SAFARI HERO UPGRADE
=====================================*/


.jj-hero{

position:relative;

height:95vh;

overflow:hidden;

display:flex;

align-items:center;

}



.jj-hero-image{

position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;

}



.jj-hero-overlay{

position:absolute;

inset:0;

background:

linear-gradient(

rgba(0,0,0,.65),

rgba(0,0,0,.35)

);

}




.jj-hero-glass{


position:relative;

z-index:5;

max-width:750px;

padding:55px;


background:

rgba(255,255,255,.12);


border-radius:35px;


backdrop-filter:blur(18px);


border:

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


animation:

heroAppear 1.5s ease;


}



@keyframes heroAppear{


from{

opacity:0;

transform:translateY(60px);

}


to{

opacity:1;

transform:translateY(0);

}


}




.hero-badge{


display:inline-block;

padding:10px 25px;

border-radius:50px;

background:#d4af37;

color:white;

font-weight:700;

letter-spacing:2px;

margin-bottom:25px;

}





.jj-hero-glass h1{


font-size:75px;

font-weight:900;

color:white;

line-height:1.1;


}



.jj-hero-glass p{


font-size:22px;

color:#eee;

line-height:1.8;


}



.hero-buttons{


display:flex;

gap:20px;

margin-top:35px;


}



.jj-main-btn,
.jj-outline-btn{


padding:18px 40px;

border-radius:50px;

text-decoration:none;

font-weight:700;

transition:.5s;


}



.jj-main-btn{


background:#d4af37;

color:white;

}



.jj-outline-btn{


border:2px solid white;

color:white;

}



.jj-main-btn:hover,
.jj-outline-btn:hover{


transform:translateY(-8px) scale(1.05);

}





@media(max-width:768px){


.jj-hero-glass h1{

font-size:42px;

}


.hero-buttons{

flex-direction:column;

}


}


.............................................


/*====================================
 JJ SAFARI STORY SECTION
=====================================*/


.jj-story-section{


padding:120px 0;

background:#262626;

overflow:hidden;


}




.story-image-wrap{


position:relative;


}



.story-main-image{


width:100%;

border-radius:35px;

transition:1s;


}




.story-main-image:hover{


transform:scale(1.05);


}




.image-tag{


position:absolute;

bottom:25px;

left:25px;


background:#d4af37;

color:white;


padding:15px 25px;


border-radius:50px;


font-weight:700;


}




.jj-story-glass{


padding:50px;


background:

rgba(255,255,255,.12);


border-radius:35px;


backdrop-filter:blur(20px);


border:

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


color:white;


}



.jj-story-glass h5{


color:#d4af37;

letter-spacing:4px;


}




.jj-story-glass h2{


font-size:48px;

font-weight:800;


}




.jj-story-glass p{


font-size:18px;

line-height:1.9;

color:#eee;


}





.story-features{


display:flex;

gap:20px;

margin-top:35px;

flex-wrap:wrap;


}




.story-features div{


flex:1;

min-width:140px;


padding:20px;


background:

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


border-radius:20px;


text-align:center;


transition:.5s;


}



.story-features div:hover{


transform:

translateY(-12px);


background:

rgba(212,175,55,.25);


}




.story-features h4{


margin-top:10px;


}



.story-features span{


color:#ddd;


}


...................................................

/*====================================
 JJ ADVENTURE EXPERIENCE CARDS
=====================================*/


.jj-adventures{


padding:130px 0;

background:#151515;


}




.adventure-title h5{


color:#d4af37;

letter-spacing:5px;


}




.adventure-title h2{


color:white;

font-size:55px;

font-weight:900;


}



.adventure-title p{


color:#ddd;

font-size:18px;


}




.adventure-card{


position:relative;

height:520px;

overflow:hidden;

border-radius:35px;

cursor:pointer;


}




.adventure-card img{


width:100%;

height:100%;

object-fit:cover;


transition:1s;


}




.adventure-card:hover img{


transform:scale(1.15);


}




.adventure-glass{


position:absolute;

bottom:0;

left:0;

right:0;


padding:45px;


background:

linear-gradient(

transparent,

rgba(0,0,0,.95)

);


color:white;


transition:.6s;


}




.adventure-glass span{


font-size:55px;


}




.adventure-glass h3{


font-size:38px;

font-weight:800;


}




.adventure-glass p{


font-size:18px;

line-height:1.7;


}





.adventure-hidden{


max-height:0;

overflow:hidden;

opacity:0;

color:#d4af37;

font-size:17px;

line-height:1.8;

transition:.7s;


}





/* CLICK ACTIVE */


.adventure-card.active{


transform:

translateY(-15px);


box-shadow:


0 30px 80px rgba(212,175,55,.35);


}





.adventure-card.active 
.adventure-hidden{


max-height:150px;

opacity:1;


}





.adventure-card:hover{


box-shadow:


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


}


..............................................


/*====================================
 JJ SAFARI JOURNEY TIMELINE
=====================================*/


.jj-journey{


padding:130px 0;

background:#292929;

color:white;

overflow:hidden;


}





.journey-heading h5{


color:#d4af37;

letter-spacing:5px;


}



.journey-heading h2{


font-size:55px;

font-weight:900;


}



.journey-heading p{


font-size:18px;

color:#ddd;


}





.journey-line{


position:relative;

margin-top:80px;


}





/* GOLD JOURNEY LINE */


.journey-line::before{


content:"";


position:absolute;


left:50%;


top:0;


height:100%;


width:4px;


background:#d4af37;


transform:translateX(-50%);


}





.journey-item{


position:relative;

display:flex;

justify-content:center;

margin-bottom:70px;


}





.journey-icon{


position:absolute;


left:50%;


transform:translateX(-50%);


width:80px;

height:80px;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


font-size:35px;


background:#111;


border:3px solid #d4af37;


z-index:2;


}





.journey-glass{


width:45%;


padding:35px;


background:


rgba(255,255,255,.12);



backdrop-filter:blur(15px);



border-radius:30px;



border:

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



transition:.6s;



}





.journey-item:nth-child(even)
.journey-glass{


margin-left:50%;


}





.journey-glass:hover{


transform:

translateY(-15px)
scale(1.05);



box-shadow:


0 30px 70px rgba(0,0,0,.7);


}





.journey-glass h3{


color:#d4af37;


font-size:30px;


}




.journey-glass p{


line-height:1.8;


}




@media(max-width:768px){



.journey-line::before{


left:20px;


}




.journey-icon{


left:20px;


}




.journey-glass,


.journey-item:nth-child(even)
.journey-glass{


width:80%;

margin-left:80px;


}



}

...............................................


/*====================================
 JJ SAFARI CONSERVATION
=====================================*/


.jj-conservation-new{


position:relative;

padding:150px 0;

overflow:hidden;


}



.conservation-image{


position:absolute;

width:100%;

height:100%;

object-fit:cover;

inset:0;


}




.conservation-overlay{


position:absolute;

inset:0;


background:


linear-gradient(

rgba(0,0,0,.75),

rgba(0,0,0,.65)

);


}




.conservation-glass{


position:relative;

z-index:2;

padding:60px;


background:


rgba(255,255,255,.12);


backdrop-filter:blur(20px);


border-radius:40px;


border:

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


text-align:center;


color:white;


}




.conservation-glass h5{


color:#d4af37;

letter-spacing:5px;


}




.conservation-glass h2{


font-size:60px;

font-weight:900;


}




.conservation-glass p{


font-size:20px;

line-height:1.8;


}




.conservation-boxes{


display:flex;

gap:30px;

margin-top:50px;

flex-wrap:wrap;


}



.conservation-boxes div{


flex:1;


min-width:220px;


padding:30px;


background:


rgba(0,0,0,.35);


border-radius:25px;


transition:.5s;


}



.conservation-boxes div:hover{


transform:

translateY(-15px);


background:

rgba(212,175,55,.25);


}



.conservation-boxes h4{


color:#d4af37;


}


...................................................

/*====================================
 JJ BOOKING CTA
=====================================*/


.jj-final-booking-new{


padding:130px 0;

background:#111;


}



.booking-final-glass{


padding:70px;

text-align:center;


background:


rgba(255,255,255,.12);


border-radius:40px;


backdrop-filter:blur(20px);


color:white;


}



.booking-final-glass h2{


font-size:55px;

font-weight:900;


}



.booking-final-glass p{


font-size:20px;

margin:30px 0;


}




.jj-book-button{


display:inline-block;

padding:20px 50px;


background:#25D366;


color:white;


border-radius:50px;


font-size:20px;


font-weight:bold;


text-decoration:none;


transition:.5s;


}



.jj-book-button:hover{


transform:

scale(1.1);


box-shadow:

0 0 40px #25D366;


color:white;


}

......................................................


/*========================================
 JJ SAFARI FINAL COLOR OVERRIDE FIX
========================================*/


/* Remove unwanted white backgrounds */

.jj-hero,
.jj-story-section,
.jj-adventures,
.jj-journey,
.jj-conservation-new,
.jj-final-booking-new{

    background-color:#111 !important;

}


/* Make all main text visible */

.jj-story-glass,
.adventure-glass,
.journey-glass,
.conservation-glass,
.booking-final-glass{

    color:white !important;

}



/* Headings */

.jj-story-glass h2,
.adventure-title h2,
.journey-heading h2,
.conservation-glass h2,
.booking-final-glass h2{

    color:white !important;

}



/* Paragraph visibility */

.jj-story-glass p,
.adventure-title p,
.adventure-glass p,
.journey-glass p,
.conservation-glass p,
.booking-final-glass p{

    color:#eeeeee !important;

}



/* Bootstrap image backgrounds fix */

section{

    position:relative;

}



/* Make glass panels stay above overlays */

.jj-story-glass,
.adventure-card,
.journey-glass,
.conservation-glass,
.booking-final-glass{

    position:relative;

    z-index:5;

}



/* Fix old Bootstrap text colors */

.text-dark{

    color:white !important;

}


/* Remove faded white boxes */

.bg-faded{

    background:rgba(255,255,255,.12) !important;

    color:white !important;

}

..........................................................


/*====================================
 JJ SAFARI PREMIUM FOOTER
=====================================*/


.jj-footer{


position:relative;

padding:100px 0 40px;

background:

linear-gradient(

rgba(0,0,0,.85),

rgba(0,0,0,.95)

),

url("../img/mn6.jpeg");

background-size:cover;

background-position:center;

color:white;

overflow:hidden;


}




.jj-footer::before{


content:"";


position:absolute;

inset:0;


background:

radial-gradient(

circle,

rgba(212,175,55,.15),

transparent 60%

);


}




.jj-footer .container{


position:relative;

z-index:2;


}







.footer-box{


height:100%;

padding:35px;


background:

rgba(255,255,255,.10);


border-radius:30px;


backdrop-filter:blur(15px);


border:

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


transition:.5s;


}




.footer-box:hover{


transform:

translateY(-12px);


background:

rgba(212,175,55,.15);


}




.footer-box h3{


font-size:40px;

font-weight:900;

color:#d4af37;


}




.footer-box h4{


font-size:28px;

color:#d4af37;


}





.footer-box p{


color:#eee;

line-height:1.9;

font-size:17px;


}







.footer-book-btn{


display:inline-block;

margin-top:20px;

padding:15px 35px;

border-radius:50px;

background:#d4af37;

color:white;

text-decoration:none;

font-weight:bold;

transition:.5s;


}



.footer-book-btn:hover{


transform:scale(1.08);

color:white;

box-shadow:

0 0 35px #d4af37;


}





/* SOCIAL ICONS */


.jj-social{


display:flex;

gap:20px;

margin-top:25px;


}



.jj-social a{


width:55px;

height:55px;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


font-size:25px;


color:white;


background:

rgba(255,255,255,.15);


border:

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


transition:.5s;


}



.jj-social a:hover{


transform:

translateY(-10px)
rotate(360deg);


background:#d4af37;


box-shadow:

0 0 30px #d4af37;


}




.jj-footer hr{


margin-top:60px;

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


}



.footer-copy{


color:#ddd;

margin-top:25px;


}

........................................................


/*====================================
 JJ SAFARI PREMIUM BOOKING SECTION
=====================================*/


.jj-final-booking-new{


position:relative;

padding:150px 0;

overflow:hidden;


}





.booking-background{


position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;


}




.booking-overlay{


position:absolute;

inset:0;


background:


linear-gradient(

rgba(0,0,0,.75),

rgba(0,0,0,.85)

);


}





.booking-final-glass{


position:relative;

z-index:3;


max-width:850px;


margin:auto;


padding:70px;


text-align:center;



background:


rgba(255,255,255,.12);



backdrop-filter:blur(20px);



border-radius:45px;



border:

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



color:white;



animation:

bookingFloat 4s infinite alternate;


}




@keyframes bookingFloat{


from{

transform:translateY(0);

}


to{

transform:translateY(-15px);

}


}




.booking-small-title{


display:inline-block;


padding:12px 30px;


border-radius:50px;


background:#d4af37;


font-weight:700;


letter-spacing:3px;


margin-bottom:25px;


}





.booking-final-glass h2{


font-size:60px;


font-weight:900;


}





.booking-final-glass p{


font-size:21px;


line-height:1.8;


color:#eee;


margin:30px 0;


}





.booking-actions{


display:flex;


justify-content:center;


gap:25px;


flex-wrap:wrap;


}




.jj-book-button,
.jj-contact-button{


padding:20px 45px;


border-radius:50px;


font-size:18px;


font-weight:700;


text-decoration:none;


transition:.5s;


}





.jj-book-button{


background:#25D366;

color:white;


}





.jj-contact-button{


border:2px solid white;


color:white;


}




.jj-book-button:hover{


transform:

scale(1.1);


box-shadow:

0 0 45px #25D366;


color:white;


}




.jj-contact-button:hover{


background:white;


color:#111;


transform:

translateY(-8px);


}





@media(max-width:768px){


.booking-final-glass{


padding:40px 25px;


}



.booking-final-glass h2{


font-size:38px;


}


}

................................................


/*====================================
 JJ SAFARI PREMIUM BOOKING SECTION
=====================================*/


.jj-final-booking-new{


position:relative;

padding:150px 0;

overflow:hidden;


}





.booking-background{


position:absolute;

inset:0;

width:100%;

height:100%;

object-fit:cover;


}




.booking-overlay{


position:absolute;

inset:0;


background:


linear-gradient(

rgba(0,0,0,.75),

rgba(0,0,0,.85)

);


}





.booking-final-glass{


position:relative;

z-index:3;


max-width:850px;


margin:auto;


padding:70px;


text-align:center;



background:


rgba(255,255,255,.12);



backdrop-filter:blur(20px);



border-radius:45px;



border:

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



color:white;



animation:

bookingFloat 4s infinite alternate;


}




@keyframes bookingFloat{


from{

transform:translateY(0);

}


to{

transform:translateY(-15px);

}


}




.booking-small-title{


display:inline-block;


padding:12px 30px;


border-radius:50px;


background:#d4af37;


font-weight:700;


letter-spacing:3px;


margin-bottom:25px;


}





.booking-final-glass h2{


font-size:60px;


font-weight:900;


}





.booking-final-glass p{


font-size:21px;


line-height:1.8;


color:#eee;


margin:30px 0;


}





.booking-actions{


display:flex;


justify-content:center;


gap:25px;


flex-wrap:wrap;


}




.jj-book-button,
.jj-contact-button{


padding:20px 45px;


border-radius:50px;


font-size:18px;


font-weight:700;


text-decoration:none;


transition:.5s;


}





.jj-book-button{


background:#25D366;

color:white;


}





.jj-contact-button{


border:2px solid white;


color:white;


}




.jj-book-button:hover{


transform:

scale(1.1);


box-shadow:

0 0 45px #25D366;


color:white;


}




.jj-contact-button:hover{


background:white;


color:#111;


transform:

translateY(-8px);


}





@media(max-width:768px){


.booking-final-glass{


padding:40px 25px;


}



.booking-final-glass h2{


font-size:38px;


}


}


............................................


/*=========================================
 JJ STORY SECTION FINAL FIX
=========================================*/

.jj-story-section{

    position:relative;

    background:#1b1b1b !important;

    padding:130px 0;

    overflow:hidden;

}



/* Make sure everything stays above backgrounds */

.jj-story-section .container{

    position:relative;

    z-index:5;

}



/* Glass panel */

.jj-story-glass{

    position:relative;

    z-index:6;

    background:rgba(20,20,20,.78) !important;

    backdrop-filter:blur(18px);

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

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

    color:#fff !important;

}



/* Headings */

.jj-story-glass h2{

    color:#ffffff !important;

}



.jj-story-glass h5{

    color:#d4af37 !important;

}



/* Paragraphs */

.jj-story-glass p{

    color:#f2f2f2 !important;

}



/* Feature boxes */

.story-features div{

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

    color:#fff;

}



/* Feature titles */

.story-features h4{

    color:#ffffff !important;

}



/* Feature text */

.story-features span{

    color:#d4af37 !important;

}



/* Image */

.story-main-image{

    display:block;

    width:100%;

    border-radius:30px;

}



/* Tag */

.image-tag{

    background:#d4af37;

    color:#fff;

}

...................................


/*=====================================
 JJ ADVENTURE TITLE FIX
======================================*/

.jj-adventures{

    position:relative;
    background:#1b1b1b !important;
    overflow:hidden;

}

.adventure-title{

    position:relative;
    z-index:20;
    background:transparent !important;

}

.adventure-title h5{

    color:#d4af37 !important;
    background:transparent !important;

}

.adventure-title h2{

    color:#ffffff !important;
    background:transparent !important;

}

.adventure-title p{

    color:#eeeeee !important;
    background:transparent !important;

}

.jj-adventures .container{

    position:relative;
    z-index:10;

}


......................................................


/*====================================
 JJ ADVENTURE TITLE COLOR FIX
=====================================*/

.jj-adventures{

    padding:120px 0;

}


.adventure-title h5{

    color:#d4af37 !important;

}


.adventure-title h2{

    color:#111 !important;

}


.adventure-title p{

    color:#555 !important;

}


....................................................

/* =====================================
   JJ SAFARI DAY JOURNEY
===================================== */

.jj-journey{

    position:relative;
    background:#1b1b1b;
    padding:120px 0;
    overflow:hidden;

}



.journey-glass{

    background:rgba(20,20,20,.75);

    backdrop-filter:blur(15px);

    border-radius:25px;

    padding:25px;

}


.journey-glass h3{

    color:#d4af37;

}


.journey-glass p{

    color:#ffffff;

}

.............................................




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

.jj-intro-section{

    position:relative !important;
    z-index:5 !important;

}



.jj-intro-section .intro-text{

    background:rgba(20,20,20,.80) !important;

    backdrop-filter:blur(15px);

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

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

    color:white !important;

}



.jj-intro-section .section-heading-upper{

    display:block !important;

    color:#d4af37 !important;

}



.jj-intro-section .section-heading-lower{

    display:block !important;

    color:white !important;

}

............................................


/* =====================================
   JJ SAFARI GALLERY
===================================== */

.jj-gallery-section{
    padding:100px 0;
    background:#0b1411;
}

.gallery-title h2{
    color:#fff;
    font-size:2.8rem;
    font-weight:700;
}

.gallery-title p{
    color:#cfcfcf;
    margin-bottom:60px;
}

.gallery-card{
    position:relative;
    overflow:hidden;
    border-radius:20px;
    cursor:pointer;
    transition:.45s ease;
    box-shadow:0 15px 40px rgba(0,0,0,.35);
}

.gallery-card img{
    width:100%;
    height:320px;
    object-fit:cover;
    transition:.7s ease;
    display:block;
}

.gallery-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(to top,
    rgba(0,0,0,.9),
    rgba(0,0,0,.15));
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:25px;
    opacity:0;
    transition:.45s;
}

.gallery-overlay h3{
    color:#fff;
    font-size:1.5rem;
    margin-bottom:8px;
    transform:translateY(25px);
    transition:.45s;
}

.gallery-overlay span{
    color:#00d084;
    font-weight:600;
    transform:translateY(25px);
    transition:.55s;
}

/* Hover */

.gallery-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 60px rgba(0,0,0,.55);
}

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

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

.gallery-card:hover h3,
.gallery-card:hover span{
    transform:translateY(0);
}

/* Click Animation */

.gallery-card:active{
    transform:scale(.96);
}