/* =====================================
   GLOBAL WEBSITE STYLES
   Tour Operator Web Application
   ===================================== */

body {
    margin: 0;
    padding: 0;
    font-family: 'Raleway', sans-serif;
    background-color: #ffffff;
    color: #333;
}

html {
    scroll-behavior: smooth;
}


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

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

.site-heading {
    margin-top: 80px;
    margin-bottom: 50px;
    text-transform: uppercase;
}


.site-heading-upper {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #d4a017;
}


.site-heading-lower {
    display: block;
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 5px;
    color: #2f5d34;
}


/* Intro Section */

.page-section {
    padding: 5rem 0;
}


.intro {
    position: relative;
    display: flex;
    align-items: center;
}


.intro-img {
    width: 60%;
    position: relative;
    z-index: 1;
    box-shadow: 0 15px 35px rgba(0,0,0,0.25);
}


.intro-text {
    width: 55%;
    margin-left: -10%;
    z-index: 2;
    background-color: white;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}


.site-heading {
    margin-top: 80px;
    margin-bottom: 50px;
    text-transform: uppercase;
}


.site-heading-upper {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 3px;
    color: #d4a017;
}


.site-heading-lower {
    display: block;
    font-size: 4rem;
    font-weight: 900;
    letter-spacing: 5px;
    color: #2f5d34;
}


/* Button */

.btn-primary {
    background-color: #2f5d34;
    border-color: #2f5d34;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}


.btn-primary:hover {
    background-color: #d4a017;
    border-color: #d4a017;
    transform: translateY(-3px);
}


/* Mobile Responsive */

@media (max-width: 991px) {


    .site-heading-lower {
        font-size: 2.5rem;
    }


    .intro {
        display: block;
    }


    .intro-img {
        width: 100%;
    }


    .intro-text {
        width: 100%;
        margin-left: 0;
        margin-top: -20px;
    }


}


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

/* =====================================
   JJ SAFARI INTRO SECTION BACKGROUND
===================================== */

.jj-intro-section {

    background: linear-gradient(
        120deg,
        #e8dfc8,
        #d4a017,
        #2f5d34
    );

    background-size: 300% 300%;

    animation: safariGradient 15s ease infinite;

    padding: 90px 0;

}


@keyframes safariGradient {

    0% {
        background-position: 0% 50%;
    }


    50% {
        background-position: 100% 50%;
    }


    100% {
        background-position: 0% 50%;
    }

}


/* Heading inside section */

.jj-intro-section .site-heading {
    color: #2f5d34;
}


/* Image styling */

.jj-intro-section .intro-img {

    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.20);

}


/* Text card */

.jj-intro-section .intro-text {

    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.15);

}


/* Paragraph */

.jj-intro-section p {

    color: white;
    line-height: 1.8;
    font-size: 1.05rem;

}


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


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


.jj-story-section {

    padding:80px 0;

    background:#f8f5ef;

}



/* Image */


.story-image {

    width:100%;

    height:450px;

    object-fit:cover;

    transition:transform 0.8s ease;


}



.story-image:hover {

    transform:scale(1.05);

}



/* Text */


.story-content {

    padding:60px;

}



.story-content h1 {

    color:#2f5d34;

    font-size:2.8rem;

    font-weight:800;

}



.story-content hr {

    width:80px;

    border:3px solid #d4a017;

    opacity:1;

}



.story-content p {

    color:#555;

    line-height:1.9;

    font-size:1.1rem;

}



/* Button */


.story-content .btn-success {

    margin-top:20px;

    border-radius:30px;

    padding:14px 35px;

    background:#2f5d34;

    border:none;

    transition:.3s;

}



.story-content .btn-success:hover {

    background:#d4a017;

    transform:translateY(-5px);

}



/* Mobile */


@media(max-width:991px){


    .story-content {

        padding:30px;

    }


    .story-image {

        height:300px;

    }


}


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

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


.jj-story-section {

    padding:100px 0;
    background:#f8f5ef;

}



.jj-story-row {

    display:flex;
    align-items:center;

}


/* IMAGE LEFT */

.story-image-col {

    order:1;

}



.story-image {

    width:100%;

    height:450px;

    object-fit:cover;

    border-radius:25px;

    box-shadow:
    0 20px 40px rgba(0,0,0,0.2);

    transition:.8s ease;

}



.story-image:hover {

    transform:scale(1.05);

}



/* TEXT RIGHT */

.story-content {

    order:2;

    padding:60px;

}



.story-content h1 {

    color:#2f5d34;

    font-size:3rem;

    font-weight:800;

}



.typing-text {

    color:#d4a017;

    font-family:'Indie Flower', cursive;

    font-size:2.2rem;

    min-height:60px;

}



.story-content p {

    color:#555;

    line-height:1.9;

    font-size:1.1rem;

}



.story-content .btn-success {

    background:#2f5d34;

    border:none;

    border-radius:30px;

    padding:14px 40px;

}



/* MOBILE */

@media(max-width:991px){


    .jj-story-row{

        display:block;

    }


    .story-content{

        padding:30px 10px;

        text-align:center;

    }


}

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


/* =====================================
   JJ SAFARI HERO CAROUSEL
===================================== */


.jj-hero-carousel {

    overflow:hidden;

}



.hero-image {

    height:90vh;

    object-fit:cover;

    animation:safariZoom 8s ease infinite alternate;

}



/* Dark overlay effect */

.carousel-item::before {

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:
    rgba(0,0,0,0.45);

}



/* Zoom Animation */


@keyframes safariZoom {


    from {

        transform:scale(1);

    }


    to {

        transform:scale(1.1);

    }


}



/* Caption */


.carousel-caption {


    bottom:25%;

    z-index:2;

}



.carousel-caption h1 {


    font-size:4rem;

    font-weight:900;

    text-transform:uppercase;

}



.carousel-caption p {


    font-size:1.3rem;

}



.carousel-caption .btn-success {


    background:#2f5d34;

    border:none;

    border-radius:30px;

    padding:15px 40px;

}



.carousel-caption .btn-success:hover {


    background:#d4a017;

}



/* Mobile */

@media(max-width:768px){


.hero-image{

height:70vh;

}


.carousel-caption h1{

font-size:2rem;

}


}




.typing-text::after {

    content:"|";

    animation: blink 0.7s infinite;

    color:#d4a017;

}


@keyframes blink {

    50% {

        opacity:0;

    }

}




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


.jj-gallery-section{

padding:100px 0;

background:darkgrey;

}



.gallery-title h2{

font-size:3rem;
font-weight:800;
color:black;

}



.gallery-title p{

color:black;

}





