* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* overflow: hidden; */
    list-style: none;
    text-decoration: none;
    transition: 0.6s linear;
}

/* header starts */
.header {
    background: linear-gradient(to bottom,
            rgba(248, 242, 242, 0.014),
            rgba(0, 0, 0, 50)), url("../img/aurora-borealis-in-the-mountains_3840x2400_xtrafondos.com.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 767px;
    width: 100%;
    z-index: 1;

}

.header .nav-header .ul-header {
    z-index: 50;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 90px;
   
}
.header .nav-header .fa-bars{
    font-size: 2rem;
    cursor: pointer;
    color: lightskyblue;
    position: absolute;
    right: 50px;
    top: 50px;
    display: none;
    position: fixed;
    z-index: 500;
}
.header .nav-header .fa-bars:hover{
    color: lightgreen;
}
.header .nav-header .fa-x{
    
    font-size: 2rem;
    cursor: pointer;
    color: lightskyblue;
    position: absolute;
    right: 50px;
    top: 50px;
    display: none;
    position: fixed;
    z-index: 500;
}
.header .nav-header .fa-x:hover{
    color: lightgreen;
}
.header .nav-header .ul-header li a {
    color: #fff;
    font-weight: 700;
    font-size: 20px;
    font-family: sans-serif;
    text-transform: uppercase;
}

.header .nav-header .ul-header li a:hover {
    color: lightgreen;
}

.header .nav-header .ul-header li .log {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100px;
}

.header .nav-header .ul-header li img {
    width: 90px;
    color: #fff !important;

}

.header .textcenter {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding-top: 200px;
    text-align: center;
    overflow: hidden;
}

.header .textcenter h1 {
    color: rgba(240, 248, 255, 0.397);
    text-transform: uppercase;
    font-size: 12vw;
    background-color: rgb(0, 255, 170);
    background: linear-gradient(to right, rgb(5, 252, 219), rgb(3, 243, 83), rgb(65, 145, 0), rgba(0, 112, 60, 0.671), rgb(45, 238, 6), rgba(75, 145, 124, 0.658) );
    -webkit-background-clip: text;
    background-clip: text;
    top: 0;
    text-shadow: 3px 3px 3px rgba(255, 255, 255, 0.068);
    position: relative;
    left: -100%;
}

.header .textcenter p {
    margin: 50px 20px;
    line-height: 20px;
    text-transform: uppercase;
    font-weight: 500;
    position: relative;
    left:100%;
   
}

.header .textcenter button {
    padding: 20px 30px;
    background: none;
    border-radius: 40px;
    color: lightgreen;
    border: 2px solid lightgreen;
    text-transform: uppercase;
    cursor: pointer;
}

.header .textcenter button:hover {
    color: rgb(73, 209, 73);
    border: 2px solid rgb(51, 163, 51);
}

/* tours css elements starts */

.tours {
    height: 100vh;
    background-color: rgb(3, 2, 2);
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 30px;
    text-transform: uppercase;
    font-family: sans-serif;
    flex-wrap: wrap;
}
.tours h1{
    color: rgba(255, 255, 255, 0.473);
    font-size: 3rem;
    font-family: sans-serif;
    text-transform: uppercase;
    background-color: red;
    background: linear-gradient(to left, rgb(158, 81, 81), rgb(121, 121, 121), rgb(2, 217, 255));
    -webkit-background-clip: text;
    background-clip: text;
}
.box-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 50px;


}

.box {
    position: relative;
    z-index: 10;
   
}

.container .box img {

    height: 550px;
    width: 25vw;
    border-radius: 10px;
    object-fit: cover;
     text-align: left;

}

.container .box p {
    font-size: 2vw;
    position: absolute;
    left: 40%;
    top: 50%;
    z-index: 100;
    
}
.container .box .aze{
   left: 27% !important;
}

.swiper-slide {
    color: #fff;
}

.swiper-button-next {
    right: 0;
}

.swiper-button-prev {
    left: 0;
}

.swiper-pagination-bullet {
    background-color: #6E93f7;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: #4070F4;
}

