@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300&family=Saira:wght@700&display=swap');
*{
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;}
html{
    font-size: 62.5%;}
::-webkit-scrollbar{
    width: 1rem;}
::-webkit-scrollbar-thumb{
    background: orangered;}
    /*** start section hero***/
    .hero{
        position: relative;
        width: 100%;
        height: 100vh;
        background: linear-gradient(rgba(18, 18, 18, 0.846),rgba(41, 41, 164, 0.357));} 
    .hero video{
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        object-fit: cover;
        z-index: -1;}
         header{
        width: 90%;
        height: 9rem;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;}
    header img{
        width: 120px;
        height: 120px;}
    nav ul li{
        list-style: none;
        display: inline-block;
        margin-left: 3rem;
        position: relative;}
    nav ul li:hover, .active{
        border-bottom: 2px solid orangered;}
        nav ul li a, .active{
            font-size: 1.6rem;
            font-weight: 500;
            text-transform: capitalize;
            text-decoration: none;
            color:rgb(255, 255, 255);}
    .active:hover{
        border: none;}
    nav ul li .dropdown {
        width: 100%;
        position: absolute;
        display: none;}
    nav ul li .dropdown li{
        width: 100%;
        display: block;
        margin: 10px 0;
        text-align: start;
        border-bottom: 2px solid orangered;}
    nav ul li .dropdown li a{
        font-size: 1.6rem;}
    nav ul li:hover ul{
        display: block; }
        #on {
            font-size: 2rem;
            color: white;
            display: none;}
    #mark{
        display: none;
    }
    .content{
        width: 70%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;}
    .content h1{
        font-size: 4.2rem;
        font-weight: 700;
        text-transform: uppercase;
        color: orangered;}
    .content p{
        font-size: 2rem;
        font-weight: 500;
        text-transform: capitalize;
        margin-bottom: 2rem;
        color: rgb(255, 255, 255);}
    .btn{
        font-size: 1.6rem;
        font-weight: 500;
        text-decoration: none;
        color:orangered;
        border: 2px solid orangered;
        background: transparent;
        padding: 0.6rem 0.8rem ;
        margin-top: 1rem;
        margin-inline: 1rem;
        border-radius: 2rem;
        cursor: pointer;}
    .btn:hover, .content .btn ,form .btn{
        color: rgb(252, 252, 252);
        background:orangered;} 
    .up{
        position: fixed;
        bottom: 0.5rem;
        left: 0.5rem;}
        .up i{
            font-size: 3rem; 
            color: orangered;
           padding: 0.5rem;
            transition: 0.7s;}
        .up i:hover{
            transform: scale(1.1);
            }
   
    /*** end section hero***/
    /******start section about*********/
    .about{
        width: 80%;
        margin: auto;
        margin-top: 15rem;}
    .about h2{
       font-size: 3.6rem;
       font-weight: 600;
       text-transform: capitalize;
       color: orangered;
       text-align: center;
       margin-bottom: 3rem;}
    .text{
        display: flex;
        justify-content: center;
        align-items: start;
        gap: 3rem;}
    .text-lift{
        width: 35%;}
    .text-lift img{
        width: 100%;
       height: 100%;}
    .text-rigth{
        width: 50%;}
    .text-rigth P{
        font-size: 1.4rem;
        text-transform: capitalize;
        margin-bottom:2rem ;}
