@font-face {
    font-family: 'Monsterat';
    src: url(./fonts/Montserrat.ttf);
}

@font-face {
    font-family: 'Saira';
    src: url(./fonts/SairaCondensed.ttf);
}

@font-face {
    font-family: 'Playfair';
    src: url(./fonts/Playfair.ttf);
}

html
{
    font-size: 14px;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
    background-color: #f7f7f7;
    color: #000;
}

.scroll-off
{
    overflow-x: hidden;
}

*
{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Monsterat';
}

p
{
    letter-spacing: .2px;
}

a
{
    text-decoration: none;
}

a button
{
    color: #000;
}

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

.wrap
{
    flex-wrap: wrap;
}

.monts
{
    font-family: 'Monsterat';
}

.curvey-line
{
    position: absolute;
    top: 12rem;
    width: 100vw;
}

.curvey-line svg
{
    stroke: #f7f7f7;
    stroke-width: 2;
    transition: .5s ease-out;
    width: 100%;
}

.notification-toast
{
    padding: 1rem ;
    text-align: center;
    font-size: .9rem;
}

.notification-toast a
{
    color: #000000;
    opacity: .6;
}

span.focus
{
    font-weight: 800;
    color: rgb(218, 188, 58);
}

.huge-heading
{
    font-size: 5rem;
    font-weight: 300;
}


/* mobile */
.mobile-navigation,.mobile-burger
{
    display: none;
}

nav
{
    background: linear-gradient(45deg, rgb(80, 71, 60),rgb(27, 45, 63));;
    color: #fff;
    justify-content: space-between;
    position: sticky;
    top: 0;
    padding: 2rem 4rem;
    z-index: 10;
}

.navigations ul
{
    list-style: none;
}

.navigations ul li
{
    display: inline;
    position: relative;
}

.navigations ul li:hover .drop-menu
{
    display: block;
}

nav ul > a 
{
    text-decoration: none;
    color: #fff;
    padding: 1rem;
    padding-top: 3rem;
    font-weight: 5400;
    border-bottom-left-radius: 2rem;
    position: relative;

}

nav ul > a.active
{
    background-color: rgba(250, 174, 10, 0.137);
    color: rgb(245, 155, 0);
    border-bottom: 5px solid rgba(250, 174, 10, 0.041);
}

nav ul > a:hover
{
    color: rgb(250, 174, 10);
}


.drop-menu
{
    position: absolute;
    top: 7rem;
    left: 10rem;
    background-color: #c9c9c9;
    border-radius: 1rem;
}

.drop-menu a
{
    padding: 0rem;
}

.drop-menu a > li
{
    display: block;
    padding: 1rem;
}


.logo-container svg
{
    height: 3rem;
    fill: #fff;
}

button
{
    cursor: pointer;
}


.book-button
{
    border: none;
    padding: 1.2rem 2rem;
    font-weight: 500;
    font-size: .89rem;
    background-color: rgb(255, 102, 75);
    color: #fff;
}

/* home banner */
.home-banner
{
    background-image: linear-gradient(45deg, rgba(235, 183, 13, 0.301), rgba(255, 187, 0, 0.76)), url(./img/HomeCard..jpg);
    background-size: cover;
    text-align: center;
    padding: 8rem 20rem;
    color: rgb(48, 33, 7);
}

.banner-content h1
{
    font-size: 12rem;
    font-family: 'playfair';
    font-weight: 900;
    line-height: 12rem;
    letter-spacing: -.5rem;
}

.banner-content p
{
    margin: 2rem auto 1rem;
    max-width: 35rem;
    font-weight: 600;
}

.square-large-button
{
    background-color: transparent;
    border: 3px solid;
    font-weight: 700;
    padding: 1.5rem 2rem;
    margin: 1rem;
    position: relative;
    overflow: hidden;
}

.square-large-button:hover
{
    border-color: #141414;
    background-color: #000000;
    color: #ffffff;
}

.white-buttons
{
    border-color: #fff;
    color: #fff;
}

