*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;
    outline: none;
    font-family: 'Vollkorn', serif;
}

html{
    font-size: 62.5%;
}

:root{
    --primary-color:#2b81e4;
    --secondary-color:#eee;
    --white-color:#fff;
    --grey-color:#555;
    --light-grey-color:#777;
    /*these all are css variable and we store color in it and use these variable dirrectly*/
}

.center{
    display: flex;
    justify-content: center;
    align-items: center;
    /* when we want to center element,we use this class*/
}

.container{
    background-color: var(--secondary-color);
    margin:3.5rem;
    box-shadow: 0 1rem 3rem var(--grey-color);
    overflow:hidden;
}
/*-------------------NAVBAR--------------------------*/
.navbar{
    background-color: linear-gradient(120deg, skyblue, blue);
    width:100%;
    height:70px;
    max-width:1200px;
    position: fixed;
    top:0;
    z-index:100;
}

.menu{
    list-style: none;
    float:right;
    padding: 0 20px;
}

.menu li{
    display: inline-block;
    line-height:70px;
}

.menu li a {
    display:block;
    text-decoration:none;
    color:blue;
    font-size:20px;
    padding:0 20px;
    text-transform:uppercase;
    transition:0.4s;
    border-radius: 10px;
}

.menu li a:hover{
    color:white;
    background-color: blue;
    transform:rotate(-10deg);
    box-shadow:0 1rem 1rem black;
    font-weight: 800;
}

.show-btn, .hide-btn, #chk{
    font-size:30px;
    line-height:70px;
    color:white;
    display:none;
    float: right;
    padding-right: 20px;
}
/*--------------END OF NAVBAR---------------------*/

/*---------------------HEADER---------------------*/
.header{
    width:100%;
    height: calc(100vh - 7rem);/*subtracting 3.5 from both upper and lower side*/
    background: linear-gradient(rgba(18,113,255,0.5),rgba(18,113,255,0.3)),url(header-bg.png) center no-repeat;
    background-size: cover;
    position: relative;
    perspective: 100rem;
    /*how far an element is away from the user,the lower value of this property gives intense effect*/
}

.header-text{
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    text-shadow: 0.3rem 0.5rem var(--grey-color);
}

.heading{
    font-size: 8rem;
    color:var(--white-color);
}

.header-paragraph{
    font-size: 3rem;
    font-weight: 500;
    color:var(--secondary-color);
    max-width: 70rem;
    margin:auto;
}

.logo{
    position: absolute;/*its placed to be at top*/
    top: 4rem;
    right:4rem;
}

.logo h1{
    display: flex;/*to place them side by side*/
}

.logo h1 span{
    font-size: 2rem;
    font-weight: 900;
    color:var(--primary-color);
    text-transform: uppercase;
    background-color: var(--white-color);
    width:3.5rem;
    height: 3.5rem;/*span inline*/
    margin:0.5rem;
    border-radius:50%;
}

.logo h1 span:nth-child(1){
    animation:drop-letters 5s 0.1s infinite;
}
.logo h1 span:nth-child(2){
    animation:drop-letters 5s 0.2s infinite;
}
.logo h1 span:nth-child(3){
    animation:drop-letters 5s 0.3s infinite;
}
.logo h1 span:nth-child(4){
    animation:drop-letters 5s 0.4s infinite;
}
.logo h1 span:nth-child(5){
    animation:drop-letters 5s 0.5s infinite;
}
.logo h1 span:nth-child(6){
    animation:drop-letters 5s 0.6s infinite;
}
.logo h1 span:nth-child(7){
    animation:drop-letters 5s 0.7s infinite;
}
.logo h1 span:nth-child(8){
    animation:drop-letters 5s 0.8s infinite;
}
.logo h1 span:nth-child(9){
    animation:drop-letters 5s 0.9s infinite;
}
/*name of the animation:drop-letters*/
@keyframes drop-letters{
    0%{
        transform: translateY(0);/*letter shouldnt move*/
    }
    10%{
        transform: translateY(0);
    }
    15%{
        transform: translateY(-100%);/*for 10to15 i want to move upwards*/
    }
    20%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(0);
    }
}

.header-image{
    width: 35%;;
    animation:image-float 150s infinite;
}
/*for 3D effect*/
@keyframes image-float{
    0%{
        transform: translateZ(40rem);
        opacity:1;
    }
    40%{
        transform: translateZ(-500rem)
        translateX(150rem);
        opacity:0.8;
    }
    70%{
        transform: translateZ(-1500rem)
        translateX(800rem);
        opacity:0.6;
    }
    80%{
        transform: translateZ(-50rem)
        translateX(100rem);
        opacity:0.8;
    }
    100%{
        transform: translateZ(40rem);
        opacity:1;
    }
}
/*-------------------End of Hearder---------------*/

