@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

html{scroll-behavior: smooth; overflow-x: hidden;}
*{margin: 0; padding: 0;}
body {margin: 0; padding: 0; width: 100%; background: #f6f7eb; height: auto;}
.clearleft{clear: left;}
.clearboth{clear: both;}
.left{float: left;}
.right{float: right;}

p, a, input, select, textarea, ul, li, label{font-family: 'Lato', sans-serif;, sans-serif; font-weight: 400;}
h1, h2, h3, h4, h5, h6{font-family: 'Lato', sans-serif;, sans-serif; font-weight: 700;}
input:focus, select:focus, option:focus {outline: none !important;}


.banner{width: 100%; background: url("../images/banner.jpg") no-repeat top center; box-shadow: inset 0 0 0 1000px rgba(26,9,13,.6);}
.header{width: 80%; margin: 0 auto; padding: 55px 0 40px 0;}
.logo{float: left; }
.navigation{float: right; padding: 10px 0; font-size: 14px;}
.btn{margin:0 0 5px 0; display: block; font-size: 12px;}
.btn i {display: inline-block; background: rgba(26,9,13,.9); height: 30px; line-height: 30px; width: 30px; color: #FFF; text-align: center; border-radius: 15px;}
.btn p {display: inline-block; background: rgba(26,9,13,.9); height: 30px; line-height: 30px; width: 100px; color: #FFF; padding: 0 0 0 10px; margin: 0 0 0 -8px; border-radius: 15px 15px 0 15px; text-transform: uppercase;}
.btn:focus i, .btn:hover i {color: #e94f37 !important;}

.banner_package{width: 80%; margin: 0 auto; padding: 120px 0 40px 0;}
.banner_package h1{font-size: 140px; color: rgba(26,9,13,0.9); text-transform: uppercase; font-weight: 900; position: relative; margin: 0 0 -77px -7px; z-index: 1;}
.banner_package h2{font-size: 45px; color: #FFF; text-transform: uppercase; font-weight: 700; z-index: 100; position: relative;}
.banner_package p{color: #FFF;}
.package_details{padding: 10px 0;}
.package_details p{line-height: 22px; font-size: 18px;}
.package_duration_details {padding: 5px 0; font-size: 20px;}
.package_duration_details p{float: left;}
.package_duration_details i{color: #e94f37; padding: 0 3px 0 0;}

.btn2{margin:8px 0; font-size: 12px; color: #fff; text-decoration: none; line-height: 30px; height:30px; text-transform: uppercase; background: #e94f37; border-radius: 14px 14px 0 14px; display: block; width: 120px; text-align: center; transition: 0.5s all ease-in;}
.btn2:hover{background: #1a5849;}

.title{ text-align: center; text-transform: uppercase; padding: 0 0 20px 0;}
.title h1{font-size: 30px; color: #e94f37; font-weight: 900; line-height: 34px;}
.title p{font-size: 18px; color: #888; font-weight: 300;}

.packages_plc{margin: 25px auto; width: 80%;}
.package{width: 48%; background-size: cover; border-radius: 20px 20px 0 20px; margin-bottom: 30px;}
.package_bg{width: 90%; padding:70px 5% 0 5%;  background: rgba(26,9,13,0.75); border-radius: 20px 20px 0 20px;}
.package h2{font-size: 22px; color: #FFF; text-transform: uppercase; font-weight: 700; z-index: 100; position: relative;}
.package p{color: #FFF;}
.package_details{padding: 10px 0;}
.package_details p{line-height: 22px; font-size: 16px;}
.package_duration_details2 {padding: 5px 0; font-size: 14px;}
.package_duration_details2 p{float: left;}
.package_duration_details2 i{color: #e94f37; padding: 0 3px 0 0;}
.btn3{margin:8px 0 0 0; font-size: 12px; color: #fff; text-decoration: none; line-height: 30px; height:30px; text-transform: uppercase; background: #e94f37; border-radius: 14px 14px 0 14px; display: block; width: 100%; text-align: center; transition: 0.5s all ease-in; border: none;}
.btn3:hover{background: #1a5849; cursor: pointer;}

.p1{background: url("../images/1.png") no-repeat center center;}
.p2{background: url("../images/2.png") no-repeat center center;}
.p3{background: url("../images/3.png") no-repeat center center;}
.p4{background: url("../images/4.png") no-repeat center center;}

.destinations_plc{background: #eee; margin: 40px 0; padding: 40px 0;}
.destinations_plc_in{width: 86%; margin: 0 auto; padding: 0 0 0 4%;}
.destinations_plc_in a{text-decoration: none; background-size: cover;}
.destination{float:left; display: block; width: 23%; margin:0 1% 0 0;}
.destination h2{color: #e94f37; font-size: 20px; padding: 100px 5px 5px 8px; background: rgba(0,0,0,0.8); transition: 0.4s all ease-in;}
.destination h2:hover {color: #FFF; font-size: 20px; padding: 100px 5px 5px 8px; background: rgba(26,9,13,0.5);}

.d1{background: url("../images/d1.jpg") no-repeat center center; }
.d2{background: url("../images/d2.jpg") no-repeat center center; }
.d3{background: url("../images/d3.jpg") no-repeat center center; }
.d4{background: url("../images/d4.jpg") no-repeat center center; }

.about{margin: 0 auto; width: 80%; padding:10px 0 40px 0; color: #333; text-align: center;}
.about_txt p{padding:10px 0; font-size: 14px;}

.footer_bg{margin:10px 0 0 0; padding: 5px 0; width: 100%; background: #e94f37;}
.footer_bg p{color: #fff; font-size: 12px; text-align: center;}

.nav h2{font-size: 24px; padding: 8px 0; margin: 0 0 10px 0; text-transform: uppercase; text-align: center; color: #FFF; line-height: 32px; background: #e94f37; border-radius: 10px;}
.nav ul{list-style: none; text-align: left;}
.nav ul li {line-height: 44px; border-bottom: 1px solid #e94f37; padding: 0 10px;}
.nav ul li a{font-size: 16px; text-transform: uppercase; text-decoration: none; color: #FFF; font-weight: 700;}
.nav ul li a:hover{color: #e94f37;}
.nav ul li a i{color: #e94f37; width: 26px;}

.container-iframe { position: relative; width: 70%; margin: 0 auto; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ }
.container-iframe2 { position: relative; width: 50%; padding: 0 10%; margin: 20px auto; overflow: hidden; padding-top: 22%; /* 16:9 Aspect Ratio */ }
.responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; }

.contact_txts{width: 80%; max-width: 300px; margin: 0 auto;}
.contact_txts p {line-height: 24px; font-size: 16px; text-align: left;}
.contact_txts p i {padding: 0 10px 0 0; color: #e94f37; width: 25px; text-align: center;}
.contact_txts p a {color: #333; text-decoration: none;}
.contact_txts p a:focus {color: #e94f37; text-decoration: underline;}
.contact_txts p a:hover {color: #e94f37; text-decoration: underline;}

/********************* packages ********************/

.package_desc{width: 580px; margin: 0 auto; padding: 50px 0;}
.package_desc h1{font-size: 30px; color: #e94f37; font-weight: 900; line-height: 34px;}
.itinerary_day{margin-top: 18px; position: relative;}
.itinerary_day h2{font-size: 22px; color: #e94f37; font-weight: 900; line-height: 34px;}
.itinerary_day p{font-size: 15px; color: #333; line-height: 20px;}
.itinerary_day ul{list-style: none; padding: 10px 0 10px 20px;}
.itinerary_day ul li{font-size: 14px; color: #333; line-height: 20px;}
.itinerary_tips {font-size: 12px!important; color: #e94f37!important; font-style: italic;}


#tooltip{
    position: absolute;
    width: 536px;
    padding: 4px;
    margin: 0;
    background: #fff;
    opacity: 0;
    transition: opacity 0.2s;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.4);
    z-index: 1000;
    overflow-x: hidden;
}

#tooltip img{
    display: block;
    padding: 0;
    margin: 0;
    width: 100%;
}

p span{ cursor: pointer; }
.show{ opacity: 1 !important; }

/****************** lightbox ****************/
    #lightbox {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    #lightbox-content {
      background: rgba(26,9,13,.9);
      padding: 24px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    }

    #close-lightbox {
      cursor: pointer;
      position: absolute;
      top: 15px;
      right: 15px;
      font-size: 24px;
      color: #333;
    }

    #open-lightbox {
      cursor: pointer;
    }

/*********************** scroll bar **********************/

/* width */
::-webkit-scrollbar {
  width: 14px;
  background: #1a090d;
}

/* Track */
::-webkit-scrollbar-track {
}
 
/* Handle */
::-webkit-scrollbar-thumb {
  background: #e94f37; 
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #1a5849; 
}


/*************************************/

@media only screen and (max-width: 600px){
	.banner_package h1 {display: none;}
	.container-iframe {width: 100%;}
	.container-iframe2 {width: 70%; padding-top: 56.25%;}
}
@media only screen and (max-width: 425px){
	.package_desc{width: 80%; padding: 30px 0;}
}