.gallery-card{

position:relative;

overflow:hidden;

border-radius:25px;

cursor:pointer;

box-shadow:
0 20px 40px rgba(0,0,0,.2);

}



.gallery-card img{

height:350px;

width:100%;

object-fit:cover;

transition:1s ease;

}



.gallery-card:hover img{

transform:scale(1.15);

}




.gallery-overlay{

position:absolute;

bottom:0;

left:0;

width:100%;

padding:30px;

background:
linear-gradient(
transparent,
rgba(0,0,0,.8)
);


color:white;

transform:translateY(50px);

opacity:0;

transition:.5s;

}



.gallery-card:hover .gallery-overlay{

transform:translateY(0);

opacity:1;

}




.gallery-overlay h3{

font-size:1.8rem;

}


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


/* =====================================
   JJ SAFARI HERO TYPING HEADING
===================================== */


.site-heading-upper,
.site-heading-lower {

    display:block;

}


.typing-upper {

    color:#d4a017;

    font-size:1.6rem;

    font-weight:700;

    letter-spacing:3px;

}



.typing-lower {

    color:#2f5d34;

    font-size:4rem;

    font-weight:900;

    letter-spacing:5px;

}



/* blinking cursor */

.typing-upper::after,
.typing-lower::after {


    content:"|";

    animation:cursorBlink .7s infinite;

    color:#d4a017;


}



@keyframes cursorBlink {


    50%{

        opacity:0;

    }

}



@media(max-width:991px){


.typing-lower{

font-size:2.5rem;

}


}
....


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


/* =====================================
 JJ SAFARI PROMISE SECTION
===================================== */


.jj-promise-section{

padding:100px 0;

background:#888;

}



.jj-title h2{

font-size:3rem;

font-weight:900;

color:black;

}



.promise-title p{

color:black;

}




/* Images */


.promise-gallery img{


display:block;

width:100%;

height:180px;

object-fit:cover;

border-radius:20px;

margin-bottom:25px;


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


animation:
floating 4s infinite ease-in-out;


}



.promise-gallery img:nth-child(2){

animation-delay:1s;

}


.promise-gallery img:nth-child(3){

animation-delay:2s;

}



@keyframes floating{


50%{

transform:translateY(-12px);

}


}




/* Animated Safari Route */


.promise-route{

width:100%;

height:120px;

position:relative;

margin:40px 0;

}




.route-line{

position:absolute;

top:50%;

left:0;

width:100%;

height:4px;


background:

repeating-linear-gradient(
90deg,
#d4a017 0,
#d4a017 12px,
transparent 12px,
transparent 25px
);


animation:moveRoute 3s linear infinite;


}




@keyframes moveRoute{


from{

background-position:0 0;

}


to{

background-position:100px 0;

}


}




.route-dot{


position:absolute;

top:calc(50% - 15px);

width:30px;

height:30px;

background:#2f5d34;

border-radius:50%;

border:5px solid white;


box-shadow:
0 0 20px rgba(212,160,23,.8);


animation:routePulse 2s infinite;


}





.dot1{

left:5%;

}


.dot2{

left:50%;

animation-delay:.5s;

}



.dot3{

right:5%;

animation-delay:1s;

}




@keyframes routePulse{


50%{

transform:scale(1.4);

box-shadow:
0 0 25px #d4a017;

}


}

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


/* =====================================
 JJ SAFARI CALL OF THE WILD SECTION
===================================== */


.wild-section{


position:relative;

padding:120px 0;

.wild-section{


position:relative;

padding:120px 0;

overflow:hidden;


}

overflow:hidden;


}

.wild-background{


position:absolute;

width:100%;

height:100%;

object-fit:cover;

top:0;

left:0;

z-index:0;


animation:wildZoom 15s infinite alternate;


}



@keyframes wildZoom{


from{

transform:scale(1);

}


to{

transform:scale(1.12);

}


}





.wild-overlay{


position:absolute;

top:0;

left:0;

width:100%;

height:100%;


background:

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


z-index:1;


}

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

/* =====================================
   FIX JJ SAFARI WILD SECTION VISIBILITY
===================================== */


.wild-content h1,
.wild-content h2,
.wild-content p {

    color: white;

}



.wild-content .wild-typing {

    color: #d4a017;

}



.wild-content .stat-box p {

    color: white;

}



.wild-content .stat-box h2 {

    color: #d4a017;

}





.wild-overlay{


position:absolute;

width:100%;

height:100%;

top:0;

left:0;


background:

radial-gradient(
circle,
rgba(212,160,23,.25),
transparent 60%
);


animation:glowMove 6s infinite alternate;


}



@keyframes glowMove{


from{

transform:scale(1);

}


to{

transform:scale(1.2);

}


}




.wild-content{


position:relative;

z-index:2;


color:white;


}





.wild-content h1{


font-size:4rem;

font-weight:900;

text-transform:uppercase;

letter-spacing:5px;


}





.wild-typing{


font-family:'Indie Flower', cursive;

font-size:2.5rem;

color:#d4a017;

min-height:60px;


}





.wild-content p{


max-width:750px;

margin:auto;

font-size:1.2rem;

line-height:2;


}




/* Statistics */


.wild-stats{


margin-top:60px;


}



.stat-box{


padding:30px;

border-radius:20px;


background:

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


backdrop-filter:blur(10px);


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


transition:.5s;


}



.stat-box:hover{


transform:translateY(-15px);


background:

rgba(212,160,23,.2);


}



.stat-box h2{


font-size:3rem;

color:#d4a017;


}





/* Buttons */


.wild-buttons{


margin-top:50px;


}



.wild-buttons .btn{


border-radius:30px;

padding:15px 40px;

margin:10px;


}


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





/* Text */


.promise-content{

padding:50px;

}



.promise-content h2{


font-size:2.7rem;

font-weight:800;

color:#2f5d34;


}



.promise-content p{

font-size:1.1rem;

line-height:1.8;

color:#555;


}



.promise-item{


margin:20px 0;

font-weight:600;

color:#444;


}


.promise-item i{


color:#d4a017;

margin-right:15px;


}



.promise-content .btn-success{


border-radius:30px;

padding:15px 40px;

background:#2f5d34;

border:none;


}

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

/* =====================================
   JJ SAFARI WILD SECTION FINAL FIX
===================================== */

.wild-section {

    position: relative;
    min-height: 650px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background-color: black;

}



.wild-background {

    position: absolute !important;

    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 0;

}



.wild-overlay {

    position: absolute !important;

    top: 0;
    left: 0;

    width:100%;
    height:100%;

    background: rgba(0,0,0,0.45);

    z-index:1;

}