/******end section about*********/ 
    /********start section destination*****************/
    .destinations{
        width: 90%;
        margin: auto;
        height: auto;
        text-align: center;
        margin-top: 15rem;}
    .destinations h2{
        font-size: 3.6rem;
        font-weight: 600;
        color: orangered;
        margin-bottom: 5rem;}
    .destination{
        display: flex;
        justify-content: center;
        align-items: center;
        gap:3rem;}
    .desti{
        position: relative;
        width: 21%;
        height: 35rem;
        border-radius: 2rem;
        box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;}
    .desti img{
        width: 100%;
        height: 100%;
        border-radius: 2rem;
        overflow: hidden;}
    .headline{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 0;
        position: absolute;
        bottom: 0%;
        left: 0%;  
        overflow: hidden;
        background:linear-gradient(rgba(0,0,0,0.04), orangered);
        border-radius: 2rem;  
        transition: 0.5s ;}
        .headline h3{
        font-size: 2.8rem;
        text-transform: capitalize;
        font-weight: 500;
        color:rgb(255, 255, 255) ;
        margin-bottom: 2rem;}
        .headline .btn{
            font-size: 1.6rem;
            font-weight: 500;
            color: rgb(255, 255, 255);
            background: transparent;
            border: 2px solid rgb(255, 255, 255);
            padding: 0.5rem 1rem;
            cursor: pointer;
            border-radius: 20rem;}
        .headline .btn:hover{
            color:orangered;
            background: rgb(255, 255, 255);
            border: none;}
        .desti:hover .headline{
            height: 100%;
            box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;}
        /***********end section destination**********************/
        /***********start section activities**********************/
        .activities{
            width: 90%;
            margin:15rem auto 15rem auto;}
        .activities h2, .excursions h2, .gallery h2, .memories h2{
            font-size: 3.6rem;
            font-weight: 600;
            text-transform: capitalize;
            color: orangered;
            margin-bottom: 5rem;
            text-align: center;  }
        .activitie{
            display: flex;
            justify-content: center;
            align-items: start;
            gap: 4rem;}
        .acti{
            width: 25%;
            height: 35rem;
            padding: 0.5rem;
        text-align: center;}
        .acti img{
            width: 80%;
            height: 60%;
            border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
            box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;}
        .acti h4{
            font-size: 2.2rem;
            text-transform: capitalize;
            font-weight: 600;
            color: orangered;
            margin: 1rem 0;}
        .acti p{
            font-size: 1.4rem;
            text-transform: capitalize;
            margin-bottom: 1rem;}   
        /***********end section activities**********************/
        /***********start section excursionss**********************/
.excursions{
    width: 90%;
    margin: auto;}
.excursion{
    display: flex;
    justify-content: center;
    align-items: start;
    text-align: center;
    gap: 4rem;}
.excursion-left, .excursion-rigth{
    width: 28%;
     height: 37rem;
     padding: 0.5rem;
     box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;
    border-radius: 1rem;}
    .excursion-left img, .excursion-rigth img{
        width: 100%;
        height: 77%;
        border-radius: 1rem 1rem 0 0;}
     .excursion-left h4, .excursion-rigth h4{
        font-size: 2rem;
        text-transform: capitalize;
    margin-bottom: 1rem;}
        /***********end section excursions**********************/
        /***********start section memories**********************/


        /***********end section memories**********************/
        /***********end section gallery**********************/
.gallery{
    width: 90%;
    margin: auto;
    margin-top: 10rem;}
