:root{
    --khaki:#efba6c;
    --lightkhaki:#FCF1E2;
}

header{
    height: 100vh;
    text-align: center;
    background: url('../img/hero_img.jpg')60% 50%/cover;
}

nav{
    width: 100%;
    background: #fff;
    padding: 10px 0;
}
menu{
    display: none;
}
menu li{
    padding: 5px 0;
}
menu li a{
    text-transform: capitalize;
    font: 400 1rem "Work Sans",sans-serif;
}
.active{color: var(--khaki);}
h1{
    font: 900 2rem "Work Sans",sans-serif;
    color: #fff;
    padding: 100px 0 0 0;
}
header h6{
    font: 500 .9em "Work Sans",sans-serif;
    color: #fff;
    padding: 10px 0;
    line-height: 1.5em;
}
#traveler h6{
    color: var(--khaki);
    font: bold .8em "Work Sans",sans-serif; 
    text-transform: uppercase;
}
#traveler h3{
    font: 500 1.75rem "Work Sans",sans-serif;
    text-transform: capitalize;
    padding: 10px 0;
}
#traveler h5,p{
    font: 400 1em "Work Sans",sans-serif;
    padding: 10px 0;
    color: #364D59;
}
#traveler img{width: 100%;}
#traveler{
    display: flex;
    flex-direction: column;
}
.txtlft{
    text-align: center;
    padding: 30px 0;
}
#journey-title{
    text-align:center;
}
#journey h6{
    color: var(--khaki);
    font: bold .8em "Work Sans",sans-serif; 
    text-transform: uppercase;
}
#journey h4{
    font: 500 1.75rem "Work Sans",sans-serif;
    text-transform: capitalize;
    padding: 10px 0;
}
.card-body img{
    width: 100%;
    padding: 10px;
}
.card{
    position: relative;
}
.card-bottom{
        text-align: center;
        position: absolute;
        top: 80%;
        left: 30%;
}
.card-bottom button{
    border: none;
    outline: none;
    background: var(--khaki);
    color: #fff;
    padding: 5px 20px;
    font: 300 .8em "Work Sans",sans-serif;
    border-radius: 30px;
    transition: 250ms all;
}
.card-bottom p{
    color: #fff;
    font: 400 1.1em "Work Sans",sans-serif;
    padding: 10px 0;
}
.card-bottom button:hover{
    background: rgb(250, 236, 102);
    color: #000;
    cursor: pointer;
}
#meet{
    padding: 100px 0 0 0;
}
#meet-title{
    text-align: center;
}
#meet-title h6{
    color: var(--khaki);
    font: bold .8em "Work Sans",sans-serif; 
    text-transform: uppercase;  
}
#meet-title h4{
    font: 500 1.75rem "Work Sans",sans-serif;
    text-transform: capitalize;
    padding: 25px 0;
}
.meet-subtitle h5{
    font: 400 1.3rem "Work Sans",sans-serif;
    text-transform: capitalize;
    padding: 10px 0;
}
.meet-subtitle h6{
    font: 300 .8em "Work Sans",sans-serif;
    color: #888;
    text-transform: uppercase;
}
.meet-subtitle p{
    font: 300 1em "Work Sans",sans-serif;
    text-align: center;
    padding: 15px 0 35px 0;
    color: #364d59;
}
.icons i{
    color: var(--khaki);
    display: inline-block;
    padding: 20px 20px;
    background: var(--lightkhaki);
    border-radius: 50%;
}
.icons i:hover{
    color: #ffcf87;
    cursor: pointer;
}
.container-meet{
    display: flex;
    flex-direction: column;
}
.swiper {
    width: 100%;
}