.wild-content {

    position: relative;

    z-index:2;

    color:white !important;

}



.wild-content h1 {

    color:white !important;

}



.wild-content p {

    color:white !important;

}



.wild-content h2 {

    color:#d4a017 !important;

}



.stat-box {

    background:rgba(255,255,255,0.12) !important;

    color:white;

}



.stat-box h2 {

    color:#d4a017 !important;

}



.stat-box p {

    color:white !important;

}

.wild-section .container {

    position:relative;

    z-index:3;

}


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


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

.jj-story-section{

padding:100px 0;

background:#f8f5ef;

overflow:hidden;

}


/* C Shape */

.jj-c-gallery{

display:flex;

flex-direction:column;

align-items:flex-start;

gap:25px;

}


/* Images */

.c-img{

object-fit:cover;

border-radius:20px;

box-shadow:0 20px 40px rgba(0,0,0,.18);

transition:.5s;

cursor:pointer;

}


/* Top */

.top-img{

width:320px;

height:180px;

animation:floatTop 5s infinite ease-in-out;

}


/* Middle */

.middle-img{

width:170px;

height:170px;

animation:floatMiddle 6s infinite ease-in-out;

}


/* Bottom */

.bottom-img{

width:320px;

height:180px;

animation:floatBottom 5s infinite ease-in-out;

}


/* Hover */

.c-img:hover{

transform:scale(1.08);

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

}


/* Floating */

@keyframes floatTop{

50%{

transform:translateX(12px);

}

}


@keyframes floatMiddle{

50%{

transform:translateY(-10px);

}

}


@keyframes floatBottom{

50%{

transform:translateX(12px);

}

}



/* RIGHT CONTENT */

.story-content{

padding-left:40px;

}


.story-small{

color:#d4a017;

font-weight:700;

letter-spacing:3px;

}


.story-content h1{

font-size:3rem;

font-weight:900;

color:#2f5d34;

margin:20px 0;

}


.story-typing{

height:45px;

color:#d4a017;

font-weight:700;

margin-bottom:20px;

}


.story-content p{

font-size:1.1rem;

line-height:1.9;

color:#555;

}


.story-list{

margin-top:25px;

}


.story-list div{

padding:10px 0;

font-size:1.1rem;

transition:.4s;

}


.story-list div:hover{

transform:translateX(15px);

color:#2f5d34;

}


.story-content .btn{

padding:14px 35px;

border-radius:35px;

}


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


/* =====================================
   JJ SAFARI C GALLERY SIDE LAYOUT FIX
===================================== */


.jj-story-section .row {

    display:flex;
    align-items:center;

}



.jj-c-gallery {

    display:flex;
    flex-direction:column;
    justify-content:center;

}



.story-content {

    padding-left:60px;

}



/* Mobile adjustment */

@media(max-width:991px){

    .jj-story-section .row{

        display:block;

    }


    .story-content{

        padding-left:0;
        margin-top:40px;

    }

}


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



/* =====================================
   FORCE JJ STORY SIDE BY SIDE LAYOUT
===================================== */


.jj-story-section .row {

    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;

}



.jj-story-section .col-lg-5 {

    width:41.666667%;

}



.jj-story-section .col-lg-7 {

    width:58.333333%;

}



.jj-c-gallery {

    display:flex;

    flex-direction:column;

}



.story-content {

    padding-left:60px;

}



/* Mobile */

@media(max-width:991px){

    .jj-story-section .row {

        display:block !important;

    }


    .jj-story-section .col-lg-5,
    .jj-story-section .col-lg-7 {

        width:100%;

    }


    .story-content {

        padding-left:0;

        margin-top:40px;

    }

}

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

/* =====================================
   JJ SAFARI TYPING SECTION
===================================== */


.jj-typing-section{

padding:80px 0;

background:#f8f5ef;

}



.jj-typing-title{

font-size:3rem;

font-weight:900;

color:#2f5d34;

}



.typing-wrapper{

color:#d4a017;

}



.typing-word{

border-right:3px solid #d4a017;

padding-right:5px;

animation:cursor .7s infinite;

}



@keyframes cursor{

50%{

border-color:transparent;

}

}

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


/* =====================================
   JJ SAFARI GUIDE PROFILE SECTION
===================================== */


.jj-guide-section {

    padding:100px 0;

    background:#f8f5ef;

}





/* MAIN CARD */

.guide-card {

    background:white;

    border-radius:30px;

    overflow:hidden;

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

    transition:.5s;

    animation:guideFloat 5s infinite ease-in-out;

}



.guide-card:hover {

    transform:translateY(-15px);

    box-shadow:
    0 35px 80px rgba(0,0,0,.30);

}





@keyframes guideFloat {


50% {

    transform:translateY(-12px);

}


}





/* IMAGE AREA */


.guide-main-image {

    position:relative;

    height:320px;

    overflow:hidden;

}





.guide-main-image img {


    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}




.guide-card:hover .guide-main-image img {


    transform:scale(1.12);

}





/* CAMERA BUTTON */


.gallery-button {


    position:absolute;

    right:25px;

    bottom:-30px;


    width:70px;

    height:70px;


    border-radius:50%;


    border:none;


    background:#2f5d34;


    color:white;


    font-size:25px;


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


    transition:.4s;


}





.gallery-button:hover {


    background:#d4a017;

    transform:scale(1.15)
    rotate(10deg);


}





/* CONTENT */


.guide-body {


    padding:45px 35px 35px;

    text-align:center;


}





.guide-body h4 {


    font-size:2rem;

    font-weight:900;

    color:#2f5d34;

    margin-bottom:10px;


}





.guide-role {


    display:block;

    color:#d4a017;

    font-weight:700;

    letter-spacing:1px;


}





.guide-body p {


    margin-top:20px;


    color:#555;


    line-height:1.8;


    font-size:1.05rem;


}







/* FEATURES */


.guide-features {


    margin:25px 0;


}



.guide-features div {


    padding:10px;

    color:#444;

    font-weight:600;


}





.guide-features i {


    color:#d4a017;

    margin-right:10px;


}







/* WHATSAPP BUTTON */


.whatsapp-btn {


    background:#128C7E;

    color:white;

    border-radius:40px;


    padding:14px 35px;


    font-weight:700;


    transition:.4s;


}



.whatsapp-btn i {


    font-size:22px;

    margin-right:10px;


}





.whatsapp-btn:hover {


    background:#25D366;

    color:white;

    transform:translateY(-5px);


}





/* MODAL IMAGE */

.modal-content {


    border-radius:25px;

    overflow:hidden;


}



.modal-header h5 {


    color:#2f5d34;

    font-weight:800;


}



