/* CSS variable */
:root{
    --primary-color:rgb(58, 243, 58);
    --secondary-color:White;
    --dark-color:black;
    --other-color:rgb(12, 6, 46);
    --bright-color:red;

    --font-style:Arial, Helvetica, sans-serif;
    --extra-font-size:3em;
    --font-size-mid:2.5em;
    --font-size1:2em;
    --font-size2:1.5em;
    --font-size3:1em;
    --font-size4:0.75em;
    --font-size5:0.5em;
}

html{
    scroll-behavior: smooth;
}

*{
    text-decoration: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    width: 100vw;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* HEADER ONE FORMATIN */
header{
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
    background-color: var(--other-color);
    padding: 2px 0;
}

.header1{
    width: 90%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: red; */
}

.contacts a{
    font-size: var(--font-size3);
    color: var(--secondary-color);
    font-family: var(--font-style);
    /* margin-right: 10px; */
}

/* .media-pages span svg{
    height: 24px;
    width: 24px;
    display: inline-block;
    border: 2px solid white;
    background-color: transparent;
    margin-left: 15px;
    border-radius: 50%;
    height: 35px;
    width: 35px;
} */

.media-pages span img{
    height: 24px;
    width: 24px;
    display: inline-block;
    border: 2px solid white;
    background-color: transparent;
    border-radius: 10%;
    margin-left: 15px;
    border-radius: 50%;
    height: 35px;
    width: 35px;
}


/* END OF HEADER ONE */

/* HEADER TWO FORMATING */
.header2{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: sticky;
    top: 0px;
    z-index: 999;
    background-color: white;
    box-shadow: 0 0 5px black;
}



.header2 .header2-content{
    width: 90%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
    /* background-color: red; */
}

.header2 .Logo{
    width: 20%;
    /* background-color: grey; */
}

.header2 .Logo img{
    width:100%;
}

.nav-family{
    display: flex;
    align-items: center;
}



.nav-family .navigation a{
    font-family: var(--font-style);
    color: rgb(66, 65, 65);
    font-size: var(--font-size3);
    margin-left: 40px;
    font-weight: 600;
}

.nav-link .active{
    color: rgb(38, 234, 46);
    border-bottom: 2px solid rgb(25, 118, 28);
     padding: 10px 15px;
     border: 2px solid ;
     border-radius: 8px;
      transition: all 0.3s ease;
      text-decoration: none;
}


.nav-family .reg-page{
    width: 120px;
    height: 40px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 40px;
    margin-left: 50px;
    background-color: var(--primary-color);
}

.nav-family .reg-page a{
    font-size: 1.2em;
    color: white;
    font-weight: 500;
}

.responsive-header{
    width: 100%;
    height: auto;
    display: none;
    background-color: red;
}

.responsive-nav{
    display: none;
}



/* .navigation .reg-page{
    margin-left: 40px;
    height: 40px;
    width: 90px;
    border: none;
    background-color: var(--secondary-color);
    border-radius: 800px;
    color: var(--primary-color);
    font-family: var(--font-style);
    font-size: var(--font-size3);
} */
/* END OF HEADER FORMATING */

/* HOME SECTION FORMATING IN CSS */

main{
    width: 100%;
    height: auto;
}


#Home{
    width: 100%;
    height: 100vh;
    background-image: url(img/bg.jpg);
    background-size: cover;
    background-position:center;
    background-color: rgb(12, 6, 46, 0.7);
    background-blend-mode: darken;
    display: grid;
    place-items: center;
    text-align: center;
}

.hero-section{
    width: 70%;
    display: grid;
    place-items: center;
    font-family: var(--font-style);
    color: var(--secondary-color);
    /* background-color: pink; */
}

#typingText::after {
    content: "|";
    animation: blink 0.7s infinite;
    color: rgb(38, 234, 46);
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

#typingText {
    font-size: var(--extra-font-size);
    margin-bottom: 30px;
}

.hero-section p{
    font-size: var(--font-size1);
    margin-bottom: 30px;
}

.search{
    text-align: left;
    position: relative;
}

.search div{
    width: 100%;
}

.hero-section input{
    width: 700px;
    height: 60px;
    border: none;
    border-radius: 600px;
    outline: none;
    padding: 20px;
    font-size: var(--font-size3);
}