.slider-title{
    width: 100%;
    margin: auto;
    display: flex;
    background: var(--khaki);
    padding: 15px 10px;
    object-fit: cover;
}
.slider-text{
    padding: 10px 10px;
}
.meet-cards,.meet-subtitle{
    margin: auto;
    text-align: center;
}
.meet-cards{
    padding: 15px 0;
}
#ourblog-title{
    text-align: center;
    padding: 200px 0 0 0;
}
#ourblog-title h6{
    color: var(--khaki);
    font: bold .8em "Work Sans",sans-serif; 
    text-transform: uppercase;  
}
#ourblog-title h4{
    font: 500 1.75rem "Work Sans",sans-serif;
    text-transform: capitalize;
}
#ourblog{padding: 0 0 150px 0;}
.card-subtitle h3{
    font:500 1.3em "Work Sans",sans-serif;
}
.card-subtitle >p{
    font: 300 1em "Work Sans",sans-serif;
}
.card-subtitle p{
    font: 300 1em "Work sans",sans-serif;
}
.container-fluid{
    background: var(--khaki);
    height: 40vh;
}
.container-fluid{
    background:  url('../img/hero_img.jpg')center/cover fixed;
    text-align: center;
}

.container-fluid h4{
    font: 700 2em "Work Sans",sans-serif;
    padding: 80px 0 0 0;
    color: #fff;
}
.container-fluid h6{
    font: 300 1em "Work Sans",sans-serif;
    color: #fff;
    padding: 25px 0;
}
.container-fluid button{
    color: #fff;
    border: none;
    outline: none;
    background: var(--khaki);
    padding: 20px 40px;
    cursor: pointer;
    border-radius: 5px;
    text-transform: uppercase;
}
.container-fluid button:hover{
    background: rgba(240, 230, 140, 0.648);
}

.imgs img{
    width: 30%;
}
.card-footer{
    width: 50%;
}
.card-footer h5{
    font: 500 1em "Work Sans",sans-serif;
    padding: 15px 0;
    text-transform: capitalize;
}
.card-footer h6{
    font: 300 1em "Work Sans",sans-serif;
    color: #364d59;
    padding: 10px 0;
    line-height: 25px;
}
input{
    width: 100%;
    padding: 10px 0;
    outline: none;
    border: none;
    border-radius: 5px;
}
button{
    margin: 0 15px;
    padding: 0 15px;
    border: none;
    outline: none;
    background: var(--khaki);
    text-transform: uppercase;
    font-size: .8em;
}
.form{
    display: flex;
}
footer{
    background: var(--lightkhaki);
}
.footer-container{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.card-footer p{color: var(--khaki);}
.card-subtitle span{color: var(--khaki);}
@media only screen and (min-width: 768px){
    header{
        text-align: initial;
    }

    h1{
        font-size: 3rem;
    }
    nav{
        display: flex;
        justify-content: space-around;
    }
  
    menu{
        display: flex;
        align-items: center;
        justify-content: end;
        opacity: 1;
    }

    menu li a{
        padding: 5px 10px;
    }
    menu li a:hover{
        color: var(--khaki);
    }
    #title{
        width: 35%;
        padding: 100px 0 0 100px;
    }
    #traveler{
        display: flex;
        flex-direction: row;
    }
    .txtlft{
        text-align: initial;
        width: 40%;
        margin: auto;
        padding: 0 0 0 50px;
    }
    .card-bottom button:hover{
        background: rgb(250, 236, 102);
        color: #000;
        cursor: pointer;
    }
    .container-cards{
        display: flex;
        flex-wrap: wrap;
    }
    .card{
        width: 30%;
        margin: auto;
        cursor: pointer;
        position: relative;
    }
    .card-bottom{
        position: absolute;
        top: 80%;
        left: 30%;
    }
    .card-bottom{
        margin: 0 0 50px 0;
        text-align: center;
    } 
    .container-meet{
        display: flex;
        flex-direction: row;
    }
    
    .slider-title{
        width: 40%;
        margin: auto;
        display: flex;
        background: var(--khaki);
        padding: 15px 10px;
        object-fit: cover;
    }

    .card-container{
        display: flex;
    }
    .card-footer{
        width: 20%;
    }

    .footer-container{
        display: flex;
        justify-content: space-around;
        flex-direction: row;
    }

}