.white-buttons:hover
{
    border-color: #fff;
    background-color: #fff;
    color: #2C221D;
}


.button-wipe
{
    height: 6rem;
    width: 20rem;
    background-color: rgb(250, 174, 10);
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(6rem);
    transition: .3s ease-out;
}

.square-large-button:hover .button-wipe
{
    transform: translateY(4rem) rotate(4deg);
}

/* Side image */
.side-image-banner
{
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;

}

.side-image-banner .text-content
{
    padding: 2rem 6rem;
    margin: 0 auto;
}

.side-image-banner .text-content>*
{
    max-width: 30rem;
}

.side-image-container
{
    justify-content: center;
    overflow: hidden;
    max-width: 50rem;
    max-height: 100%;
}

.side-image-container img
{
    width: 100%;
}

.condensed-heading
{
    font-size: 4rem;
    margin-bottom: 2rem;
    font-family: 'Saira';
    line-height: 4rem;
    letter-spacing: -.1rem;
    text-transform: uppercase;
}

.wozani-small-icon > svg
{
    height: 2rem;
    margin-left: 1rem;
}

.side-image-banner a
{
    text-decoration: none;
    color: rgb(63, 63, 63);
    display: flex;
    align-items: center;
    margin-top: 1.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    transition: .2s ease-out;
}

.side-image-banner a:hover
{
    color: rgb(250, 174, 10);
    fill: rgb(250, 174, 10);
}

/* large Cards */
.large-cards
{
    text-align: center;
    padding: 2rem;
    position: relative;
}

.single-card:hover ~ .curvey-line svg
{
    stroke-width: 6;
}

.cards-container
{
    justify-content: center;
    gap: 2rem;
    margin: 3rem auto;
}