.carousel-item img {


    height:500px;

    object-fit:cover;


}





/* MOBILE */

@media(max-width:768px){


.guide-card{

    margin:20px;

}


.guide-body{

    padding:35px 20px;

}


.carousel-item img{

    height:300px;

}


}

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


/* =================================
JJ EXPERIENCE SECTION
================================= */


.jj-experience-section{

padding:100px 0;

background:#ffffff;

}




.experience-image img{

border-radius:30px;

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

transition:.6s;

}



.experience-image img:hover{

transform:scale(1.05);

}




.jj-experience-section h1{

font-size:3rem;

font-weight:900;

color:#2f5d34;

}




.rating-stars{

margin:15px 0;

}




.jj-experience-section h2{

color:#d4a017;

font-weight:800;

margin-bottom:20px;

}




.jj-experience-section p{

font-size:1.1rem;

line-height:1.9;

color:#555;

}




.experience-list{

padding:0;

margin-top:25px;

list-style:none;

}



.experience-list li{

padding:12px 0;

font-size:1.1rem;

font-weight:600;

color:#333;

transition:.4s;

}



.experience-list li:hover{

transform:translateX(15px);

color:#2f5d34;

}



.experience-list i{

color:#d4a017;

margin-right:15px;

}



.jj-experience-section .btn{

margin-top:20px;

padding:14px 35px;

border-radius:40px;

}

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


/* ======================================
JJ GALLERY STORY
====================================== */


.jj-gallery-story{

padding:100px 0;

background:#f8f5ef;

}





/* TOP GALLERY */


.gallery-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

margin-bottom:80px;

}



.gallery-item{

height:260px;

overflow:hidden;

border-radius:25px;

position:relative;

box-shadow:
0 20px 40px rgba(0,0,0,.2);

}



.gallery-item img{

width:100%;

height:100%;

object-fit:cover;

transition:.6s;

}



.gallery-item:hover img{

transform:scale(1.15);

}





.gallery-overlay{


position:absolute;

bottom:0;

left:0;

width:100%;

padding:20px;

background:
linear-gradient(
transparent,
rgba(0,0,0,.8)
);


color:white;

font-size:1.3rem;

font-weight:800;


}





/* STORY AREA */


.story-trip{

display:grid;

grid-template-columns:1fr 1.2fr 1fr;

align-items:center;

gap:35px;

}





.story-image img{

width:100%;

height:420px;

object-fit:cover;

border-radius:30px;

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

transition:.5s;

}



.story-image img:hover{

transform:scale(1.05);

}




.story-middle{

text-align:center;

padding:30px;

}



.story-middle h2{

font-size:3rem;

font-weight:900;

color:#2f5d34;

}



.story-middle p{

font-size:1.1rem;

line-height:1.9;

color:#555;

}




.story-middle .btn{

padding:14px 35px;

border-radius:40px;

}





/* MOBILE */


@media(max-width:992px){


.gallery-grid{

grid-template-columns:1fr;

}



.story-trip{

grid-template-columns:1fr;

}


}


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


/* =================================
JJ BOOKING SECTION
================================= */


.jj-booking-section{


padding:100px 0;

background:
linear-gradient(
rgba(0,0,0,.75),
rgba(0,0,0,.75)
),
url("../img/se.jpg");

background-size:cover;

background-position:center;


}





.booking-box{


background:white;

padding:50px;

border-radius:30px;

box-shadow:
0 30px 60px rgba(0,0,0,.3);


}



.booking-box h1{


text-align:center;

font-size:3rem;

font-weight:900;

color:#2f5d34;


}



.booking-box p{

text-align:center;

color:#666;

margin-bottom:40px;

}




.booking-box input,
.booking-box select,
.booking-box textarea{


width:100%;

padding:15px;

margin-bottom:20px;

border-radius:15px;

border:1px solid #ddd;

font-size:1rem;


}




.booking-box textarea{


height:150px;

resize:none;


}



.booking-box button{


background:#2f5d34;

color:white;

border:none;

padding:16px 45px;

border-radius:40px;

font-weight:700;

transition:.4s;


}




.booking-box button:hover{


background:#d4a017;

transform:translateY(-5px);


}


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


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


.jj-footer{


position:relative;

padding:90px 0 30px;

background:

linear-gradient(
rgba(0,0,0,.85),
rgba(0,0,0,.9)
),

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


background-size:cover;

background-position:center;

color:white;

overflow:hidden;


}





.jj-footer:before{


content:"";

position:absolute;

width:200px;

height:200px;

background:#d4a017;

border-radius:50%;

filter:blur(100px);

top:-50px;

right:-50px;

animation:footerGlow 6s infinite alternate;


}




@keyframes footerGlow{


from{

transform:translateY(0);

}


to{

transform:translateY(60px);

}


}





.footer-logo{


font-size:3rem;

font-weight:900;

color:#d4a017;


}



.jj-footer p{


color:#ddd;

line-height:1.8;

}



.jj-footer h3{


color:#d4a017;

font-weight:800;

margin-bottom:25px;


}




.jj-footer ul{


list-style:none;

padding:0;


}



.jj-footer li{


margin-bottom:12px;

color:#ddd;

transition:.4s;


}



.jj-footer li:hover{


transform:translateX(10px);

color:#d4a017;


}




.jj-footer a{


color:#ddd;

text-decoration:none;

}



.jj-footer a:hover{


color:#d4a017;


}




.footer-btn{


display:inline-block;

background:#2f5d34;

padding:14px 35px;

border-radius:40px;

color:white!important;

margin-top:20px;

transition:.4s;


}



.footer-btn:hover{


background:#d4a017;

transform:translateY(-5px);


}





.footer-bottom{


display:flex;

justify-content:space-between;

align-items:center;


}



.social-icons a{


font-size:25px;

margin-left:20px;

transition:.4s;


}



.social-icons a:hover{


transform:translateY(-8px);

color:#d4a017;


}





@media(max-width:768px){


.footer-bottom{

flex-direction:column;

gap:20px;

}


}


.....................................
/* =================================
JJ SAFARI GLASS ORBIT DESIGN
================================= */


.jj-orbit-section{

padding:120px 0;

background:
linear-gradient(
135deg,
#f8f5ef,
#ffffff
);

overflow:hidden;

}





.orbit-wrapper{

position:relative;

min-height:650px;

display:flex;

align-items:center;

justify-content:center;

}





/* CENTER IMAGE */

.orbit-image{

position:absolute;

width:230px;

height:230px;

z-index:5;

}