.gallery ul{
    width: 90%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;}
    .gallery ul li{
        list-style: none;
        height: 23rem;
        flex-grow: 1;}
    .gallery img{
        width: 100%;
        height: 100%;
        object-fit: cover;}
        /***********end section gallery**********************/
        /***********start section footer**********************/
        footer{
            width: 100%; 
            background-image:linear-gradient(rgba(18, 18, 18, 0.846),rgba(41, 41, 164, 0.357)),url(images/backroundfooter.jpg);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
            margin-top: 1rem;}
        .foot{
            display: flex;
            justify-content: space-around;
            align-items: start;
            padding-bottom: 1rem;}
        .footer-left{
            width: 35%;
            display: flex;
            flex-direction: column;
            align-items: start;}
        .footer-left h3, .footer-midle h3, .footer-rigth h3{
            display: inline-block;
            font-size: 1.6rem;
            text-transform: capitalize;
            font-weight: 600;
            color: white;
            border-bottom: 2px solid white;
           margin-bottom: 1rem;}
        .footer-left p{
            font-size: 1.4rem;
            color: white;
            text-transform: capitalize;
            margin-bottom: 1rem;}
        .footer-left i{
            font-size: 3rem;
            margin-right: 2rem;}
        .footer-left .fa-facebook{
            color: blue;}
        .footer-left .fa-square-instagram{
            color: rgba(231, 145, 5, 0.952);}
        .footer-left .fa-youtube{
            color: red;}
        .footer-midle{
        width: 25%;
        text-align: center;
    margin-top: 10rem;}  
        .footer-midle nav ul{
            display: flex;
            flex-direction: column;}
        .footer-midle li{
            margin: 1rem 0;}
        .footer-midle li:hover{
            border: none;}
            .footer-midle ul li a{
                font-size: 1.4rem;
                font-weight: 500;}  
        .footer-midle ul li a:hover{
        display: inline-block;
        border-bottom: 2px solid orangered;}
        .footer-rigth{
            width: 25%;
            margin-top: 10rem;}
        .footer-rigth i{
            font-size: 2rem;
            color: orangered;
            margin-right: 1rem;}
        .footer-rigth h4{
            display: inline-block;
            font-size: 1.4rem;
            font-weight: 500;
            color: white;
            margin: 1rem 0 1rem 0;} 
     footer h4{
        font-size: 1.4rem;
        font-weight: 500;
        color: white;
        text-align: center;
       padding-bottom: 1rem;}
        /***********end section footer**********************/
        /*********** start responsive mobile**********************/
        @media(min-width:320px) and (max-width:480px){

      /*** start section hero***/  
       
    .hero video{
        height: 100%;}
         header{
        width: 85%;
        margin: auto;
        height: 7rem;}
    header img{
        width: 80px;
        height: 80px;}
     header nav{
        position: absolute;
        top: 0;
        left: -100%;
        height: 100vh;
        width: 50%;
        text-align: start;
        padding: 2rem 0 0 3rem;
        background: white;
        z-index: 1;}
    nav ul li{
        width: 100%;
        margin: 1rem 0;
        position: relative;}
    nav ul li:hover, .active{
        border-bottom: 3px solid orangered;
         display: inline;}
        nav ul li a, .active{
            font-size: 1.8rem;
            font-weight: 700;
            text-transform: capitalize;
            text-decoration: none;
            color:orangered;}
    nav ul li .dropdown {
        width: 100%;
        position: relative;
        text-align: start;
        display:none;}
    nav ul li .dropdown li{
        width: 100%;
        position: relative;
        margin: 0.5rem 0 0.5rem 2rem;
    cursor: pointer;}
        nav ul li .dropdown li{
            border: 2px none;}
    nav ul li .dropdown li a{
        font-size: 1.7rem;
        font-weight: 600;
    cursor: pointer;}
        nav ul li .dropdown li a:hover{
        border-bottom: 3px solid orangered;}
        nav ul li::after ul{
            content: '';
        display: block;}
        #on {
            font-size: 3rem;
            color: white;
            display: block;}
        #mark{
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 2.2rem;
            color: white;
            background: orangered;
            padding: 0.2rem;
            display: block;}
    .content{
        width: 90%;
        margin: auto;}
    .content h1{
        font-size: 3rem;}
    .content p{
        font-size: 1.7rem;}
     /*** end section hero***/
 /******start section about*********/
 .about{
    width: 90%;
    margin:5rem auto 5rem auto;}
.about h2{
   font-size: 2.6rem;
   margin-bottom: 2rem;}
.text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;}
.text-left{
    width: 100%;
height: 220px;}
.text-left img{
    width: 100%;
   height: 100%;}
.text-rigth{
    width: 100%;}
/******end section about*********/
 /********start section destination*****************/
 .destinations{
    margin-top: 0rem;}
.destinations h2{
    font-size: 2.6rem;
    margin-bottom: 2rem;}
.destination{
    flex-direction: column;
    gap:2rem;}
.desti{
    width: 65%;
    height: 33rem;}
    /***********end section destination**********************/
  /***********start section activities**********************/
  .activities{
    margin:5rem auto 5rem auto;}
.activities h2, .excursions h2, .gallery h2, .memories h2{
    font-size: 2.6rem;
    margin-bottom: 2rem; }
.activitie{
    flex-direction: column;
    align-items: center;
    gap: 2rem;}
.acti{
    width: 90%;
    height: 36rem;
    padding: 0.3rem;}
.acti img{
    width: 70%;
    height: 50%;
    border-radius: 70% 30% 30% 70% / 60% 40% 60% 40%;
    box-shadow: 5px 5px 10px #5555558f,-5px -5px 10px #5555558f;}
.acti h4{
    font-size: 2rem;}
.acti p{
    width: 100%;}   
/***********end section activities**********************/
         /***********start section excursionss**********************/
.excursions{
    width: 90%;
    margin: auto;
margin-bottom: 0;}
.excursion{
    flex-direction: column;
    align-items:center;
    gap: 2rem;}
.excursion-left, .excursion-rigth{
    width: 65%;
     height: 33rem;
     padding: 0.3rem;}
    .excursion-left img, .excursion-rigth img{
        height: 65%;}
     .excursion-left h4, .excursion-rigth h4{
        font-size: 1.8rem;
        text-transform: capitalize;
        margin-bottom: 2rem;}
/***********end section excursions**********************/
/***********end section memories**********************/
.memories{
    width: 95%;
    margin:5rem auto 5rem auto;} 
    .swiper {
        width: 100%;}
      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 200px;}
      .swiper-slide img {
        display: block;
        width: 80%;
        height: 250px;}  