.single-card
{
    background-color: rgb(255, 196, 0);
    min-width: 20rem;
    height: 30rem;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.single-card h2
{
    font-weight: 400;
    font-size: 1.8rem;
    letter-spacing: .1rem;
    color: #fff;
}

#card1
{
    background-image: linear-gradient(45deg, rgb(0, 0, 0), rgba(255, 196, 0, 0)), url(./img/desert-og.jpg);
    background-size: cover;
}

#card2
{
    background-image: linear-gradient(45deg, rgb(0, 0, 0), rgba(0, 72, 105, 0)), url(./img/falls_og.jpg);
    background-size: cover;
}

#card3
{
    background-image: linear-gradient(45deg, rgb(0, 0, 0), rgba(255, 196, 0, 0)), url(./img/dest_namibia.jpg);
    background-size: cover;
}

.card-content
{
    transition: .4s ease-out;
}

.single-card:hover .hidden-button
{
    transform: translateY(0);
}

.hidden-button .square-large-button
{
    border-color: #fff;
    color: #fff;
}

.single-card:hover .card-content
{
    transform: translateY(5rem);
    opacity: 0;
}

/* Hidden Button */
.hidden-button
{
    position: absolute;
    transform: translateY(20rem);
    transition: .3s ease-out;

}

/* Best Selling ad */
.tour-ad-banner
{
    background-color: rgb(15, 14, 14);
    text-align: center;
    padding: 5rem 3rem;
    color: #fff;
    position: relative;
}

.tour-ad-banner svg
{
    height: 20rem;
    position: absolute;
    top: 0;
    right: 5rem;
    fill: #ffffff44;
}

.banner-text
{
    max-width: 50rem;
    margin: 5rem auto;
}

.line-text
{
    position: relative;
}

.line-text::after
{
    content: "";
    position: absolute;
    bottom: 15px;
    width: 100%;
    height: 5px;
    left: 0;
    background-color: rgb(233, 169, 30);
    transition: .2s ease-out;
    animation: expand infinite 5s ease-out;
}

@keyframes expand {

    0%
    {
        transform: scaleX(50%);
        background-color: rgb(253, 241, 213);
    }

    50%
    {
        transform: scaleX(100%);
        background-color: rgb(233, 169, 30);
    }

    100%
    {
        transform: scaleX(50%);
        background-color: rgb(248, 229, 189);
    }
    
}

.fixed-image
{
    background-image: url(./img/baobab_stock.jpg);
    background-size: cover;
    background-attachment: fixed;
    height: 20rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed-image svg
{
    position: absolute;
    height: 16rem;
    bottom: -8rem;
    z-index: 2;
    fill: #ffffff;
    mix-blend-mode: overlay;
}


.img2
{
    background-image: url(./img/desert-og.jpg);
}

/* Display Cards */
.service-card
{
    background-color: #242424;
    background: linear-gradient(45deg, rgb(90, 90, 83),#456);;
    width: 20rem;
    height: 20rem;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 1rem;
    transition: .15s ease-out;
    border-top: 3px solid #ffae00;
}

.service-card:hover
{
    transform: scale(105%);
}

.service-card h2
{
    font-size: 2rem;
    font-weight: 200;
}

.service-card button
{
    padding: 1rem;
    border: none;
    background-color: rgb(250, 174, 10);
    font-weight: 500;
    width: 10rem;
    margin: 0 auto;
    font-family: 'Saira';
    font-size: 1.2rem;
}

.display-cards
{
    justify-content: center;
    margin-top: -7rem;
}

.display-cards a
{
    color: #fff;
}

/* client reviews */
.reviews-tab
{
    background-image: linear-gradient(45deg, rgba(85, 85, 68, 0.719),#456),url(./img/Plain.jpg);
    color: #fff; 
    background-size: cover;
    background-position: center;
    padding: 3rem;
    flex-direction: column;
}

.reviews-container
{
    gap: 4rem;
    margin: 2rem;
    flex-wrap: wrap;
}

.client-review
{
    max-width: 30rem;
    font-weight: 300;
}

.client-review h1
{
    font-size: 5rem;
    line-height: 4rem;
    margin-bottom: -1rem;
}

.vertical-divider
{
    height: 20rem;
    width: 1px;
    background-color: black;
}

.client-id
{
    margin: 2rem auto;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 0 20px -10px #000;
    padding: 2rem;
    color: rgb(44, 44, 44);
    text-align: center;
}

.client-id .name
{
    font-size: 1.6rem;
    text-transform: uppercase;
}

.client-id .country
{
    font-weight: 400;
    font-size: .9rem;
}

/* Experiences */
.short-cards .card
{
    background-color: #1a1a1a;
    width: 15rem;
    height: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: .4rem;
}

.short-cards h2
{
    font-family: 'Saira';
    text-transform: uppercase;
    color: #fff;
}

.short-cards
{
    justify-content: center;
    padding: 2rem;
    flex-wrap: wrap;
}


/* Imported from Ted CSS */
/* Contact card */
.contacts-container
{
    padding: 2rem;
}

.contact-cards
{
    justify-content: center;
    flex-wrap: wrap;
    gap: 4rem;
}

.single-contact-card
{
    width: 18rem;
}

.single-contact-card a
{
    color: #fff;
}

.single-contact-card:hover .contacts-icons
{
    background-color: #e7cab2;
}

.single-contact-card:hover .contacts-icons svg
{
    transform: rotateY(360deg);
    transition: 1s .5s ease-out;
}


.contacts-icons
{
    background-color: #FCC395;
    color: #2C221D;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    height: 18rem;
    padding: 3rem;
}

.contacts-icons > *
{
    margin-bottom: .4rem;
}

.contacts-icons svg
{
    height: 4rem;
    margin-left: -1rem;
    margin-bottom: 1rem;
    fill: #2C221D;
}

.contact-card-heading
{
    font-weight: 900;
    font-family: 'Saira';
    font-size: 2rem;
    width: 8rem;
    line-height: 1.6rem;
}

.contact-card-hint
{
    color: #2C221D;
    font-size: .8rem;
    width: 9rem;
}

.contact-card-details
{
    font-size: .9rem;
    text-align: center;
    padding: 1.3rem .5rem;
    font-weight: 800;
    background-color: #2C221D;
}

/* Footer */
footer
{
    background-color: black;
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-self: flex-start;
    padding: 5rem 10rem;
}

footer svg 
{
    fill: #fff;
    height: 4rem;
}

footer .section
{
    font-weight: 900;
    color: rgb(250, 174, 10);
}

footer .section p
{
    font-family: 'Saira';
    font-size: 1.5rem;
    text-transform: uppercase;
}

footer .section ul
{
    list-style: none;
}

footer .section ul li
{
    margin-top: .5rem;
}

footer .section a
{
    color: #fff;
    font-weight: 200;
    font-size: .9rem;
}

footer .section a:hover
{
    color: rgb(38, 250, 10);
}

.footer-divider
{
    height: 10rem;
    width: 1px;
    background-color: rgb(53, 53, 53);
}

.disclaimer
{
    padding: 2rem;
    text-align: center;
    background-color: #272727;
    color: rgb(167, 167, 167);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.disclaimer span
{
    color: rgb(250, 174, 10);
}

.mobile-navigation
{
    position: fixed;
    width: 100vw;
    height: 100%;
    left: 0;
    top: -100rem;
    z-index: 9;
    background-color: #000;
    padding: 4rem;
    padding-top: 9rem;
    transition: .2s ease-out;
}

.mobile-section ul
{
    list-style: none;
}

.mobile-section
{
    color: rgb(233, 169, 30);
    font-size: 2rem;
    font-family: 'Saira';
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.mobile-section ul li
{
    font-size: 1.6rem;
    padding: .6rem;
}

.mobile-section a
{
    color: #fff;
}

.slide-in
{
    top: 5rem;
}

/* Burger */

.burger
{
    width: 2.6rem;
    height: .45rem;
    border-radius: 2rem;
    background-color: #ffffff;
    margin: .5rem;
    transition: .2s ease-out;
}

.twist-top
{
    background-color: red;
    transform: rotate(45deg) translateX(9px);
}

.bottom-twist
{
    background-color: red;
    transform: rotate(-45deg) translateX(8px);
}

.toggle-off
{
    transform: translateY(5rem);
    opacity: 0;
}

.appear
{
    transform: translateY(0);
    opacity: 1;
}


.delay-1
{
    transition: .2s .1s ease-out;
}

.delay-2
{
    transition: .2s .2s ease-out;
}

.delay-3
{
    transition: .2s .3s ease-out;
}

.delay-4
{
    transition: .2s .4s ease-out;
}

.delay-5
{
    transition: .2s .5s ease-out;
}

.delay-6
{
    transition: .2s .6s ease-out;
}



/* Tours */
.tour-title
{
    background: linear-gradient(-45deg, #201812,#000);
    color: #fff;
    padding: 2rem 5rem;
    justify-content: space-between;
    align-items: flex-End;
}

.tour-title h1
{
    z-index: 1;
}

.page-nav
{
    padding-bottom: 1rem;
    z-index: 2;
}

.page-nav a
{
    color: #afafaf;
    padding: .3rem;
}

/* Tour Details */
.tour-details
{
    gap: 3rem;
}

.tour-details p
{
    font-size: .9rem;
    font-weight: 300;
    color: #ffffff9c;
}

.tour-details h2
{
    text-transform: uppercase;
    font-weight: 300;
}

/* Itenary */
.tour-itenary
{
    padding: 3rem 5rem;
}

.tour-itenary .internay-point
{
    max-width: 50rem;
    margin-bottom: 3rem;
}

.internay-point h2
{
    font-weight: 500;
    text-transform: uppercase;
}

.internay-point h1
{
    font-weight: 400;
    margin-bottom: 1rem;
}

.day-info
{
    display: flex;
    align-items: flex-end;
    margin-bottom: 1rem;
}

.day-info .day
{
    background-color: rgb(245, 155, 0);
    padding: 1rem;
    z-index: 3;
    font-weight: 800;
}

.day-info .place
{
    background-color: #000;
    color: #fff;
    padding: 1rem 3rem;
    z-index: 2;
    transform: translateX(-1.5rem);
}

/* Tour Window */
.tour-window
{
    align-items: flex-start;
    justify-content: space-between;
}

.more-tour-details
{
    padding: 3rem 5rem;
    max-width: 50rem;
    opacity: .3;
}

.more-tour-details:hover
{
    opacity: 1;
}


.FAQ
{
    max-width: 50rem;
}

.FAQ-head
{
    position: sticky;
    top: 7.3rem;
    background-color: #fff;
    z-index: 3;
    padding: 1rem;
}

.question-container
{
    position: relative;
    margin-bottom: 2rem;
}

.question
{
    background-color: #c9c9c9;
    color: #242424;
    padding: 1rem;
    border-radius: .4rem;
    margin-bottom: 1rem;
    font-weight: 500;
    cursor: pointer;
}


.expand-answer
{
    top: 0;
    opacity: 1;
}



/* Tours */
.page-heading
{
    font-family: 'Saira';
    font-size: 7rem;
    text-transform: uppercase;
    text-align: center;
    padding: 2rem;
    color: #fff;
    background: linear-gradient(45deg, rgb(5, 20, 34),#456);
}

.tour-card-container
{
    gap: 2rem;
    padding: 2rem;
    justify-content: center;
}

.tour-card
{
    width: 25rem;
}

.tour-card .img-container
{
    overflow: hidden;
    height: 20rem;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;

}

.tour-card .img-container:hover img
{
    transform: scale(105%);
}

.color-overlay
{
    background: linear-gradient(45deg, rgb(34, 31, 23),rgba(20, 25, 29, 0.527));
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 2;
}

.tour-card .img-container img
{
    position: absolute;
    z-index: 1;
    transition: .6s ease-out;
}

.tour-card .img-container h2
{
    z-index: 2;
    position: relative;
    font-size: 2.4rem;
    font-weight: 600;
    color: #fff;
    padding: 2rem;
    align-self: flex-end;
}

.tour-card .buttons
{
    text-align: center;
}

.tour-button
{
    width: 100%;
    border: none;
    background-color: rgb(255, 145, 0);
    padding: 2rem;
    font-family: 'Saira';
    font-size: 1.5rem;
    text-transform: uppercase;
    margin-top: 1rem;
}

.tour-button:hover
{
    background-color: #000;
    color: #fff;
}

.day-image-container
{
    width: 50rem;
    overflow: hidden;
    height: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
}

.day-image-container img
{
    width: 100%;
}

@media screen and (max-width:800px) 
{
    .mobile-navigation,.mobile-burger
{
    display: block;
}

    .mobile-off
    {
        display: none;
    }

    .banner-content h1
    {
        font-size: 8rem;
        line-height: 7.5rem;
    }

    html
    {
        font-size: 11px;
    }

    .day-image-container
    {
        width: 100%;
    }

    .home-banner
    {
        padding: 1rem;
    }

    .service-card
    {
        width: 30rem;
        height: 15rem;
        text-align: center;
    }

    .single-card
    {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-height: 20rem;
    }

    .hidden-button
    {
        position: static;
        transform: translateY(0);
    }

    .reviews-tab
    {
        padding: 0rem;
    }

    .short-cards
    {
        background-color:#fff ;
    }

    .short-cards .card
    {
        width: 40vw;
    }

    footer
    {
        text-align: center;
        flex-direction: column;
    }

    .footer-divider
    {
        display: none;
    }

    footer .section
    {
        margin: 2rem;
    }

    .disclaimer
    {
        font-size: .6rem;
    }

    .page-heading
    {
        font-size: 4rem;
    }
    .huge-heading
    {
        font-size: 3rem;
    }

    .line-text::after
    {
        bottom: 8px;
    }
}