h2{
    font-weight: 240;
    font-size: 50px;
    color: grey;
}
h5{
    font-style: italic;
    margin-bottom: 20px;
}

/* THE BILBOARD SECTION */
.bilboard{
    width: 100%;
    height: 100vh;
    background-image: url("../images/newhero.jpg");
    background-position: center;
    background-size: cover;
    filter: drop-shadow(23px);
}
.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.navbar-brand{
    margin-left: 40px;
    padding-top: 7px;
    color: white;
    font-family: papyrus;
    font-size: 2rem;
    transition: all ease .5s;
}
.navbar-brand:hover{
    color: red;
    cursor: pointer;
}
.navbar-links ul{
    display: flex;
}
.navbar-links li{
    list-style: none; 
    color: white; 
    transition: all ease s
}
.navbar-links li a{
    text-decoration: none;
    padding-top: 22px;
    margin-right: 35px;
    display: block;
    font-size: 20px;
    color: white;
    transition: all ease .5s;
}
.navbar-links li a:hover{
    color: red;
}
.toggle-button{
    position: absolute;
    top: 33px;
    right: 53px;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 45px;
    height: 25px;
}
.toggle-button .bar-one{
    height: 4px;
    width: 100%;
    background-color: white;
    border-radius: 12px;
}
.toggle-button .bar-two{
    height: 4px;
    width: 70%;
    background-color: white;
    border-radius: 12px;
}
.toggle-button .bar-three{
    height: 4px;
    width: 50%;
    background-color: white;
    border-radius: 12px;
}
h1{
    color: white;
    font-size: 90px;
} 
.second-h-one{
    font-size: 150px;
    font-weight: bolder;
}
.htext-and-icons{
    display: flex;
    padding-left: 30%;
    padding-top: 11%;
}
.icons{
    display: flex;
    flex-direction: column;
    padding-left: 30%;
    padding-top: 10%;
}
.iconss{
    width: 35px;
    height: 35px;
}
.instagramIcon{
    margin-top: 20px;
    margin-bottom: 30px;
}
 .downward{
    margin-left: 650px;
    margin-top: 100px;
} 


/* OUR STORY SECTION */
.story-section{
    padding-top: 100px;
}
.story-1st-divv{
    color: grey;
}
.b1{
    width: 120px;
    height: 40px;
    background-color: rgb(247, 67, 0);
    border: 2px solid;
    border-color: rgb(247, 67, 0);
    color: white;
}

.elephant{
    margin-top: 160px;
}
.story{
    margin-top: 40px;
    margin-bottom: 110px;
}
.pictop{
    margin-bottom: 30px;

}
.middlep{
    margin-top: 45px;
    margin-bottom: 45px;
}
.spacing{
    margin-bottom: 90px;
}

/* ACTIVITIES SECTION */
.activities{
    padding-top: 100px;
}
h3{
    padding-top: 450px;
    text-align: center;
}
.elephant-2{
    height: 500px;
    background-image: url("../images/Rectangle 17.png");
    color: white;
}
.elephant-2-overlay{
    width: 330px;
    height: 500px;
    background-color:  rgba(0, 0, 0, 0.483);
    position: relative;
    right: 12px;
}
.game-text{
    padding-top: 300px;
    margin-left: 25px;
}
.elephant-2-overlay p{
    margin-left: 25px;
}
.picture1{
    background-image: url("../images/Rectangle 16.png");
    height: 500px;
}
.picture2{
    background-image: url("../images/Rectangle 18.png");
    height: 500px;
}
.picture3{
    background-image: url("../images/Rectangle 19.png");
    height: 500px;
}
.picture4{
    background-image: url("../images/Rectangle 20.png");
    height: 500px;
}
.inline-space{
    margin-left: 20px;
    margin-right: 20px;
    color: white;
}
.picture2{
    color: white;
}
.picture4{
    color: white;
}

/* WILDLIFE SIGHTING SECTION */
.padd{
    padding-top: 220px;
}
.head-recent{
    margin-bottom: 110px;
}
.foto1{
    margin-top: 70px;
}
.foto2{
    margin-top: 120px;
}
.foto3{
    margin-top: 30px;
}
.foto5{
    margin-top: -190px;
    margin-bottom: 25px;
}
.foto7{
    margin-top: -140px;
}