/***********end section memories**********************/
/***********end section gallery**********************/
.gallery{
    margin-top: 0rem;}
.gallery ul{
    width: 90%;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;}
    .gallery ul li{
        list-style: none;
        height: 23rem;
        flex-grow: 1;}
    .gallery img{
        width: 100%;
        height: 100%;
        object-fit: cover;}
        /***********end section gallery**********************/   
    /***********start section footer**********************/
    .foot{
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        padding:1rem;}
    .footer-left{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: start;}
    .footer-left h3, .footer-midle h3, .footer-rigth h3{
        display: inline-block;
        font-size: 1.6rem;
        text-transform: capitalize;
        font-weight: 600;
        color: white;
        border-bottom: 2px solid white;
       margin-bottom: 1rem;
    text-align: start;}
    .footer-left p{
        font-size: 1.4rem;
        color: white;
        text-transform: capitalize;
        margin-bottom: 1rem;}
    .footer-left i{
        font-size: 3rem;
        margin-right: 2rem;}
    .footer-left .fa-facebook{
        color: blue;}
    .footer-left .fa-instagram{
        color: peru;}
    .footer-left .fa-youtube{
        color: red;}
    .footer-midle{
    width: 80%;
    text-align: start;
    margin-top: 2rem;}  
    .footer-midle nav ul{
        display: flex;
        flex-direction: row;
        justify-content: start;
        align-items: start;}
    .footer-midle li{
        margin-right: 1.2rem ;}
    .footer-midle li:hover{
        border: none;}
        .footer-midle ul li a{
            color: white;
            font-size: 1.2rem;}  
    .footer-rigth{
        width: 90%;
        margin-top: 2rem;}
    .footer-rigth i{
        font-size: 1.6rem;
        color: orangered;
        margin-right: 0.5rem;}
    .footer-rigth h4{
        display: inline-block;
        font-size: 1.4rem;
        font-weight: 500;
        color: white;
        margin: 0.3rem 0 0.3rem 0;} 
 footer h4{
    font-size: 1.4rem;
    font-weight: 500;
    color: white;
    text-align: center;
   padding-bottom: 1rem;}}
    /***********end section footer**********************/ 
    /***********responsive tablet*******************/
    @media(min-width:481px) and (max-width:768px){
       /*** start section hero***/   
       .hero video{
        height: 100%;}
         header{
        width: 85%;
        margin: auto;}
        .content p{width: 75%;
        margin: auto;
    margin-bottom: 2rem; }
    header img{
        width: 100px;
        height: 100px;}
        header nav{
            position: absolute;
            top: 0;
            left: -100%;
            height: 100vh;
            width: 40%;
            text-align: start;
            padding: 2rem 0 0 3rem;
            background: white;
            z-index: 1;}
    nav ul li{
        width: 100%;
        margin: 1rem 0;
        position: relative;}
    nav ul li:hover, .active{
        border-bottom: 3px solid orangered;
         display: inline;}
        nav ul li a, .active{
            font-size: 2.4rem;
            font-weight: 700;
            text-transform: capitalize;
            text-decoration: none;
            color:orangered;}
    nav ul li .dropdown {
        width: 100%;
        position: relative;
        text-align: start;
        display:none;}
    nav ul li .dropdown li{
        width: 100%;
        position: relative;
        margin: 0.5rem 0 0.5rem 2rem;}
        nav ul li .dropdown li{
            border: 2px none;}
    nav ul li .dropdown li a{
        font-size: 2.2rem;
        font-weight: 600;}
        nav ul li .dropdown li a:hover{
        border-bottom: 3px solid orangered;}
        nav ul li:hover ul{
        display: block; }
        #on {
            font-size: 4rem;
            color: white;
            display: block;}
        #mark{
            position: absolute;
            top: 1rem;
            right: 1rem;
            font-size: 2.6rem;
            color: white;
            background: orangered;
            padding: 0.2rem;
            display: block;}
    .content{
        width: 90%;
        margin: auto;}
    .content h1{
        font-size: 3.8rem;}
    .content p{
        font-size: 2.2rem;}
     /*** end section hero***/
 /******start section about*********/
 .about{
    width: 90%;
    margin:5rem auto 5rem auto;}