.hero-section button{
    height: 50px;
    width: 150px;
    background-color: var(--primary-color);
    border: none;
    border-radius: 600px;
    position: absolute;
    right: 5px;
    bottom: 5px;
    font-size: var(--font-size2);
    color: var(--secondary-color);
}

/* ABOUT SECTION STARTS HERE */

#About{
    width:100%;
    height: auto;
    display: grid;
    place-items:center;
    padding: 50px 0;
    /* background-color: palevioletred; */
}

.About-us{
    width: 90%;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    /* background-color: gray; */
    /* margin-top: 50px; */
}

.about-img{
    width: 50%;
}

.About-us img{
    width: 100%;
    height: 400px;
}


.About-us .text{
    width: 45%;
    height: 500px;
    /* background-color: yellow; */

}

.text .head{
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--primary-color);
    font-weight: 600;
    font-family: var(--font-style);
    /* background-color: red; */
}

.text .head h2{
    font-size: var(--font-size1);
}

.text .head p{
    font-size: var(--font-size3);
}


.brief h1{
    font-family: var(--font-style);
    color: var(--other-color);
    font-size: var(--font-size1);
}

.brief h1 span{
    color: var(--primary-color);
}

.brief p{
    color: var(--dark-color);
    font-size: var(--font-size3);
    font-family: var(--font-style);
    margin-bottom: 10px;
}


.list{
    display: flex;
    align-items: center;
    font-size: var(--font-size2);
    font-family: var(--font-style);
    color: var(--dark-color);
    /* background-color: rebeccapurple; */
}


.list-par{
    width: 50%;
    height: auto;
    padding: 5px;
    /* background-color:aqua; */
}

.about-item{
    width: 100%;
    height: auto;
    display: flex;
    gap:10px;
    margin-bottom: 10px;
    align-items:center;

}





.list-par i{
    font-size: var(--font-size4);
    /* background-color:yellow; */
}

.list-par p{
    font-size: var(--font-size4);
    /* background-color: orangered; */
}

.about-btn button{
    width: 180px;
    height: 40px;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: none;
    font-family: var(--font-style);
    font-size: var(--font-size3);
    
}



/* Services section starts here */

#Our-services{
    width: 100%;
    height: auto;
    padding: 50px 0;
    display: grid;
    place-items: center;
    background-color: rgb(244, 246, 248);
}

#Our-services .services{
    width: 90%;
    height: auto;
    display: flex;
    gap: 10px;
    flex-direction: column;
    align-items: center;
    /* background-color: blue; */
}

.service-brief{
    color: var(--primary-color);
    text-align: center;
    font-family: var(--font-style);
    font-size: var(--font-size3);
}

.head h1{
    text-align: center;
    color: var(--primary-color);
    font-family: var(--font-style);
    font-size: var(--font-size1);
}

.service-detail{
    width: 100%;;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 30px;
}

.service-detail .serve{
    height: auto;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgb(62, 61, 61);
}

.serve i{
    color: var(--primary-color);
    font-size: 40px;
    margin-left: 10px;
}

/* .service-detail span{
    display: grid;
    place-items: center;
    height: 40px;
    width: 40px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    background-color: var(--primary-color);
} */

.service-detail p,h2{
    font-family: var(--primary-color);
    font-family: var(--font-style);
    font-size: var(--font-size3);
    margin: 10px;
}


#Destination{
    width: 100%;
    height: auto;
    display:flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 0;
    /* background-color: blueviolet; */
}

#Destination h2{
    color: var(--primary-color);
    font-family: var(--font-style);
    font-size: var(--font-size3);
    font-weight: 600px;
}

#Destination h1{
    color: var(--primary-color);
    font-family: var(--font-style);
    font-size: var(--font-size1);
    font-weight: 600px;
}

.destination-details{
    width: 90%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 350px);
    gap: 20px;
    margin-top: 20px;
    /* background-color: aqua; */
}

.destination-details .destination1{
    position: relative;
    background-image: url(img/bwindi-forest.jpg);
    background-size: cover;
    background-position: center;
    grid-column: span 2;
}

.destination-details .btn1{
    width: auto;
    height: auto;
    border: none;
    background-color: var(--secondary-color);
    color: var(--bright-color);
    font-family: var(--font-style);
    font-size: var(--font-size3);
    font-weight: 800;

    position: absolute;
    top: 5px;
    left: 5px;
}
.destination-details .btn2{
    width: auto;
    height: auto;
    padding: 5px;
    border: none;
    background-color: var(--secondary-color);
    color: var(--primary-color);
    font-family: var(--font-style);
    font-size: var(--font-size3);
    font-weight: 800;
    position: absolute;
    bottom: 5px;
    right: 5px;
}