/* SUGGESTED-ITENARIES-SECTION */
.sugge-itenaries-heading{
    margin: 90px 0px 80px 50px;
}
.with-bckgnd{
    background-color: rgb(247, 67, 0);
    width: 350px;
    height: 500px; 
}
.moyo{
    width: 70px;
    height: 70px;
    margin-left: 256px;
    bottom: 19px;
    position: relative;
}
.luxury-ptext{
    line-height: 29px;
}
.list-space{
    line-height: 29px;
    margin-bottom: 30px;
}
.see-full{
    margin-top: 30px;
}
.price-tag{
    padding: 10px 0px;
    border-top: 2px solid;
    border-bottom: 2px solid;
    font-size: 20px;
    font-weight: bold;
}
.right-arrow{
    width: 30px;
    height: 20px;
    margin-left: 90px;
}
.two-people{
    width: 300px;
    height: 500px;
    background-image: url("../images/Rectangle 38.png");
    background-position: center;
    background-size: cover;
}
.zambezi{
    background-image: url("../images/Rectangle 36.png");
    width: 300px;
    height: 500px;
    background-position:center ;
    background-size: cover;
    position: relative;
    text-align: center;
    margin: 0px 20px 0px 20px;
}
.overlay-zambezi{
    width: 300px;
    height: 500px;
    background-color:  rgba(0, 0, 0, 0.483);
    position: relative;
    right: 12px;
}
.hotel-zambezi{
    background-image: url("../images/Rectangle 37.png");
    width: 300px;
    height: 500px;
    background-position:center ;
    background-size: cover;
    text-align: center;
}
.overlay-hotel-zambezi{
    width: 300px;
    height: 500px;
    background-color: rgba(0, 0, 0, 0.483);
    position: relative;
    right: 12px;
}
.bottomed-text{
    padding-top: 420px;
    font-style: italic;
}