.orbit-image img{


width:100%;

height:100%;

object-fit:cover;


border-radius:50%;


border:8px solid rgba(255,255,255,.8);


box-shadow:

0 0 40px rgba(212,160,23,.5),
0 25px 60px rgba(0,0,0,.3);


transition:.6s;


}



.orbit-image:hover img{


transform:scale(1.1);


box-shadow:

0 0 70px rgba(47,93,52,.8);


}







/* GLASS ROTATING RING */


.orbit-ring{


position:absolute;


width:540px;

height:540px;


border-radius:50%;


animation:
rotateOrbit 30s linear infinite;


}




@keyframes rotateOrbit{


from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}


}








/* GLASS CARDS */


.orbit-item{


position:absolute;


padding:18px 30px;


border-radius:50px;



background:

rgba(255,255,255,.25);



backdrop-filter:

blur(15px);



-webkit-backdrop-filter:

blur(15px);



border:

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



box-shadow:

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



font-weight:800;


color:#2f5d34;



transition:.5s;


}





.orbit-item i{


color:#d4a017;

font-size:20px;

margin-right:10px;


}





/* HOVER EFFECT */


.orbit-item:hover{


transform:

scale(1.15)
translateY(-10px);



background:

rgba(47,93,52,.75);



color:white;



box-shadow:


0 0 35px rgba(212,160,23,.8);



cursor:pointer;


}





.item1{

top:-20px;

left:180px;


}



.item2{


right:-70px;

top:230px;


}



.item3{


bottom:-20px;

left:160px;


}



.item4{


left:-80px;

top:230px;


}







/* CONTENT GLASS PANEL */


.orbit-content{


position:absolute;


right:0;


width:38%;



padding:40px;



background:

rgba(255,255,255,.35);



backdrop-filter:

blur(20px);



border-radius:30px;



border:

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



box-shadow:

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



}





.orbit-content h1{


font-size:3rem;

font-weight:900;

color:#2f5d34;


}



.orbit-content p{


font-size:1.1rem;

line-height:1.9;

color:#555;


}







.orbit-content .btn{


border-radius:40px;

padding:15px 35px;

background:#2f5d34;

border:none;

transition:.4s;


}



.orbit-content .btn:hover{


background:#d4a017;


transform:translateY(-5px);


}







@media(max-width:992px){


.orbit-content{


position:relative;

width:90%;

right:auto;

margin-top:600px;


}


.orbit-ring{


width:420px;

height:420px;


}


}



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



/* =================================
   JJ SAFARI EXPERIENCE GLASS DESIGN
================================= */


.jj-experience-section {

    padding:100px 0;
    background:linear-gradient(
        135deg,
        #f8f5ef,
        #dfe8d5
    );

}


/* IMAGE AREA */

.experience-image {

    width:320px;
    height:320px;
    margin:auto;
    border-radius:50%;
    overflow:hidden;

    position:relative;

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

    transition:.6s ease;

}


/* rotating golden ring */

.experience-image::before {

    content:"";

    position:absolute;

    inset:-8px;

    border-radius:50%;

    border:3px dashed #d4a017;

    animation:rotateCircle 12s linear infinite;

}



.experience-image img {

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:50%;

    transition:.6s ease;

}




.experience-image:hover {

    transform:scale(1.08);

}



.experience-image:hover img {

    transform:scale(1.15);

}



/* CLOCKWISE TEXT EFFECT */







@keyframes rotateCircle {


from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}

}




@keyframes textRotate {


from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}

}





/* RIGHT CONTENT GLASS */

.jj-experience-section .col-sm-12.col-md-6.col-xl-5 {


background:

rgba(255,255,255,0.35);


backdrop-filter:blur(15px);


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


padding:40px;


border-radius:30px;


box-shadow:

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


transition:.5s;


}




.jj-experience-section .col-sm-12.col-md-6.col-xl-5:hover {


transform:translateY(-10px);


box-shadow:

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


}





.jj-experience-section h1 {


font-size:42px;

font-weight:900;

color:#2f5d34;


}




.jj-experience-section h2 {


color:#d4a017;

font-weight:800;


}



.experience-list {


list-style:none;

padding:0;


}



.experience-list li {


margin:15px 0;

font-size:18px;

font-weight:600;

color:#444;


transition:.3s;


}



.experience-list li:hover {


transform:translateX(15px);

color:#2f5d34;


}



.experience-list i {


color:#d4a017;

margin-right:12px;


}



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


/* =====================================
   JJ STORY IMAGE LEFT WORDS RIGHT
   WITH ANIMATED DOTTED SEPARATOR
===================================== */


.jj-story-row {

    display:flex;
    align-items:center;
    position:relative;

}



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




/* ==========================
   IMAGE LEFT
========================== */


.story-image-col {

    display:flex;

    justify-content:center;

    padding-right:50px;

}



.story-image {

    width:100%;

    max-width:520px;

    border-radius:25px;


    box-shadow:

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


    transition:.5s ease;


}



.story-image:hover {

    transform:scale(1.05);

    box-shadow:

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

}





/* ==========================
   WORDS RIGHT
========================== */


.story-content {


    padding-left:70px;


}



.story-content h1 {


    font-size:45px;

    font-weight:900;

    color:#2f5d34;


}



.story-content h3 {


    color:#d4a017;

    font-weight:700;

    min-height:45px;


}




.story-content p {


    font-size:18px;

    line-height:1.8;

    color:#555;


}




.story-content .btn-success {


    background:#2f5d34;

    border:none;

    padding:15px 35px;

    border-radius:30px;

    transition:.4s;


}



.story-content .btn-success:hover {


    background:#d4a017;

    transform:translateY(-5px);


}





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


@media(max-width:991px){


.jj-story-row {


    flex-direction:column;


}



.jj-story-row::before {


    display:none;


}



.story-image-col {


    padding-right:0;


}



.story-content {


    padding-left:0;

    margin-top:30px;

    text-align:center;


}



.story-content h1 {


    font-size:35px;


}


}


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


/* =====================================
   HERO LEFT FADE IMAGE
===================================== */

.hero-heading-background{

    position:relative;
    overflow:hidden;

}

/* Animated image */

.hero-heading-background::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:55%;
    height:100%;

    background:
        linear-gradient(
            to right,
            rgba(248,245,239,0) 0%,
            rgba(248,245,239,.35) 55%,
            rgba(248,245,239,.85) 80%,
            #f8f5ef 100%
        ),
        url("../img/z6.jpg");

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

    opacity:.22;

    animation:heroWildlife 18s ease-in-out infinite alternate;

    z-index:0;

}

/* Keep heading above image */

.hero-heading-background .site-heading{

    position:relative;
    z-index:2;

}