.destination-details .destination2{
    position: relative;
    background-image: url(img/masai-mara.jpg);
    background-size: cover;
    background-position: center;
    grid-row: span 2;
}

.destination-details .destination3{
    position: relative;
    background-image: url(img/Dubai.jpg);
    background-size: cover;
    background-position: center;
}

.destination-details .destination4{
    position: relative;
    background-image: url(img/France.jpg);
    background-size: cover;
    background-position: center;
}

#packages{
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
    padding:50px 0;
    background-color: rgb(244, 246, 248);
}

#packages h2{
    font-family: var(--font-style);
    color: var(--primary-color);
    font-size: var(--font-size2);
    text-align: center;
}

#packages h1{
    font-family: var(--font-style);
    color: var(--primary-color);
    font-size: var(--font-size1);
    text-align: center;
}

.packages{
    width:90%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
    /* background-color: deepskyblue; */
}


.package-list{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(1, 1fr);
    grid-gap: 50px;
    /* background-color: palevioletred; */
}

.package{
    padding: 0 0 20px ;
     background-color: white;
     text-align: center;
    /* box-shadow: 0 0 5px rgb(130, 127, 127); */
}

.package img{
    width: 100%;
    height: 300px;
}



.schedules{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* background-color: orange; */
}

.schedule{
    display: grid;
    place-items: center;
    height: auto;
    padding: 10px 0;
    border-bottom: 1px solid rgba(189, 188, 188, 0.541);
    /* background-color: palevioletred; */
}
.schedule-sty{
    display: grid;
    place-items: center;
    height: auto;
     padding: 10px 0;
    border-left: 1px solid rgba(189, 188, 188, 0.541);
    border-right: 1px solid rgba(189, 188, 188, 0.541);
    border-bottom: 1px solid rgba(189, 188, 188, 0.541);
}

.schedule p{
    text-align: center;
    font-family: var(--font-style);
    font-size: 1.5em;
 }  

 

.schedule p i{
    color: var(--primary-color);
    /* background-color: red; */
}

.schedule-sty p{
    text-align: center;
    font-family: var(--font-style);
    font-size: 1.5em;
 }  

.schedule-sty p i{
    color: var(--primary-color);
    /* background-color: red; */
}


.package h3{
    color: var(--dark-color);
    font-size: var(--font-size1);
    font-family: var(--font-style);
    text-align: center;
    margin-top: 35px;
}