/*------------------popular tours-----------------*/

.popular-tours{
    padding: 5rem 0 10rem 0;
}

.popular-tours-heading{
    font-size: 8rem;
    text-align: center;
    margin-bottom: 8rem;
    color:var(--primary-color);
    text-shadow: 0 0.1rem 0.2rem var(--primary-color);
}

.cards-wrapper{
    display: flex;
    justify-content: space-evenly;
    margin-bottom: 3rem;
}

.card{
    width: 35rem;
    position: relative;
    perspective: 150rem;/*use to have 3D effect*/
}

.card-image{
    width:100%;
    height:200px;
    border-radius: 0.3rem 0.3rem 0 0;
}

.front-side{
    text-align: center;
    background-color: var(--white-color);
    border-radius: 0.3rem;
    position: relative;
    z-index: 10;
    opacity: 0.9;
    transition: opacity .4s, transform .4s, box-shadow 0.4s ;
}

.change > .front-side{
    transform: translateZ(-5rem) translateX(3rem);
    box-shadow: 0 2rem 4rem #777;
    opacity: 0.5;
    z-index:0;
}

.tour-name{
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    position: absolute;
    top:30%;
    right:1.5rem;
    color:var(--white-color);
    text-shadow: 0 0 1rem #000;
}

.card-list{
    width:80%;
    margin:auto;
    padding:2rem 0 3rem 0;
}

.card-list-item{
    font-size:1.6rem;
    font-weight: 500;
    color:var(--light-grey-color);
    margin: 2rem 0;
    border-bottom:0.1rem solid var(--primary-color);
    padding-bottom: 0.5rem;
}

.card-list a{
    display: block;
    margin: 0 auto;
    height: 50px;
    line-height:50px;
    font-size: 20px;
    color:whitesmoke;
    background-color: black;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 400;
    transition:0.5s;
    box-shadow: 5px 4px 3px rgb(85, 85, 233);
}
.card-list a:hover{
    background-color:blue;
}

.back-side{
    position: absolute;
    top:0;
    background-color: var(--primary-color);
    width:100%;
    height:100%;
    border-radius:0.3rem;
    box-shadow: 0 2rem 4rem #777;
    flex-direction: column;
    transform: translateZ(-5rem) translateX(3rem);
    opacity: 0.5;
    transition: opacity .4s, transform .4s, box-shadow 0.4s ;
}

.change > .back-side{
    transform: translateZ(0) translateX(0);
    box-shadow: 0 .5rem 2rem #aaa;
    opacity: 0.9;
}

.tour-price{
    font-size: 5rem;
    font-weight: 300;
    color:var(--white-color);
    margin-bottom: 3rem;
}

.card-button{
    color:var(--primary-color);
    background-color: var(--white-color);
    border:none;
    font-size: 2.5rem;
    padding:1rem 2rem;
    letter-spacing: 0.2rem;
    border-radius: 5rem;
    cursor: pointer;
}

.navigation-button{
    position: absolute;
    top:0.5rem;
    left:0.5rem;
    padding:0.5rem;
    background-color: rgba(255,255,255,0.8);
    color:var(--light-grey-color);
    border-radius: 0.3rem;
    border:none;
    font-size: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    cursor: pointer;
}

/*-------------end of popular tours---------------*/

/*---------------------STORIES---------------------*/
.stories{
    padding: 10rem 0;
    position: relative;
}


.video-container{
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    opacity:0.9;
}

.bg-video{
    width: 100%;
    height: 100%;
    object-fit:cover;
}
.stories-wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.story-bg{
    background-color: #bbb;
    padding: 5rem;
    margin: 5rem;
    width:70%;
    box-shadow: 0 2rem 5rem rgba(238, 238, 238, 0.85);
    transform: skewX(20deg);
}
.story{
    transform: skewX(-20deg);
    display: flex;
}
.story-image{
    width: 20rem;
    height:20rem;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 5rem;
}

.story-text{
    letter-spacing:.1rem;
}

.story-heading{
    font: size 2.5rem;
    text-transform: uppercase;
    color:var(--grey-color);
    margin-bottom: 1rem;
}

.story-paragraph{
    font-size:1.8rem;
    color:var(--light-grey-color);
}

.story-paragraph::first-letter{
    margin-left:1rem;
}