@keyframes heroWildlife{

    from{

        transform:scale(1);

        background-position:left center;

    }

    to{

        transform:scale(1.12);

        background-position:center center;

    }

}


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



/* =====================================
   JJ SAFARI HERO CINEMATIC BACKGROUND
===================================== */

.hero-heading-background{

    position:relative;

    overflow:hidden;

    min-height:320px;

}


/* Keep heading above everything */

.hero-heading-background .site-heading{

    position:relative;

    z-index:5;

}


/* Slides */

.hero-slide{

    position:absolute;

    top:0;

    left:0;

    width:55%;

    height:100%;

    opacity:0;

    z-index:1;

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    animation:

        heroFade 32s infinite,

        heroZoom 18s ease-in-out infinite alternate;

    -webkit-mask-image:
        linear-gradient(
            to right,
            black 45%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to right,
            black 45%,
            transparent 100%
        );

}


.slide1{

background-image:url("../img/se.jpg");

animation-delay:0s;

}

.slide2{

background-image:url("../img/tu67.jpeg");

animation-delay:8s;

}

.slide3{

background-image:url("../img/j8.jpeg");

animation-delay:16s;

}

.slide4{

background-image:url("../img/z5.jpg");

animation-delay:24s;

}

@keyframes heroFade{

0%{
opacity:0;
}

5%{
opacity:.22;
}

22%{
opacity:.22;
}

28%{
opacity:0;
}

100%{
opacity:0;
}

}

@keyframes heroZoom{

from{

transform:scale(1);

}

to{

transform:scale(1.15);

}

}

.................................................
/* =====================================
   JJ SAFARI GLASS CONTROL PANEL FINAL
===================================== */


/* Main wrapper */

.control-wrapper{

    position:relative;

    padding:40px !important;

    border-radius:30px;

    overflow:hidden;


    background:

    linear-gradient(
        135deg,
        #020617,
        #063b2b,
        #001510
    ) !important;


    box-shadow:

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

}



/* glowing effects */

.control-wrapper::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    top:-200px;

    right:-150px;


    background:

    radial-gradient(
        circle,
        rgba(0,255,150,.35),
        transparent 65%
    );


    filter:blur(50px);

    z-index:0;

}




.control-wrapper::after{

    content:"";

    position:absolute;

    width:400px;

    height:400px;

    bottom:-150px;

    left:-150px;


    background:

    radial-gradient(
        circle,
        rgba(0,170,255,.25),
        transparent 65%
    );


    filter:blur(50px);

    z-index:0;

}





/* =====================================
   GLASS CARD
===================================== */


.glass-card{


    position:relative;

    z-index:2;


    background:

    linear-gradient(
        135deg,
        rgba(255,255,255,.22),
        rgba(255,255,255,.08)
    ) !important;



    backdrop-filter:blur(25px);

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



    border-radius:25px !important;



    border:

    1px solid rgba(255,255,255,.35) !important;



    padding:40px !important;



    box-shadow:

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


}





/* =====================================
   TEXT VISIBILITY
===================================== */


.glass-card h1,
.glass-card h2,
.glass-card h3,
.glass-card h4,
.glass-card h5,
.glass-card p,
.glass-card label{


    color:white !important;


    text-shadow:

    0 3px 8px rgba(0,0,0,.9);


}





/* =====================================
   UPLOAD BOX
===================================== */


.upload-box{


    height:220px;


    border-radius:25px;



    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;



    background:

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



    border:

    2px dashed rgba(255,255,255,.6) !important;



    color:white;


    transition:.5s;


}




.upload-box:hover{


    transform:

    translateY(-10px)

    scale(1.03);



    background:

    rgba(0,255,150,.20) !important;



    box-shadow:

    0 0 35px #00ff99;


}





.upload-box i{


    font-size:60px;


    color:#00ff99;


    animation:

    floating 3s infinite;


}




@keyframes floating{


50%{

transform:translateY(-15px);

}


}





/* =====================================
   INPUTS
===================================== */


.modern-select,
.modern-input{


    width:100%;


    margin-bottom:20px;


    padding:15px;



    border-radius:15px;



    background:

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



    border:

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



    color:white !important;



    outline:none;


    transition:.4s;


}



.modern-select option{


    background:#001510;

    color:white;


}




.modern-select:hover,
.modern-input:hover{


    border-color:#00ff99;


    box-shadow:

    0 0 15px rgba(0,255,150,.5);


}





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


.modern-btn{


    width:100%;


    padding:15px;



    border:none;


    border-radius:30px;



    background:

    linear-gradient(
        45deg,
        #00ff99,
        #00ccff
    );



    color:#001;



    font-weight:bold;


    font-size:18px;


    cursor:pointer;


    transition:.4s;


}




.modern-btn:hover{


    transform:

    scale(1.05);



    box-shadow:

    0 0 30px #00ff99;


}




.modern-btn i{

    margin-left:10px;

}





/* =====================================
   SETTINGS
===================================== */


.settings-box{


    background:

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



    padding:25px;


    border-radius:20px;



    color:white;



    box-shadow:

    inset 0 0 20px rgba(255,255,255,.05);


}



.settings-box h5{


    margin-bottom:25px;


    color:#00ff99 !important;


}





/* =====================================
   SWITCHES
===================================== */


.switch{


    display:flex;


    align-items:center;


    gap:15px;


    margin:20px 0;



    cursor:pointer;


}



.switch input{


    display:none;


}



.switch span{


    width:55px;


    height:28px;



    background:#555;


    border-radius:50px;


    position:relative;


    transition:.4s;


}



.switch span:before{


    content:"";


    position:absolute;


    width:22px;


    height:22px;



    background:white;



    border-radius:50%;



    top:3px;



    left:4px;



    transition:.4s;


}





.switch input:checked + span{


    background:#00ff99;


}




.switch input:checked + span:before{


    transform:

    translateX(25px);


}





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


@media(max-width:768px){


    .glass-card{

        padding:20px !important;

    }



    .control-wrapper{

        padding:15px !important;

    }


}


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




/* ===================================
   JJ SAFARI PROMISE SECTION
=================================== */


.jj-promise-section{


padding:100px 0;


background:

linear-gradient(
135deg,
#04150f,
#06251b
);


overflow:hidden;


}




.promise-title h2{


color:white;

font-size:45px;

font-weight:800;


}



.promise-title p{

color:#ccc;

font-size:18px;

}





.promise-wrapper{


display:grid;


grid-template-columns:

1fr 100px 1fr;


align-items:center;


gap:30px;


margin-top:70px;


}





/* =========================
   IMAGE SIDE
========================= */


.promise-gallery{


position:relative;

height:450px;


}