.slide-content {
    margin: 0 40px;
    overflow: hidden;

}
/* video starts */
.video {
    background: linear-gradient(rgb(0, 0, 0),
            rgba(248, 242, 242, 0),
            rgba(0, 0, 0)), url("../img/70-701551_city-dubai-photograph-from-the-top-of-skyscrapers.jpg") no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 767px;
    width: 100%;
    z-index: 1;
}


.video {
    display: flex;
    align-items: center;
    justify-content: center;
  
}

.video .swiper {
    margin-left: 200px;

}

.video .text-container {
    margin-left: 100px;
    width: 100%;
}

.video .text-container h1 {
    font-size:3.9vw;
    text-transform: uppercase;
    z-index: 100;
    color: #fff;
    font-family: sans-serif;
    background-color: red;
    background: linear-gradient(to left, rgb(158, 81, 81), rgb(121, 121, 121), rgb(2, 217, 255));
    -webkit-background-clip: text;
    background-clip: text;
    position: relative;
    left: -180%;
}

.video .text-container p {
    z-index: 100;
    color: rgb(206, 206, 206);
    font-family: sans-serif;
    position: relative;
    left: -140%;
}

.video .swiper .swiper-wrapper .swiper-slide img {
    width: 350px;
    height: 350px;
    border-radius: 10px;
}

.video .swiper .swiper-wrapper video {
    width: 30vw !important;
    border-radius: 10px;
}

/* gallery starts */
.gallery {
    height: 100vh;
    background-color: black;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;

}

.gallery h1 {
    color: rgba(255, 255, 255, 0.473);
    font-size: 3rem;
    font-family: sans-serif;
    text-transform: uppercase;
    background-color: red;
    background: linear-gradient(to left, rgb(158, 81, 81), rgb(121, 121, 121), rgb(2, 217, 255));
    -webkit-background-clip: text;
    background-clip: text;


}

.gallery .containerimg {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 90vh;
    gap: 40px;
    row-gap: 20px;
    column-gap: 20px;
    overflow: hidden !important;
}

.gallery .containerimg img {
    width: 35vw;
    height: 270px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
}

.gallery .containerimg .boxleft img {
    height: 563px;
    width: 35vw;
    border-radius: 10px;
    object-fit: cover !important;
    cursor: pointer;
    object-position: right;
    margin-top: 1px;
    position: relative;
    left: -100%;

}

.gallery .containerimg .boxright {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    left: 100%;
}
/* contacts starts */
.contact{
    background:  linear-gradient(rgb(0, 0, 0),
    rgba(248, 242, 242, 0),
    rgba(0, 0, 0)),url("../img/indo2.webp") no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 767px;
    width: 100%;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.contact h1{
    font-size: 3.5rem;
    text-transform: uppercase;
    z-index: 100;
    color: rgba(255, 255, 255, 0.322);
    font-family: sans-serif;
    background-color: red;
    background: linear-gradient(to left, rgb(158, 81, 81), rgb(131, 17, 17), rgb(226, 140, 12));
    -webkit-background-clip: text;
    background-clip: text;
}


.contact .container-box{
    display: flex;
    justify-content: space-around;
    width: 80%;
}

.contact .info{
    font-family: serif;
    line-height: 3vw;
    font-size: 2vw;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.322);
 font-family: sans-serif;
 background-color: red;
 background: linear-gradient(to left, rgb(158, 81, 81), rgb(131, 17, 17), rgb(226, 140, 12));
 -webkit-background-clip: text;
 background-clip: text;
}

.contact  input{
 background: none;
 border: none;
 border-bottom:2px solid rgb(207, 98, 34) ;
 line-height: 50px;
 width: 500px;
 outline: none;
 font-size: 2rem;
 color: rgba(255, 255, 255, 0.322);
 font-family: sans-serif;
 background-color: red;
 background: linear-gradient(to left, rgb(158, 81, 81), rgb(131, 17, 17), rgb(226, 140, 12));
 -webkit-background-clip: text;
 background-clip: text;
}

.contact textarea{
    margin-top: 50px;
    background: none;
    border: none;
    font-size: 1.5rem;
    height: 4rem;
 border:2px solid rgb(207, 98, 34) ;
 outline: none;
 color: rgba(255, 255, 255, 0.322);
 font-family: sans-serif;
 background-color: red;
 background: linear-gradient(to left, rgb(158, 81, 81), rgb(131, 17, 17), rgb(226, 140, 12));
 -webkit-background-clip: text;
 background-clip: text;
}