/*-------------------end of stories-------------------*/

/*-------------------contacts-------------------*/
.contact{
    padding: 15rem 0 20rem 0;
    text-align: center;
    background:url(contact-us-bg.png) center no-repeat;
    background-size: cover;
    animation: contact-bg 10s infinite;
}

.contact-heading{
    font-size: 7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5rem;
    color:var(--white-color);
    text-shadow: 0 1rem 2rem black;
    margin-bottom: 8rem;
}

.contact-form{
    width: 70rem;
    height: 50rem;
    background-color: rgba(255, 255, 255, 0.95);
    margin:auto;
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    box-shadow: 0 1rem 3rem black;
    padding: 5rem;
}

.input-group{
    width:100%;
    display: flex;
    flex-direction: column;
    margin: 1rem 0;
    position: relative;
}

.input-groups{
    width:100%;
    display: flex;
    justify-content: space-between;
}

.input-groups .input-group{
    width: 48.5%;
}

.input-group input,
.input-group textarea{
    padding: 3rem 1rem 1rem 1rem;
    background-color: var(--secondary-color);
    border:0.1rem solid var(--secondary-color);
    font-size:1.4rem;
    color:var(--light-grey-color);
    letter-spacing: .1rem;
    border-radius: .5rem;
    transition:border 0.3s;
}

.input-group input:focus,
.input-group textarea:focus{
    border:0.1rem solid #ccc;
}

.input-group label{
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    color:var(--grey-color);
    position:absolute;
    top:1rem;
    left:1rem;
}

.form-btn{
    width:100%;
    padding: 1rem;
    font-size: 1.6rem;
    letter-spacing: 0.1rem;
    margin-top: 1rem;
    background-color: var(--light-grey-color);
    color:white;
    border-radius: 0.5rem;
    border:none;
    cursor:pointer;
    transition:background-color 0.4s;
}

.form-btn:hover{
    background-color: var(--grey-color);
}

.input-group textarea{
    max-height: 15rem;
    max-width: 100%;
}

@keyframes contact-bg{
    0%{
        background-color: #3d3d3d;
    }
    25%{
        background-color: #ced8e4;
    }
    50%{
        background-color: #1e81f3;
    }
    75%{
        background-color: #ff7842;
    }
    100%{
        background-color: #3d3d3d;
    }
}
/*-------------------end of contact-------------------*/

/*---------------------footer-------------------------*/
.footer{
    background-color: var(--grey-color);
    padding:4rem 0 2rem 0;
}

.footer-list{
    display: flex;
    justify-content: center;
}

.footer-link{
    font-size:2rem;
    color:var(--white-color);
    margin:0 2rem;
    background-color: var(--grey-color);
    padding: 0.3rem 3rem;
    letter-spacing: 0.3rem;
    transition:all 0.2s;
}

.footer-link:hover{
    transform:rotate(-10deg);
    box-shadow:0 1rem 1rem black;
}

.footer-paragraph{
    text-align:center;
    font-size:1.5rem;
    color:var(--secondary-color);
    letter-spacing: 0.2rem;
    margin-top: 5rem;
}

@media (max-width:1200px){
    .cards-wrapper{
        flex-direction: column;
        align-items:center;
    }
    .card{
        margin:3rem 0;
    }
    .story-bg{
        width:85%;
    }
}

@media (max-width:1000px){
    .header-text{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index:10;
    }

    .heading{
        font-size: 6rem;
    }
    .header-paragraph{
        font-size: 2.5rem;
    }
    .popular-tours-heading{
        font-size: 6rem;
    }
    .story-bg{
        transform:skewX(0);
    }
    .story{
        transform:skewX(0);
        flex-direction: column;
        align-items:center;
    }
    .story-image{
        margin-bottom: 3rem;
    }
    .footer.link{
        padding: 0.3rem 2rem;
        margin: 0 1rem;
    }
}

@media (max-width:800px){
    .header-paragraph{
        display: none;
    }
    .popular-tours-heading{
        font-size: 5rem;
    }
    .contact-form{
        width:90%;
    }
    .footer-list{
        flex-direction: column;
        align-items: center;
    }
    .footer-link{
        margin: 1rem 0;
    }
}

@media (max-width:650px){
    .container{
        margin: 0;
    }
    .header{
        height: 800vh;
    }
    contact-heading{
        font-size: 6rem;
    }
    .contact-form{
        padding: 2rem;
        height:40rem;
    }
}
@media (max-width:500px){
    html{
        font-size: 45%;
    }
}