/* TESTIMONIALS SECTION */
.testimon{
    padding-top: 10px;
}
.testimon h2{
    margin: 200px 0px 80px 0px;
}
.jacob-pic{
    background-image: url("../images/Rectangle 46.png");
    background-position: center;
    background-size: cover;
    position: relative; 
    margin-left: 20px;
    color: white;
    text-align: center;
}
.picss-holder{
    display: flex;
    flex-direction: row;
}
.overlay{
    width: 324px;
    height: 580px;
    background-color: rgba(255, 68, 0, 0.335);
    position: absolute;
    bottom: 0px;
    right: 1px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.jacob-name{
    margin-bottom: 35px;
}
.bckgrnd-white{
    border: 2px solid;
    border-color: rgb(247, 67, 0);
    margin: 0px 20px 0px 20px;
    color: grey;
    text-align: center;
}
.family-pic{
    background-image: url("../images/Rectangle 45.png");
    background-position: center;
    background-size: cover;
    position: relative;
    color: white;
    text-align: center;
}
.overlay-brown-family{
    width: 324px;
    height: 580px;
    background-color: rgba(255, 68, 0, 0.335);
    position: absolute;
    bottom: 0px;
    right: 1px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.test-girl{
    border-radius: 100px;
    margin-top: 80px;
    margin-bottom: 80px;
}
.small-line{
    width: 100px;
    height: 2px;
    margin-left: 210px;
    margin-top: 30px;
    background-color: rgb(247, 67, 0);
}
.gemmah{
    font-style: italic;
    font-weight: 450;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 60px;
}
.downed{
    font-weight: 450;
    font-style: italic;
}

/* GALLERY SECTION  */
.car-image{
    height: 295px;
}
.girl-and-elephantt{
    display: flex;
    flex-direction: row;
}
.ele-phant{
    width: 240px;
    height: 296px;
}
.original{
    margin-right: 20px;
}
.pic-sizing{
    width: 182px;
    height: 296px;
    margin-top: 20px;
}
.hotel-room{
    width: 500px;
    height: 296px;
    margin-top: 20px;
}
.gallry{
    padding-top: 180px;
}
.gallery-head{
    margin-bottom: 100px;
}
.mid{
    padding-left: 80px;
}
.mid-down{
    display: flex;
    flex-direction: row;
    padding-left: 80px;
}
.tree{
    margin-left: 20px;
    margin-right: 20px;
}

/* FOOTER SECTION */
.footer-section{
    margin-top:65px;
    background-color: rgb(247, 67, 0);
    padding-top: 60px;
    color: white;
}
.contents-holder{
    display: flex;
}
.text-one{
    margin-left: 30px;
}
.text-two{
    margin-right: 40px;
}
.text-three{
    margin-right: 30px;
}
.email-ptext{
    color: grey;
    margin-top: 12px;
    margin-left: 30px;
}
.line-footer{
    width: 100%;
    height: 2px;
    background-color: white;
    margin: 30px 0px 30px 0px;
}
.signup-bar{
    height: 50px;
    width: 400px;
    background-color: white;
    display: flex;
    margin-top: 40px;
}
.footer-button{
    width: 120px;
    margin-left: 214px;
    border: none;
    background-color: rgb(63,55,43);
    color: white;
}
.copyright{
    padding-bottom: 70px;
    text-align: center;
}



/* MENU SMALL AND MEDIUM DEVICES (potrait phones, tablets, ipads) */
@media(max-width: 992px){
    .toggle-button{
        display: flex;
        height: 18px;
        position: absolute;
        top: 22px;
    }
    .navbar-links{
        display: none;
        width: 100%;
    }
    .navbar{
        flex-direction: column;
        align-items: flex-start;
    }
    .navbar-links ul{
        width: 100%;
        flex-direction: column;
    }
    .navbar-links li{
        text-align: center;
    }
    .navbar-links.active{
        display: flex;
    }
}





/* LARGE SRCEENS (ipad and tablets, less than 992) media query */
@media(max-width: 992px) and (min-width: 577px){

    h2{
        font-size: 35px;
    }
    p{
        font-size: 15px;
    }
/* THE BILBOARD SECTION */
       .navbar-brand{
           margin-left: 5px;
        }
        .toggle-button{
            position: absolute;
            top: 18px;
            right: 3px;
            height: 25px;
        }
        h1{
            font-size: 90px;
            margin-left: 20px;
        } 
        .second-h-one{
            font-size: 130px;
        }
        .htext-and-icons{
            padding-left: 15%;
            padding-top: 42%;
            display: flex;
            flex-direction: column;
        }
        .icons{
            display: flex;
            flex-direction: row;
            padding-left: 30%;
            padding-top: 15%;
        }
        .instagramIcon{
            margin-top: 0px;
            margin-bottom: 0px;
            margin-left: 40px;
            margin-right: 40px;
        }
         .downward{
            margin-left: 330px;
            margin-top: 100px;
        } 
       
/* OUR STORY SECTION  */
        .story-section{
           padding-top: 60px;
        }
        .story{
            margin-top: 0px;
            margin-bottom: 30px;
        }
        .elephant{
            margin-top: 180px;
            width: 250px;
        }
        .pictop{
            margin-top: 140px;
        }

/* OUR ACTIVITIES */
        .elephant-2{
            height: 500px;
            width: 300px;
            background-image: url("../images/Rectangle 17.png");
            color: white;
            margin-left: 45px;
            margin-right: 15px;
            background-repeat: no-repeat
        }
        .elephant-2-overlay{
            width: 300px;
            height: 500px;
            background-color:  rgba(0, 0, 0, 0.483);
            position: relative;
            right: 12px;
        }
        .picture1{
            margin-bottom: 20px;
            margin-top: 0px;
            background-repeat: no-repeat;
            width: 300px;
            background-position: center;
            background-size: cover;
            
        }
        .picture2{
            margin-left: 45px;
            margin-right: 15px;
            width: 300px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
    
        .picture3{
            margin-bottom: 20px;
            margin-top: 0px;
            width: 300px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .picture4{
            margin-left: 45px;
            width: 300px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .inline-space{
            margin-left: 10px;
            margin-right: 10px;
            color: white;
        }

/* RECENT WILDLIFE SECTION  */
       .padd{
            padding-top: 80px;
        }
        .head-recent{
            margin-bottom: 40px;
        }
         .foto1{
            margin-top: 28px;
            margin-left: 20px;
            width: 340px;
        }
        .foto2{
            margin-top: 27px;
             width: 340px;
        }
        .foto3{
            margin-top: 15px;
            margin-bottom: 145px;
            margin-left: 20px;
        }
        .foto4{
            width: 305px;
            height: 400px;
            display: flex;
            flex-direction: column;
            margin-top: 13px;
            padding: 0px;
        }
        .foto5{
            margin-top: 0px;
            margin-bottom: 15px;
            height: 346px;
        }
        .foto7{
            margin-left: 20px;
        }
            
/* SUGGESTED ITENARIES SECTION */
        .sugge-itenaries-heading{
            margin-left: 0px;
        }
        .with-bckgnd{
             width: 340px;
            margin-left: 0px;
            margin-right: 15px;
        }
        .two-people{
            margin: 0px 0px 20px 12px;
            width: 340px;
        }
        .zambezi{
            margin-left: 0px;
            width: 340px;
        }
        .overlay-zambezi{
            width: 340px;
            
        }
        .hotel-zambezi{
            margin: 0px 0px 0px 7px;
            width: 340px;
        }
        .overlay-hotel-zambezi{
            width: 340px;
        }
    
/*  TESTIMONIALS SECTION  */
        .testimon h2{
            margin: 90px 0px 40px 0px;
        }
        .picss-holder{
            display: flex;
            flex-direction: column;
        }
        .jacob-pic{
            background-image: url("../images/Rectangle 46.png");
            background-position: center;
            background-size: cover;
            position: relative; 
            margin-left: 120px;
            color: white;
            text-align: center;
            height: 630px;
            width: 450px;
            margin-bottom: 20px;
        }  
        .overlay{
            width: 450px;
            height: 630px;
            background-color: rgba(255, 68, 0, 0.335);
            position: absolute;
            bottom: 0px;
            right: 1px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
         }
         .bckgrnd-white{
            border: 2px solid;
            border-color: rgb(247, 67, 0);
            color: grey;
            text-align: center;
            width: 550px;
            margin-left: 70px;
         }
          .small-line{
            width: 100px;
            height: 2px;
            margin-left: 210px;
            margin-top: 30px;
            background-color: rgb(247, 67, 0);
        }
         .family-pic{
            background-image: url("../images/Rectangle 45.png");
            background-position: center;
            background-size: cover;
            position: relative;
            color: white;
            text-align: center;
            margin-top: 20px;
            height: 630px;
            width: 450px;
            margin-left: 120px;
        }
        .overlay-brown-family{
            width: 450px;
            height: 630px;
            background-color: rgba(255, 68, 0, 0.335);
            position: absolute;
            bottom: 0px;
            right: 0px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
        
/*  OUR GALLERY  */
        .gallry{
            padding-top: 50px;
        }
        .gallery-head{
            margin-bottom: 50px;
        }
        .car-image{
            height: 230px;
        }
        .ele-phant{
            width: 350px;
            height: 390px;
            margin: 20px 0px 0px 0px;
        }
        .girl-and-elephantt{
            display: flex;
            flex-direction: column;
            margin-top: -20px
        }
        .mid{
            padding-left: 0px;
        }
        .mid-down{
            padding-left: 0px;
            margin-top: -570px;
        }
        .tree{
            margin-left: 0px;
            margin-right: 0px;
        }
        .pic-sizing{
            width: 335px;
            height: 400px;
        }
        .hotel-room{
            width: 300px;
            height: 250px;
            margin-top: 590px;
        }
    
/*  FOOTER SECTION  */
        .footer-section{
            padding-top: 20px;
            padding-bottom: 70px;
        }
        .contents-holder{
            display: flex;
            flex-direction: column;
            
        }
        .footer-button{
            width: 120px;
            margin-left: 180px;
        }
        .text-one{
            margin-left: 0px;
        }
        .text-two{
            margin: 0px 0px 40px 0px;
        }
        .text-three{
            margin-bottom: 0px;
            margin-right: 0px;
        }
        .text-four{
            margin-left: 0px;
            margin-right: 0px;
        }
        .signup-bar{
            height: 40px;
            width: 320px;
            background-color: white;
            display: flex;
            margin-top: 0px;
        }
       
}





/* MENU SMALL DEVICES (potrait phones, less than 576px) */
@media(max-width: 576px){

/* THE BILBOARD SECTION */
        
        h2{
            font-size: 35px;
        }
       .navbar-brand{
           margin-left: 5px;
        }
        .toggle-button{
            position: absolute;
            top: 18px;
            right: 3px;
            height: 25px;
        }
        h1{
    
            font-size: 50px;
            margin-left: 20px;
        } 
        .second-h-one{
            font-size: 74px;
        }
        .htext-and-icons{
            padding-left: 7%;
            padding-top: 50%;
            display: flex;
            flex-direction: column;
        }
        .icons{
            display: flex;
            flex-direction: row;
            padding-left: 23%;
            padding-top: 25%;
        }
        .instagramIcon{
            margin-top: 0px;
            margin-bottom: 0px;
            margin-left: 30px;
            margin-right: 30px;
        }
         .downward{
            margin-left: 120px;
            margin-top: 20px;
        } 
        
/* OUR STORY SECTION  */
        .story-section{
           padding-top: 60px;
        }
        .story{
            margin-top: 0px;
            margin-bottom: 30px;
        }
        .elephant{
            margin-top: 80px;
        }
        .pictop{
            margin-top: 20px;
        }

/* OUR ACTIVITIES */
        .elephant-2{
            height: 500px;
            width: 355px;
            background-image: url("../images/Rectangle 17.png");
            color: white;
            margin-left: 10px;
        }
        .elephant-2-overlay{
            width: 355px;
            height: 500px;
            background-color:  rgba(0, 0, 0, 0.483);
            position: relative;
            right: 12px;
        }
        .picture1{
            margin-bottom: 20px;
            margin-top: 20px;
            background-repeat: no-repeat;
            width: 355px;
            background-position: center;
            background-size: cover;
            
        }
        .picture2{
            margin-left: 10px;
            width: 355px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
    
        .picture3{
            margin-bottom: 20px;
            margin-top: 20px;
            width: 355px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .picture4{
            margin-left: 10px;
            width: 355px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
        }
        .inline-space{
            margin-left: 10px;
            margin-right: 10px;
            color: white;
        }

/* RECENT WILDLIFE SECTION  */
       .padd{
            padding-top: 80px;
        }
        .head-recent{
            margin-bottom: 40px;
        }
         .foto1{
            margin-top: 30px;
            width: 340px;
        }
        .foto2{
            margin-top: 15px;
        }
        .foto3{
            margin-top: 15px;
            margin-bottom: 15px;
        }
        .foto5{
            margin-top: 0px;
            margin-bottom: 15px;
        }
        .foto7{
            margin-top: 12px;
        }

/* SUGGESTED ITENARIES SECTION */
        .sugge-itenaries-heading{
            margin-left: 0px;
        }
        .with-bckgnd{
            margin-left: 12px;
        }
        .two-people{
            margin: 20px 0px 20px 12px;
            width: 350px;
        }
        .zambezi{
            margin-left: 12px;
            width: 350px;
        }
        .overlay-zambezi{
            width: 350px;
            
        }
        .hotel-zambezi{
            margin: 20px 0px 20px 12px;
            width: 350px;
        }
        .overlay-hotel-zambezi{
            width: 350px;
        }
    
/*  TESTIMONIALS SECTION  */
        .testimon h2{
            margin: 40px 0px 30px 0px;
        }
        .picss-holder{
            display: flex;
            flex-direction: column;
        }
        .jacob-pic{
            background-image: url("../images/Rectangle 46.png");
            background-position: center;
            background-size: cover;
            position: relative; 
            margin-left: 0px;
            color: white;
            text-align: center;
            height: 610px;
            width: 350px;
            margin-bottom: 20px;
        }  
        .overlay{
            width: 350px;
            height: 610px;
            background-color: rgba(255, 68, 0, 0.335);
            position: absolute;
            bottom: 0px;
            right: 1px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
         }
         .bckgrnd-white{
            border: 2px solid;
            border-color: rgb(247, 67, 0);
            margin: 0px 20px 0px 20px;
            color: grey;
            text-align: center;
        }
         .family-pic{
            background-image: url("../images/Rectangle 45.png");
            background-position: center;
            background-size: cover;
            position: relative;
            color: white;
            text-align: center;
            margin-top: 20px;
            height: 610px;
            width: 330px,
        }
        .overlay-brown-family{
            width: 350px;
            height: 610px;
            background-color: rgba(255, 68, 0, 0.335);
            position: absolute;
            bottom: 0px;
            right: 0px;
            display: flex;
            align-items: flex-end;
            justify-content: center;
        }
        .bckgrnd-white{
            margin: 0px 0px 0px 0px;
        }
        .small-line{
            margin-left: 120px;
        }
/*  OUR GALLERY  */
        .gallry{
            padding-top: 50px;
        }
        .gallery-head{
            margin-bottom: 30px;
        }
        .car-image{
            height: 230px;
        }
        .ele-phant{
            width: 350px;
            height: 390px;
            margin: 20px 0px 0px 0px;
        }
        .girl-and-elephantt{
            display: flex;
            flex-direction: column;
        }
        .mid{
            padding-left: 0px;
        }
        .mid-down{
            padding-left: 0px;
        }
        .tree{
            margin-left: 0px;
            margin-right: 0px;
        }
        .pic-sizing{
            width: 350px;
            height: 400px;
        }
        .hotel-room{
            width: 350px;
            height: 250px;
            margin-top: 20px;
        }

/*  FOOTER SECTION  */
        .footer-section{
            padding-top: 20px;
        }
        .contents-holder{
            display: flex;
            flex-direction: column;
        }
        .signup-bar{
            height: 40px;
            width: 300px;
            margin-top: 0px;
        }
        .footer-button{
            width: 80px;
            margin-left: 162px;
        }
        .email-ptext{
            margin-top: 7px;
            margin-left: 20px;
        }
        .text-one{
            margin-left: 0px;
        }
        .text-two{
            margin: 25px 0px 40px 0px;
            margin-right: 0px;
        }
        .text-three{
            margin-bottom: 25px;
        }
        .text-four{
            margin-left: 0px;
            margin-right: 0px;
        }
       
    
    
    }