.star{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.star span{
    display: flex;
    align-items: center;
    height: 50px;
    width: 50px;
    /* background-color: var(--primary-color); */
    border-radius: 50%;
    border: none;
    margin-bottom: 5px;
}

.star span img{
    height: 50px;
    width: 50px;
}

.shedule-desc{
    font-size: 1.2em;
    padding: 0 20px;
    /* background-color: red; */
}

 
 
 .package-btn{
    display: flex;
    align-items: center;
    gap: 1px;
    justify-content: center;
    margin-top: 10px;
 }

 .package-btn button{
    height: 35px;
    width: 150px;
    background-color: var(--primary-color);
    border: 1px solid rgb(58, 243, 58);
    color: var(--secondary-color);
    font-family: var(--font-style);
    font-size: var(--font-size3);
 }

 .package-btn .btn1{
    border: none;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
 }

 .package-btn .btn2{
    border-bottom-right-radius: 30px;
    border-top-right-radius: 30px;
 }


 #booking{
    width: 100%;
    height: auto;
    display:grid;
    place-items: center;
    padding: 50px 0;
    /* background-color: deepskyblue; */
 }

 .book{
    width: 90%;
    height: auto;
    display: flex;
    justify-content: center;
    gap:40px;
    padding:10px;
    background-image: url(img/booking.jpg);
    background-size: cover;
    background-position: center;
    background-color: rgb(0, 0, 0, 0.7);
    background-blend-mode: darken;
    /* padding: 30px; */
 }

 .online-book{
    width: 50%;
    height: auto;
    /* background-color: magenta; */
 }

 .book .text{
    font-family: var(--font-style);
    color: var(--secondary-color);
 }

 .book h1{
    font-size: var(--extra-font-size);
    font-weight: 600;
 }

 .book h3{
    font-size: var(--font-size1);
    font-weight: 600;
 }

 .book p{
    font-size: var(--font-size3);
 }

 .online-book .text{
    margin-bottom: 25px;
 }

 .online-book button{
    height: 45px;
    width: 150px;
    background: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
 }

 .tour-book{
    width: 50%;
    height:auto;
    /* background-color: magenta; */
 }

 .tour-book h1{
    color: var(--secondary-color);
    font-family: var(--font-style);
 }


 .tour-book form{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: gray; */
 }

 .booking input{
    height: 45px;
    background: transparent;
    border: 2px solid var(--secondary-color);
    margin: 5px;
    color: var(--secondary-color);
    font-size: var(--font-size3);
    padding-left: 10px;
 }

 .input input::placeholder{
    color: var(--secondary-color);
 }



 .input-cellection{
    width:100%;
    height: auto;
    display:flex;
    /* background-color: #0858c0; */
 }

 .input-cellection .mini-input{
    width: 50%;
 }


 .input{
    width:100%;
    height: auto;
    /* background-color: #0858c0; */
 }


 .input .max-input{
    width:98.9%;
 }

 .input .book-btn{
    width:98.9%;
    height: 45px;
    margin: 5px;
    background: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
 }


 #process{
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
    padding:50px 0;
    /* background-color: red; */
 }

 .process-container{
    width: 90%;
    height: auto;
    display:flex;
    flex-direction:column;
    align-items:center;
    /* background-color: deepskyblue; */
 }


 .processes{
    width:100%;
    /* height: 40vh; */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px;
 }

 .process{
    height: 250px;
    background-color: var(--secondary-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 0 5px rgb(98, 97, 97);
 }

 .process-container h2{
    font-family: var(--font-style);
    font-size: var(--font-size2);
    color: var(--primary-color);
    text-align: center;
 }

 .process-container h1{
    font-family: var(--font-style);
    font-size: var(--font-size1);
    color: var(--dark-color);
    text-align: center;
    margin-bottom: 50px;
 }

 .process span{
    display: grid;
    place-items: center;
    height: 90px;
    width: 90px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    background-color: var(--primary-color);
    position: absolute;
    top: -40px;
 }

 

 .process h3{
    font-family: var(--font-style);
    font-size: var(--font-size1);
    margin-bottom: 40px;
 }

 .process p{
    font-family: var(--font-style);
    font-size: var(--font-size3);
    text-align: center;
    font-weight: 600;
 }

 #guide{
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
    padding: 50px 0;
    background-color: rgb(244, 246, 248);
 }

.guide-content{
    width:90%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap:10px;
    /* background-color: palevioletred; */
}

 .guide-content h2{
    font-family: var(--font-style);
    font-size: var(--font-size2);
    color: var(--primary-color);
    text-align: center;
 }

 

 .guide-content h1{
    font-family: var(--font-style);
    font-size: var(--font-size1);
    color: var(--dark-color);
    text-align: center;
 }

 .guides{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 20px;
    margin-top: 20px;
 }

 .guide{
    height: 500px;
    background-color: var(--secondary-color); 
    box-shadow: 0 0 5px black;
    padding-bottom: 20px;
 }

 .guide img{
    width: 100%;
    height: 80%;
 }

 .guide-media{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
 }

 .guide span{
    display: flex;
    height: 40px;
    width: 40px;
    background-color: var(--secondary-color);
    border-bottom: 2px solid var(--primary-color);
    border-radius: 50%;
    margin-top: -25px;
    margin-bottom: 20px;
 }

 .guide span img{
    height: 40px;
    width: 40px;
    border-bottom: 2px solid var(--primary-color);
    border-radius: 50%;
 }

 .guide h4{
    font-family: var(--font-style);
    font-size: var(--font-size2);
    font-weight: 600;
    text-align: center;
 }

 .guide p{
    font-family: var(--font-style);
    font-size: var(--font-size3);
    text-align: center;
 }

 #client-say{
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
    padding:50px 0;
    /* background-color: red; */
 }

 .client-details{
    width: 90%;
    height: auto;
    display:flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    /* background-color: deepskyblue; */
 }

 .client-details h2{
    color: var(--primary-color);
    font-family: var(--font-style);
    font-size: var(--font-size2);
    text-align: center;
    font-weight: 600;
 }
 
 .client-details h1{
    color: var(--dark-color);
    font-family: var(--font-style);
    font-size: var(--font-size1);
    text-align: center;
    font-weight: 600;
 }

 .clients{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 50px;
    /* background-color: orange; */
 }

 .client{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
    background-color: white;
 }

 .client img{
    margin-bottom: 20px;
    border-radius: 50%;
 }

 .client h3{
    font-family: var(--font-style);
    color: var(--dark-color);
    margin-bottom: 30px;
 }

 .client p{
    text-align: center;
    font-family: var(--font-style);
 }

 .active-client{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-color);
 }

 .active-client img{
    margin-bottom: 20px;
    border-radius: 50%;
 }

 .active-client h3{
    font-family: var(--font-style);
    color: var(--dark-color);
    margin-bottom: 30px;
 }