.contact button {
    margin-top: 20px;
    font-weight: 600;
    padding: 20px 30px;
    background: none;
    border-radius: 40px;
    color: lightgreen;
    border: 2px solid rgb(207, 98, 34);
    text-transform: uppercase;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.322);
 font-family: sans-serif;
 background-color: red;
 background: linear-gradient(to left, rgb(158, 81, 81), rgb(131, 17, 17), rgb(226, 140, 12));
 -webkit-background-clip: text;
 background-clip: text;
}


/* footer starts */

footer{
    background-color: black;
    color: #fff;
    text-align: center;
   
    padding-top: 100px;
}

footer .container{
    display: flex;
    text-align: center;
    justify-content: space-between;
    width: 100%;
    padding: 0 20px 0 70px;
}
footer .container div{
    width: 25%;
    text-align: left;
}

footer .container .left{
width: 25%;
line-height: 30px;
}

footer .container .left2{
    display: flex;
    flex-direction: column;
    line-height: 30px;
    margin-left: 190px;
}

footer .container .left2 a{
    color: #fff;
}

footer .container .right2{
    line-height: 30px;
}

footer .container .right{
    line-height: 30px;
}

footer .container .searchbtn{
    color: #fff;
    background: none;
    border:1px solid white;
    border-left: none;
   padding: 4px;
   cursor: pointer;
}
footer .container input{
    padding:5px ;
    border: none;
    outline: none;
}

footer  .p{
    padding: 20px;
  
}











@media only screen and (max-width: 2000px){
    .header .nav-header .fa-bars{
        display: none !important;
    }
    .header .nav-header .fa-x{
        display: none ;
    }
}


/* Responsive */

/* Ipad Air */
@media only screen and (max-width: 820px){
    .video .swiper .swiper-wrapper video{
        width: 400px !important;
    }
    .container .box img{
        width: 300px;
    }
    footer .container {
       padding: 0 10px 0 10px;
       display: flex;
       flex-direction: column;
    }
    footer .container .left{
        width: 100%;
    }
    footer .container .left2 {
      display: block;
      margin: 20px 0 20px 0;
      
    }
    footer .container .left2 a{
        margin-right: 10px;
    }
    footer .container div{
        width: 100%;
    }
    footer .container .right2 {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
    }
    footer .container .right2 h3{
        margin-right:  10px;
    }
    footer .container .right2 p{
        margin-right:  10px;
    }
    footer .container .right {
        display: flex;
        margin-bottom: 10px;
    }
    footer .container .right p{
        margin: 0 10px 0 10px
    }
}

@media only screen and (max-width: 800px){
    .header .nav-header .ul-header {
         display: flex;
         flex-direction: column;
        position: fixed;
        right: -100%;
        top:0;
        background-color: #4070f4;
        height: 100vh;
        line-height: 70px;
        z-index: 700;
    }
    .header .nav-header .fa-bars{
        display: block !important;
        
    }
    .video .swiper {
        margin-left: 100px;
    }
}

@media only screen and (max-width: 768px){
    .contact input{
        width: 55vw;
    }
    .contact textarea{
        width: 45vw;
    }
    .contact .info{
        font-size: 2.5vw;
        line-height: 40px;
    }
    .video .text-container h1 {
        width: 300px !important;
    }
    .video .text-container {
        margin-left: 20px;
    }
    .gallery .containerimg .boxleft img{
        width: 55vw !important;
    }
}

@media only screen and (max-width: 540px){
    .video .swiper{
        margin-left: 0px;
    }
    .video .swiper .swiper-wrapper video{
        width: 45vw !important
    }
    .video .text-container{
        width: 70% !important;
        margin-left: 5px;
    }
}

@media only screen and (max-width: 440px){
    .container .box p{
        font-size: 5vw;
    }
    .container .box img{
        width: 330px !important;
    }
    .video .text-container{
        width: 30% !important;
    }
    .video .swiper .swiper-wrapper video{
        width: 65vw !important;
    }
    footer .container .right{
        display: block !important;
    }
}