.promise-img{


position:absolute;


width:280px;


height:350px;


object-fit:cover;


border-radius:25px;


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


box-shadow:

0 20px 40px rgba(0,0,0,.5);


transition:.5s;


}



.img-one{

left:0;

top:20px;

transform:rotate(-8deg);

}



.img-two{

left:100px;

top:50px;

z-index:2;

}



.img-three{

left:200px;

top:20px;

transform:rotate(8deg);

}



.promise-img:hover{


transform:

translateY(-20px)
scale(1.05);


z-index:5;


}





/* =========================
   ROUTE
========================= */


.promise-route{


height:450px;


position:relative;


display:flex;


justify-content:center;


}



.route-line{


width:5px;


height:100%;


background:

linear-gradient(
to bottom,
#00ff99,
#00cc66
);


border-radius:20px;


animation:

lineMove 3s infinite;


}




@keyframes lineMove{


50%{

opacity:.5;

}


}





.route-dot{


position:absolute;


width:55px;


height:55px;


background:#00ff99;


border-radius:50%;


display:flex;


align-items:center;


justify-content:center;


color:#003;


box-shadow:

0 0 25px #00ff99;


animation:

pulse 2s infinite;


}



.dot1{

top:30px;

}



.dot2{

top:190px;

}



.dot3{

bottom:30px;

}



@keyframes pulse{


50%{

transform:scale(1.2);

}


}





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


.promise-card{


background:

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


backdrop-filter:blur(20px);


padding:40px;


border-radius:30px;


border:

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


color:white;


}




.promise-card h2{


font-size:40px;


color:#00ff99;


}



.promise-item{


margin:20px 0;


font-size:18px;


display:flex;


gap:15px;


align-items:center;


}



.promise-item i{


color:#00ff99;


font-size:25px;


}




.promise-btn{


display:inline-block;


margin-top:20px;


padding:15px 30px;


border-radius:40px;


background:#00ff99;


color:#002;


font-weight:bold;


text-decoration:none;


transition:.4s;


}



.promise-btn:hover{


transform:translateY(-5px);


box-shadow:0 0 30px #00ff99;


}





/* MOBILE */

@media(max-width:992px){


.promise-wrapper{


grid-template-columns:1fr;


}



.promise-route{


display:none;

}


.promise-gallery{


margin:auto;

}



}


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


/* =====================================
   JJ SAFARI CINEMATIC EFFECTS
===================================== */


/* floating movement on safari images */

.promise-img{

    animation:

    safariFloat 6s ease-in-out infinite;

}



.img-two{

    animation-delay:1s;

}



.img-three{

    animation-delay:2s;

}




@keyframes safariFloat{


0%,100%{

    transform:translateY(0);

}


50%{

    transform:translateY(-18px);

}


}




/* =====================================
   JJ PROMISE CINEMATIC OVERLAY
===================================== */

.jj-promise-section{

    position:relative;
    overflow:hidden;

}


/* glowing atmosphere */

.jj-promise-section::before{

    content:"";

    position:absolute;

    inset:0;


    background:

    radial-gradient(
        circle at 20% 30%,
        rgba(0,255,150,.15),
        transparent 35%
    ),

    radial-gradient(
        circle at 80% 70%,
        rgba(255,180,50,.12),
        transparent 35%
    );


    pointer-events:none;

    z-index:0;

}



/* floating dust */

.jj-promise-section::after{

    content:"";

    position:absolute;

    width:6px;

    height:6px;


    left:20%;

    top:40%;


    background:white;

    border-radius:50%;

    opacity:.5;


    box-shadow:

    120px 80px rgba(255,255,255,.5),
    300px -50px rgba(255,255,255,.4),
    600px 120px rgba(255,255,255,.5),
    850px -100px rgba(255,255,255,.3),
    1000px 200px rgba(255,255,255,.4);


    animation:dustMove 15s linear infinite;


    z-index:1;

}



/* KEEP CONTENT ABOVE EFFECTS */

.jj-promise-section .container{

    position:relative;

    z-index:5;

}



@keyframes dustMove{

0%{

transform:translateY(0) translateX(0);

opacity:.3;

}


50%{

transform:translateY(-80px) translateX(40px);

opacity:.8;

}


100%{

transform:translateY(-160px) translateX(-20px);

opacity:.2;

}

}






/* glass card breathing effect */


.promise-card{


animation:

cardGlow 5s ease-in-out infinite;


}



@keyframes cardGlow{


50%{


box-shadow:

0 0 40px rgba(0,255,150,.25);


}


}






/* image hover cinematic zoom */


.promise-img:hover{


filter:

brightness(1.15)
contrast(1.1);



}




/* route animation upgrade */


.route-line{


background:

linear-gradient(

180deg,

transparent,

#00ff99,

transparent

);



background-size:

100% 200%;


animation:

routeFlow 3s linear infinite;


}



@keyframes routeFlow{


from{

background-position:

0 0;

}


to{

background-position:

0 200%;

}


}


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


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


.jj-promise-section{

padding:100px 0;

background:

linear-gradient(
135deg,
#02120d,
#063021
);

overflow:hidden;

}




.promise-title h2{

color:black;

font-size:45px;

font-weight:800;

}



.promise-title p{

color:#ccc;

}






.promise-wrapper{

display:grid;

grid-template-columns:

1fr 90px 1fr;

gap:40px;

align-items:center;

margin-top:70px;

}





/* LEFT GALLERY */


.promise-gallery{

display:flex;

flex-direction:column;

gap:25px;

}




.story-card{


height:220px;

border-radius:25px;

overflow:hidden;

position:relative;

cursor:pointer;


box-shadow:

0 20px 40px rgba(0,0,0,.5);


transition:.5s;


}



.story-card:hover{

transform:

translateX(20px)
scale(1.04);


}




.promise-img{


width:100%;

height:100%;

object-fit:cover;


transition:.8s;


}




.story-card:hover img{


transform:scale(1.15);


}





.story-overlay{


position:absolute;

inset:0;


background:

linear-gradient(
transparent,
rgba(0,0,0,.85)
);


display:flex;

flex-direction:column;

justify-content:end;

padding:25px;


color:white;


}



.story-overlay i{


font-size:35px;

color:#00ff99;


}




/* ROUTE */


.promise-route{


height:600px;

position:relative;

display:flex;

justify-content:center;

}



.route-line{


width:5px;

height:100%;


background:

linear-gradient(
transparent,
#00ff99,
transparent
);


animation:routeGlow 3s infinite;


}



@keyframes routeGlow{

50%{

opacity:.4;

}

}