.active-client p{
    text-align: center;
    font-family: var(--font-style);
 }


footer{
    width: 100%;
    height: auto;
    display: grid;
    place-items: center;
    padding: 50px 0;
    background-color: #0a0a0a;
 }


.footer-containers{
    width: 90%;
    height: auto;
    display: flex;
    justify-content: space-around;
    /* background-color: rgb(57, 65, 71); */
 }

.footer-container{
    color: white;
    /* background-color: blue; */
    /* padding: 25px; */
 }

.footer-container h5{
    font-family: var(--font-style);
    font-size: var(--font-size3);
    margin-bottom: 20px;
    font-weight: 600;
    color: var(--secondary-color);
 }

.comp-1{
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    /* padding: 20px; */
}
.comp-1 span{
    display: grid;
    height: 10px;
    width: 10px;
    border: 2px solid var(--secondary-color);
 }

.comp-1 p{
    font-family: var(--font-style);
    font-size: var(--font-size3);
    font-weight: 500;
    color: var(--secondary-color);
}

.cont-1{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    gap: 10px;
}

.cont-1 span{
    height: 30px;
    width: 30px;
    border: 1px solid var(--secondary-color);
    border-radius: 50%;
}

.cont-1 p{
    color:  var(--secondary-color);
    font-family: var(--font-style);
    font-size: var(--font-size3);
    font-weight: 500;
}

.cont-media{
    display: flex;
    align-items: center;
    gap: 20px;
}

.cont-media img{
    height: 25px;
    width: 25px;
    border: 1px solid var(--secondary-color);
    border-radius: 50%;
}

.gallery{
    display: grid;
    grid-template-columns: 80px 80px 80px;
    grid-template-rows: 50px 50px;
    gap: 10px;
}

.gallery .pht{
    background-image: url(img/package-1.jpg);
    background-size: cover;
    border: 4px solid var(--secondary-color);
}


.email-input{
    height: 30px;
    width: 200px;
    /* background-color: red; */
    position: relative;
}

.email-input input{
    height: 40px;
    width: 200px;
    border: 2px solid var(--primary-color);

}

.email-input input::placeholder{
    padding-left: 5px;
}

.input-par{
    color:  var(--secondary-color);
    font-family: var(--font-style);
    font-size: var(--font-size3);
    font-weight: 500;
    margin-bottom: 20px;  
}

.email-input button{
    width: 50px;
    height: 30px;
    background-color: var(--primary-color);
    border: none;
    color: var(--secondary-color);
    position: absolute;
    right: 5px;
    top: 5px;
}

hr{
    width: 95%;
    height: 1px;
    margin: 20px 0;
    background-color: rgb(158, 147, 147);

}

.lower-footer{
    width: 80%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* background-color: red; */
}

.lower-footer p{
    color: var(--secondary-color);
    font-family: var(--font-style);
}

.lower-footer .nav1{
    color: var(--secondary-color);
    font-family: var(--font-style);
    margin-left: 50px; 
    /* border-left: 2px solid var(--secondary-color); */
    /* background-color: red; */
    /* padding-left: 40px; */
    font-size: var(--font-size3);
}
.lower-footer .nav2{
    color: var(--secondary-color);
    font-family: var(--font-style);
    margin-left: 40px;
    border-left: 2px solid var(--secondary-color);
    /* background-color: red; */
    padding-left: 40px;
    font-size: var(--font-size3);
}