@import"https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    scroll-behavior:smooth;
}
body{
background:#111;
}
section{
 position:relative;
    padding:100px;
}
.header{
    position:absolute;
    top:0;
    left:0;
    z-index:10000000;
    display:flex;
    justify-content:space-between;
    width:100%;
    padding-top:20px;
    padding-bottom:20px;
}

.header .logo{
    color:white;
    text-decoration:none;
    font-size:1.2rem;
}
.header .logo img{
max-width:40px;
cursor:pointer;
}
.banner{
    position:relative;
    width:100%;
    min-height:100vh;
    justify-content:center;
    align-items:center;
    display:flex;
}
.banner::before{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:400px;
z-index:1;
background:linear-gradient(to top,#111,transparent);
}
.banner .content{
position:relative;
max-width:900px;
text-align:center;
z-index:1;
}
.banner .content h2{
    font-size:5em;
    color:#fff;
}
.banner .content p{
    font-size:1.2em;
    color:#fff;
}
.btn{
    display:inline-block;
    text-decoration:none;
    color:#333;
    background-color:#fff;
    position:relative;
    margin-top:30px;
    padding:10px 30px;
}
.fitBg{
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    opacity:1;
    
}
.about{
    position:relative;
    display:flex;
    width:100%;
    justify-content:center;
    align-items:center;
}
.about .contentBx{
    max-width:50%;
    width:50%;
    text-align:end;
    padding-right:40px;
}
.titleText{
    font-weight:600;
    color:#fff;
    margin-bottom:10px;
    font-size:2em;
}
.text{
    color:#fff;
    font-size:1em;
}
.about .imgBx{
    position:relative;
    min-height:500px;
    min-width:50%;
}
.banner2
{
 width:100%;
height:100vh;
object-fit:cover;
position:relative;
display:flex;

}
.banner2::before
{
content:'';
position:absolute;
top:0;
left:0;
width:100%;
height:400px;
z-index:1;
background:linear-gradient(to top,#111,transparent);
}
.banner2::after
{
content:'';
position:absolute;
bottom:0;
left:0;
width:100%;
height:400px;
z-index:1;
background:linear-gradient(to bottom,#111,transparent);
}
 .destination{
text-align:center;

 }
 .destination .contentBx{
     text-align:center;
     
 }
 .destination .destinationList{
position:relative;
display:flex;
justify-content:center;
align-items:center;
flex-wrap:wrap;
margin-top:40px;
 }
 .destination .destinationList .box{
     position:relative;
     min-width:350px;
     height:480px;
     background:#191919;
     transition:0.5s;
     margin:10px;
     
 }
  .destination .destinationList:hover .box{
      opacity:0.2;
  }
   .destination .destinationList .box:hover{
      opacity:1;
  }
  .destination .destinationList .box .imgBx{
      position:relative;
      width:100%;
      height:400px;

  }
  .destination .destinationList .box .content{
      width:100%;
      height:80px;
      display:flex;
      justify-content:center;
      align-items:center;
  }
  .destination .destinationList .box .content h2{
      font-weight:500;
      line-height:1.2em;
      color:#fff;
  }
  .destination .destinationList .box .content h2 span{
      font-size:0.8em;
      font-weight:300;
      opacity:0.8;
  }
  .banner3{
 width:100%;
height:100vh;
object-fit:cover;
position:relative;
display:flex;
}
.footer{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:column;
}
.footer .sci{
    position:relative;
    display:flex;
}
.footer .sci li{
    list-style-type:none;
}
.footer .sci li a{
    text-decoration:none;
    margin:0 20px;
}
.footer .sci li a img{
    filter:invert(1);
    max-width:40px;
}
.copyrightText{
    margin-top:20px;
    color:#fff;
    font-size:18px;
    font-weight:300;
    color:#666;
    text-align:center;
}
.copyrightText a{
    color:#fff;
    text-decoration:none;
}


@media(max-width:767px){
    section{
        padding:40px;
    }
    .banner .content h2{
        font-size:2.5em;
    }
    .banner .content p{
        font-size:1.2em;
    }
    .about{
        flex-direction:column;
    }
    .about .contentBx,
    .about .imgBx img{
        min-width:100%;
        width:100%;
        text-align:center;
        padding-right:0px;
    }
    .about .imgBx{
        min-height:250px;
    }
    .btn{
        margin-bottom:20px;
    }
    .destination .destinationList .box{
        position:relative;
        max-width:350px;
        min-width:initial;
        width:350px;
        height:400px;
    }
    .destination .btn{
        margin-top:90px;
    }
    .destination ..destinationList .box .imgBx{
        height:200px;
    }
    .footer .sci li a img{
        filter:invert(1);
        max-width:30px;
    }
}