.route-dot{


position:absolute;


width:55px;

height:55px;


background:#00ff99;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;


box-shadow:

0 0 30px #00ff99;


}



.dot1{

top:50px;

}


.dot2{

top:270px;

}


.dot3{

bottom:50px;

}





/* CONTENT */


.promise-card{


background:

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


backdrop-filter:blur(25px);


padding:40px;


border-radius:30px;


border:

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


color:white;


box-shadow:

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


}



.promise-card h2{

color:#00ff99;

font-size:40px;

}





.promise-item{


display:flex;

align-items:center;

gap:15px;

margin:20px 0;


}



.promise-item i{

color:#00ff99;

font-size:25px;

}




.promise-btn{


display:inline-block;

margin-top:20px;

padding:15px 35px;


border-radius:40px;


background:#00ff99;


color:#001;


font-weight:bold;


text-decoration:none;


}







/* POPUP */


.safari-modal{


display:none;


position:fixed;

inset:0;


background:

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


z-index:9999;


align-items:center;

justify-content:center;


}



.safari-popup{


width:450px;

max-width:90%;


padding:35px;


border-radius:30px;


background:

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


backdrop-filter:blur(25px);


color:white;

text-align:center;


}



.safari-popup img{


width:100%;

height:250px;

object-fit:cover;

border-radius:20px;


}




.close-popup{


font-size:40px;

cursor:pointer;

float:right;


}



.safari-popup button{


background:#00ff99;

border:none;

padding:12px 30px;

border-radius:30px;


}





@media(max-width:992px){


.promise-wrapper{

grid-template-columns:1fr;

}


.promise-route{

display:none;

}


}


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


/* =====================================
   JJ SAFARI FORM PLACEHOLDER FIX
===================================== */


.modern-input::placeholder{

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

    opacity:1;

}



.modern-input:focus::placeholder{

    color:#00ff99 !important;

}



/* textarea placeholder */

textarea.modern-input::placeholder{

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

}


input[type="date"]{

    color:white !important;

}


input[type="date"]::-webkit-calendar-picker-indicator{

    filter:invert(1);

}



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


/* ===================================
   JJ SAFARI HERO WELCOME POPUP
=================================== */


.hero-welcome-popup{


    position:absolute;


    right:6%;


    top:50%;


    transform:translateY(-50%);



    width:350px;



    padding:30px;



    background:

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



    backdrop-filter:blur(20px);


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



    border-radius:30px;



    border:

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



    color:white;



    box-shadow:

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



    animation:

    welcomeFloat 4s ease-in-out infinite;


    z-index:10;


}





.hero-welcome-popup h3{


    color:#00ff99;


    font-size:28px;


    margin-top:15px;


}





.hero-welcome-popup p{


    color:white;


    line-height:1.7;


    text-shadow:

    0 2px 5px black;


}




.welcome-icon{


    width:65px;


    height:65px;


    border-radius:50%;



    background:#00ff99;



    color:#003;



    display:flex;



    align-items:center;


    justify-content:center;



    font-size:30px;



    box-shadow:

    0 0 30px #00ff99;



}





.welcome-btn{


    display:inline-flex;



    align-items:center;


    gap:10px;



    margin-top:15px;



    padding:12px 25px;



    border-radius:30px;



    background:#00ff99;



    color:#002;



    text-decoration:none;



    font-weight:bold;



    transition:.4s;


}



.welcome-btn:hover{


    transform:

    translateY(-5px);



    box-shadow:

    0 0 30px #00ff99;


}





@keyframes welcomeFloat{


50%{


transform:

translateY(-55%);


}


}





/* MOBILE */

@media(max-width:992px){


.hero-welcome-popup{


right:50%;


transform:

translate(50%,-50%);



width:90%;


}


}




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


/* =====================================
   JJ GUIDE CINEMATIC BACKGROUND
===================================== */


.jj-guide-section{

position:relative;

overflow:hidden;


}




/* keep content above background */

.jj-guide-section .container{

position:relative;

z-index:5;


}





/* ===============================
 LEFT CHANGING WILDLIFE BACKGROUND
================================ */


.guide-bg-left{


position:absolute;


left:0;


top:0;


width:45%;


height:100%;



background-size:cover;


background-position:center;



opacity:.35;



animation:

guideImages 18s infinite;



filter:

blur(2px);



}




@keyframes guideImages{


0%{

background-image:

url("assets/img/q34.jpeg");

}



33%{

background-image:

url("assets/img/lolo.jpg");

}



66%{

background-image:

url("assets/img/se.jpg");

}



100%{

background-image:

url("assets/img/q34.jpeg");

}


}




/* =====================================
   JJ GUIDE CINEMATIC SAFARI BACKGROUND
===================================== */


.jj-guide-section{

    position:relative;

    min-height:700px;

    overflow:hidden;

    background:#06140e;

}




/* LEFT CHANGING IMAGES */

.guide-bg-left{

    position:absolute;

    left:0;

    top:0;

    width:50%;

    height:100%;

    z-index:0;

}



.guide-bg-left img{

    position:absolute;

    width:100%;

    height:100%;

    object-fit:cover;

    filter:blur(3px);

    opacity:0;

    animation:guideImages 15s infinite;

}



.guide-bg-left img:nth-child(1){

    animation-delay:0s;

}


.guide-bg-left img:nth-child(2){

    animation-delay:5s;

}


.guide-bg-left img:nth-child(3){

    animation-delay:10s;

}




@keyframes guideImages{


0%{

opacity:0;

}



10%{

opacity:.45;

}



30%{

opacity:.45;

}



40%{

opacity:0;

}



100%{

opacity:0;

}


}







/* RIGHT BLURRED IMAGE */

.guide-bg-right{


position:absolute;

right:0;

top:0;


width:55%;


height:100%;


z-index:0;


}



.guide-bg-right img{


width:100%;


height:100%;


object-fit:cover;


filter:blur(18px);


opacity:.35;


transform:scale(1.15);


}






/* DARK SAFARI OVERLAY */

.jj-guide-section::before{


content:"";


position:absolute;


inset:0;



background:

linear-gradient(

90deg,

rgba(0,0,0,.7),

rgba(0,0,0,.3)

);



z-index:1;


}






/* CONTENT ABOVE BACKGROUND */


.jj-guide-section .container{


position:relative;


z-index:5;


}






.guide-card{


position:relative;


z-index:10;


animation:

guideFloat 5s ease-in-out infinite;


}



@keyframes guideFloat{


50%{

transform:translateY(-10px);

}


}




@media(max-width:768px){


.guide-bg-left,
.guide-bg-right{


width:100%;


opacity:.15;


}


}


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