.about h2{
   font-size: 2.6rem;
   margin-bottom: 2rem;}
.text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;}
.text-left{
    width: 100%;
height: 300px;}
.text-left img{
    width: 100%;
   height: 100%;}
.text-rigth{
    width: 100%;}
    .text-rigth P{
        font-size: 1.6rem;
        text-transform: capitalize;
        margin-bottom:2rem ;}
/******end section about*********/
 /********start section destination*****************/
 .destinations{
    margin-top: 10rem;}
.destinations h2{
    font-size: 2.6rem;
    font-weight: 600;
    color: orangered;
    margin-bottom: 2rem;}
.destination{ 
    flex-wrap: wrap;}
.desti{
    position: relative;
    width: 38%;}
    /***********end section destination**********************/
     /***********start section activities**********************/
     .activities{
        width: 95%;
        margin:10rem auto 10rem auto;}
    .activities h2, .excursions h2, .gallery h2, .memories h2{
        font-size: 2.6rem;
        font-weight: 600;
        text-transform: capitalize;
        color: orangered;
        margin-bottom: 3rem;
        text-align: center;  }
    .activitie{
        gap: 1rem;}
    .acti{
        width: 33%;
        height: 35rem;
        padding: 0.5rem;
    text-align: center;}
    .acti h4{
        font-size: 2rem;}
    /***********end section activities**********************/
        /***********start section excursionss**********************/
.excursion-left, .excursion-rigth{
    width: 40%;
     height: 37rem;}
    .excursion-left img, .excursion-rigth img{
        height: 65%;}
     .excursion-left h4, .excursion-rigth h4{
        font-size: 2rem;
        text-transform: capitalize;
        margin-bottom: 1rem;}
        /***********end section excursions**********************/
    /***********end section gallery**********************/
    .gallery{
        width: 95%;
        margin: auto;
        margin-top: 0rem;}
.gallery ul{
    width: 100%;} 
        /***********end section gallery**********************/ 
 /***********start section footer**********************/
 .foot{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding:1rem;}
.footer-left{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: start;}
.footer-left h3, .footer-midle h3, .footer-rigth h3{
    display: inline-block;
    font-size: 1.6rem;
    text-transform: capitalize;
    font-weight: 600;
    color: white;
    border-bottom: 2px solid white;
   margin-bottom: 1rem;
text-align: start;}
.footer-left p{
    font-size: 1.5rem;
    color: white;
    text-transform: capitalize;
    margin-bottom: 1rem;}
.footer-left i{
    font-size: 3rem;
    margin-right: 2rem;}
.footer-left .fa-facebook{
    color: blue;}
.footer-left .fa-instagram{
    color: peru;}
.footer-left .fa-youtube{
    color: red;}
.footer-midle{
width: 90%;
text-align: start;
margin-top: 2rem;}  
.footer-midle nav ul{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;}
.footer-midle li:hover{
    border: none;}
    .footer-midle ul li a{
        color: white;
        font-size: 1.6rem;}  
.footer-rigth{
    width: 50%;
    margin-top: 2rem;}
.footer-rigth i{
    font-size: 1.6rem;
    color: orangered;
    margin-right: 0.5rem;}
.footer-rigth h4{
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 500;
    color: white;
    margin: 0.3rem 0 0.3rem 0;} 
footer h4{
font-size: 1.6rem;
font-weight: 500;
color: white;
text-align: center;
padding-bottom: 1rem;}}
/***********end section footer**********************/ 
/***********responsive laptop **********************/ 
@media(min-width:769px) and (max-width:1024px){
    /*** start section hero***/   
    .hero video{
        height: 100%;} 
.up{ z-index: 1;}
.destinations{
    width: 95%;
gap: 1;} 
.desti{
   position: relative;
   width: 25%;}
.acti{
    width:30%;} 
    .excursion-left, .excursion-rigth{
        width: 40%;}
        .gallery{width: 95%;
            margin-top: 0rem;}
        .gallery ul{
            width: 100%;
            margin: auto;
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;}
            .footer-rigth{
                width: 35%;
                margin-top: 10rem;}
}