:root {
      --bg: #000;
      --panel: #181818;
      --panel-soft: #202020;
      --charkol-gray: #282828;
      --gold: #f8b400;
      --gold-deep: #a0895f83;
      --text: #f7f7f7;
      --muted: #bdbdbd;
      --white: #fff;
      --line: rgba(255, 255, 255, 0.15);
      --charkol-bg-gray: rgba(30, 30, 30, 0.8);
      --dotted:#6E6767;
    }

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
   html { scroll-behavior: smooth; font-size: 62.5%; /*10 px*/}
   h1,h2,h3,h4,h5,h6 { margin: 0; padding: 0; }
   a { text-decoration: none; }
   .container { max-width: 130rem; margin: 0 auto; padding: 0 2rem;}

      body {
        margin: 0;
        background: var(--bg);
        color: var(--text);
        font-family: 'Lato', Arial, Helvetica, sans-serif;
      }

/*Header*/
header{margin:0; padding:0}
header .container{display:flex; align-items:center; justify-content:space-between;}
header .logo{margin:0; padding:0;}
header nav{flex:1; display:flex; justify-content:center;}
header nav ul{display:flex; list-style:none; gap:2.2rem;}
header nav ul li a{color:var(--text); text-decoration:none; font-weight:400; font-size:1.8rem; transition:0.3s;}
header nav ul li a:hover{color:var(--gold);}
header a.call{display:flex; padding:0rem 1.2rem; color:var(--gold); border-radius:0.8rem;  text-decoration:none; transition:0.3s; align-items:center; border:0.2rem solid transparent;}
header a.call svg{width:3.5rem; height:3.5rem; margin-right:1.5rem;}
header a.call span{font-weight:800; font-size:3rem; line-height:2;}
header a.call:hover{background:transparent; color:var(--text); border-color:var(--gold);}
/*End Header*/

/*Hero*/
.hero{padding:4rem 0 0 0; margin:0;}
.hero .container{display:flex; align-items:center; gap:5rem;}
.hero .container .content{flex:1;}
.hero .container .content h1{font-size:4.7rem; line-height:1.2em; margin-bottom:2rem; font-weight:800;}
.hero .container .content p{font-size:1.8rem; color:var(--muted); margin-bottom:3rem; line-height:2.8rem;}
.hero .container .content a{display:inline-block; padding:1rem 2.5rem;  background:var(--gold); color:var(--bg); border-radius:0.8rem; text-decoration:none; font-weight:700; font-size:2rem; transition:0.3s; border:0.2rem solid transparent;}
.hero .container .content a:hover{background:transparent; color:var(--text); border:0.2rem solid var(--gold);}
.hero .container .hero-image{width:65.4rem; height:59rem; border-radius:3rem 3rem 3rem 20rem; overflow:hidden; border-bottom:1rem solid var(--dl);}
.hero .container .hero-image img{width:100%; height:100%; object-fit:cover; object-position:top;}
/*End Hero*/

/*packages*/
.packages{padding:6.5rem 0;}
.sec-heading{font-size:3.5rem; text-align:center; margin-bottom:4rem;}
.sec-heading span{color:var(--gold); font-size:2rem; font-weight:500; text-transform: uppercase; display:block; margin-bottom:0.5rem;}
.package-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:3.5rem;}
.package-item{background:var(--charkol-gray); border-radius:1rem; padding:1rem;transition:0.3s; border:0.1rem solid var(--gold-deep);}
.inner-elements{position:relative; overflow:hidden; border-radius:1rem;}
.package-item img{width:100%; height:100%; object-fit:cover; position: absolute; left:0; top:0; transition:0.3s;}
.package-content{background: rgba(0,0,0,0.5); position:relative; padding:4rem; z-index:1}
.package-content h3{font-size:3rem; line-height:3rem; font-weight:700; margin-bottom:1.8rem;}
.package-content .duration{background:var(--gold); color:var(--bg); display:inline-block; padding:0.3rem 1rem; border-radius:0.4rem; font-size:1.6rem; margin-bottom:3rem; font-weight:600;}
.package-content ul{list-style:none; margin-bottom:3rem;}
.package-content ul li{color:var(--white); font-size:1.7rem; font-weight:500; position: relative; padding-left: 2rem;}
.package-content ul li::before{position: absolute; left: 0; top: 0.6rem; width:1.2rem; height:1.2rem; background: url(../images/tick.svg) no-repeat 0 0; background-size: contain; content: "";}
.package-content ul li:not(:last-child){margin-bottom:0.8rem;}
.package-content h4{font-size:2rem; color:var(--white); margin-bottom:1rem;}
.package-item:hover{transform:translateY(-0.5rem); box-shadow:0 0.5rem 1rem rgba(0, 0, 0, 0.3); border-color:var(--gold); border-top-color: var(--gold);}
.package-item:hover img{transform:scale(1.1) rotate(5deg); opacity:0.8;}
.button_wrapper{display:flex; justify-content:space-between; margin-top:3rem;}
.package-content a{display:inline-block; padding:0.6rem 2rem; border-radius:0.6rem; text-decoration:none; font-weight:700; font-size:1.7rem; transition:0.3s;}
.package-content a.btn{background:var(--gold); color:var(--bg); border: 0.1em solid transparent;}
.package-content a.btn:hover{background:transparent; color:var(--white); border-color:var(--gold);}
.package-content a.outline-btn{background:transparent; color:var(--white); border:0.2rem solid var(--gold);}
.package-content a.outline-btn:hover{background:var(--gold); color:var(--bg); border:0.2rem solid var(--gold);}

.center-outline-btn{display:flex; margin:4rem auto 0; padding:1.4rem 4rem; border-radius:0.8rem; text-decoration:none; font-weight:700; font-size:2rem; transition:0.3s; background:transparent; color:var(--white); border:0.2rem solid var(--gold); max-width:30rem}
.center-outline-btn:hover{background:var(--gold); color:var(--bg); border:0.2rem solid var(--gold);}
/*end packages*/

/*Popular Destinations*/
.popular-destinations{padding:6.5rem 0; background:var(--charkol-bg-gray);}
.carousel-wrapper{
      overflow:hidden;
      cursor:grab;
      user-select:none;
      border-radius:2.4rem;
    }

    .carousel-wrapper.dragging{
      cursor:grabbing;
    }

    .carousel{
      display:flex;
      gap:1.8rem;
      width:max-content;
      transition:transform 0.6s ease;
    }

    .card{
      width:22rem;
      height:30rem;
      border-radius:2.2rem;
      overflow:hidden;
      position:relative;
      flex-shrink:0;
    }

    .card img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }

    .overlay{
      position:absolute;
      inset:0;
      background:linear-gradient(
        to top,
        rgba(0,0,0,0.78),
        rgba(0,0,0,0.08)
      );
    }

    .title{
      position:absolute;
      left: 1.8em;;
      bottom:2.2rem;
      color:#fff;
      font-size:1.8rem;
      font-weight:600;
      z-index:2;
    }

    .dots{
      display:flex;
      justify-content:center;
      gap:1rem;
      margin-top:2.2rem;
    }

    .dot{
      width:0.8rem;
      height:0.8rem;
      border-radius:50%;
      background:#666;
      transition:0.35s ease;
    }

    .dot.active{
      width:2.6rem;
      border-radius:2rem;
      background:var(--white);
    }

/*end popular destinations*/

/*about us*/
.about-wrapper{padding:7rem 0;}
.inner_about{
  display:flex;
  gap:6rem;
}
.inner_about .about_hero_wrapper{overflow:hidden; border-radius:3rem 3rem 20rem 3rem; width:58rem; height:47rem;}
.inner_about .about_hero_wrapper img{width:100%; height:100%; object-fit:cover; object-position:top;}
.inner_about .about-content{flex:1;}
.inner_about .about-content h2{text-align:left; margin: 0 0 2.5rem 0;}
.inner_about .about-content p{color:var(--muted); font-size:1.8rem; line-height: 2.8rem;}
.inner_about .about-content p:not(:last-child){margin-bottom:2rem;}
.counter_wrapper{display:flex; margin-top:4rem;}
.counter_wrapper .counter{display:flex; flex-direction:column; align-items:flex-start; flex:1;}
.counter_wrapper .counter h3{font-size:3rem; font-weight:700; color:var(--gold); margin-bottom:0.5rem;}
.counter_wrapper .counter p{color:var(--muted); font-size:1.5rem; }
/*end about us*/

/**Testimonials*/
.testimonials_wrapper{padding:7rem 0;}
.testimonials_wrapper img{max-width:100%; display:block; margin:0 auto;}
.testi_slider{max-width:60rem; margin: -12rem auto 0; position:relative; }
.testi_card img{margin: 0 auto 2rem;}
.testi_card p{text-align:center; color:var(--muted); font-size:1.9rem; line-height:3rem;}
.username{color:var(--gold); font-size:2rem; font-weight:600; text-align:center; margin-top:2.5rem;}
 /* Slick Dots */
    .slick-dots{
      display:flex !important;
      justify-content:center;
      gap:10px;
      margin-top:30px;
      list-style:none;
    }

    .slick-dots li button{
      font-size:0;
      width:12px;
      height:12px;
      border:none;
      border-radius:50%;
      background:#555;
      cursor:pointer;
    }

    .slick-dots .slick-active button{
      background:var(--gold);
    }
/**End Testimonials*/

/** Contact **/
.contact_wrapper{padding:7rem 0;}
.inner_contact_wrapper{display:flex; gap:6rem;}
.inner_contact_wrapper .left_content{
  background:var(--panel);
  flex:1;
  border-radius:3rem;
  overflow:hidden;
  padding:4rem;
}
.inner_contact_wrapper .left_content h2{font-size:3.2rem; margin-bottom:3rem; color: var(--gold);}
.inner_contact_wrapper .left_content ul{list-style:none; margin: 0 0 2rem 0;}
.inner_contact_wrapper .left_content ul li{display:flex; align-items:center; color:var(--white); font-size:1.8rem;}
.inner_contact_wrapper .left_content ul li:not(:last-child){ margin-bottom:1rem; border-bottom: 0.1rem dashed var(--dotted); padding-bottom:1rem;}
.inner_contact_wrapper .left_content ul li.address{align-items: flex-start !important;}
.inner_contact_wrapper .left_content ul li img{margin: 0 1rem 0 0;}
.inner_contact_wrapper .left_content ul li span small{display:block; font-size:1.4rem; color:var(--muted); margin-top:1rem;}
.inner_contact_wrapper .left_content ul li a{color:var(--white); transition:0.3s;}
.social_blocks{display:flex; gap:1.5rem; margin-top:3rem; align-items: center;}
.inner_contact_wrapper .left_content iframe{width:100%; height:15rem; border:none; border-radius:1rem; margin-top:3rem;}

.inner_contact_wrapper .right_frm_wrpper{
  flex:1;
  padding:4rem;
  border: 0.1rem solid var(--gold-deep);
  border-radius:3rem 3rem 3rem 3rem;
}
.inner_contact_wrapper .right_frm_wrpper h2{margin-bottom:3rem; font-size: 3.5rem; font-weight: 600;}
.inner_contact_wrapper .right_frm_wrpper .input_block:not(:last-child){margin-bottom:1.8rem;}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea{
  background: var(--panel);
  width:100%;
  padding:1.5rem;
  border-radius:0.6rem;
  color:var(--text);
  font-size:1.6rem;
  font-family: inherit;
  border:0.1rem solid var(--gold-deep);
  resize:none;
}
textarea{height:15rem;}
input[type="submit"]{
  background:var(--gold);
  color:var(--bg);
  padding:1.5rem 2.5rem;
  border-radius:0.8rem;
  font-size:2rem;
  font-weight:600;
  border:0.2rem solid transparent;
  cursor:pointer;
  transition:0.3s;
  display: block;
} 
/** End Contact **/

/**Footer**/
footer{
  background:var(--panel);
  padding:2rem 0;
  text-align:center;
  color:var(--muted);
  font-size:1.6rem;
}
footer .container{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;}
.footer_nav{flex-basis: 100%; display: flex; justify-content: center; margin: 0 0 2rem 0;}
.footer_nav a{color:var(--muted); transition:0.3s;}
.footer_nav a:hover{color:var(--gold);}
.footer_nav ul{display:flex; list-style:none; gap:2rem;}
footer .container p a{color:var(--gold); transition:0.3s;}
footer .container p a:hover{color:var(--white);}
/**End Footer**/
.close{display:none;}

/**Details Page**/
.details_wrapper{padding: 6rem 0 0 0;}
.img_wrapper{width:100%; height:50rem; border-radius:3rem 3rem 20rem 3rem; overflow:hidden;}
.img_wrapper img{width:100%; height:100%; object-fit:cover;}
.details_content{padding: 6rem 0 0 0;}
.details_content h1{font-size: 3.5rem; font-weight: 600; margin: 0 0 2rem 0;}
.details_content h1 span{color: var(--gold);}
.details_content p{font-size: 1.8rem; color: var(--muted); line-height: 2.6rem; margin: 0 0 4rem 0;}
.details_content h2{font-size: 2.5rem; margin: 0 0 2rem 0;}
.details_content h2 span{color: var(--bg); background: var(--gold); padding: 0.5rem 2rem; margin: 0 0.5rem; border-radius: 0.4rem;}
.details_content ul{list-style: none; gap: 2rem; margin: 0 0 3rem 0; flex-direction: column; display: flex;}
.details_content ul li{font-size: 1.6rem; font-weight: 600; position: relative; padding: 0 0 0 1.5rem;}
.details_content ul li ul{margin: 1rem 0 0 1rem; list-style: none; gap: 1rem;}
.details_content ul li::before{width: 0.8rem; height: 0.8rem; border-radius: 100%; background: var(--gold); position: absolute; top: 0.8rem; left: 0; content: "";}
/**End Details Page**/

#form-message{
    margin:15px 0;
}

.loading-message{
    color:#ffc107;
    font-weight:600;
}

.success-message{
    color:#28a745;
    font-weight:600;
    padding:10px 0;
}

.error-message{
    color:#dc3545;
    font-weight:600;
    padding:10px 0;
}

@media only screen and (max-width:767px){
.logo{width: 10rem;}
.logo img{width:100%; height:auto; display:block;}
header a.call{flex-basis: 100%; margin-top: 1rem; display: none;}
header a.call span{font-size: 2rem;}
.mobile_nav{width: 3rem;  margin: 0; position: absolute; right:3rem}
.mobile_nav span {
    background: var(--gold);
    width: 100%;
    height: 0.4rem;
    display: block;
}
.mobile_nav span:not(:last-child){margin-bottom: 0.5rem;}
.close{position: absolute; top: 15px; right: 20px; display: block !important; color: var(--gold); font-size: 2.8rem; cursor: pointer; z-index: 100;}
header nav{
    position: fixed;
    right: -1200px;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background: var(--charkol-gray);
    z-index: 99;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

header nav ul{flex-direction: column; width: 100%; gap: 0;}
header nav ul li:not(:last-child){margin-right: 0; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 0.1rem solid var(--light-gray-two);}
header nav ul li a{padding:0; font-size: 2rem; display: block; width: 100%; text-align: center;}

.hero{padding-top: 2rem; padding-bottom: 4rem;}
.hero .container{flex-direction: column-reverse;}
.hero .container .hero-image{width:100%; height: 30rem; margin-bottom: 3rem; border-radius: 2rem 2rem 2rem 10rem; margin: 0;}
.hero .container{gap: 2rem;}
.hero .container .content h1{text-align: center; font-size: 2.8rem; line-height: 1.2em;}
.hero .container .content p{text-align: center; font-size: 1.6rem; line-height: 2.4rem;}
.hero .container .content a{display: block; width: max-content; margin: 0 auto;}

.packages{padding: 4rem 0;}
.package-grid{grid-template-columns: repeat(1,1fr);}
.sec-heading{font-size: 2.5rem;}
.package-content{padding: 3rem 2.5rem;}

.about-wrapper{padding: 4rem 0;}
.inner_about{flex-direction: column; gap: 3rem;}
.inner_about .about_hero_wrapper{width:100%; height: 30rem; border-radius: 2rem 2rem 10rem 2rem;}
.inner_about .about-content h2{text-align: center;}
.inner_about .about-content p{text-align: center;}
.counter_wrapper .counter{align-items: center; text-align: center; }
.counter_wrapper .counter p{text-align: center;line-height: 1.8rem;}
.counter_wrapper .counter p span{display: block; }

.testimonials_wrapper{padding: 4rem 0;}
.testi_slider{margin:0 auto;}
.testi_slider img{width: 12rem;}

.contact_wrapper{padding: 4rem 0;}
.inner_contact_wrapper{flex-direction: column-reverse; gap: 3rem;}
.inner_contact_wrapper .right_frm_wrpper{padding: 2.5rem;}
.inner_contact_wrapper .right_frm_wrpper h2{text-align: center;}
input[type="submit"]{display: block; margin: 0 auto; width: 100%; }
.inner_contact_wrapper .left_content{padding: 2.5rem;}
.inner_contact_wrapper .left_content h2{font-size: 3rem;}

footer .container{flex-direction: column; gap: 1.5rem;}

.details_wrapper{padding-top: 2rem;}
.details_content ul{flex-direction: column; gap: 1rem;}
.details_content h2 span{display:flex; margin: 1rem 0; text-align: center; justify-content: center;}
.img_wrapper{height: 30rem; border-radius: 2rem;}

.designby{order:3;}
.footer_nav ul{display: flex; list-style: none; gap: 1rem; flex-wrap: wrap; justify-content: center;}
}

@media only screen and (min-width:768px) and (max-width:1023px){
.mobile_nav{width: 3rem;  margin: 0; position: absolute; right:3rem}
.mobile_nav span {
    background: var(--gold);
    width: 100%;
    height: 0.4rem;
    display: block;
}
.mobile_nav span:not(:last-child){margin-bottom: 0.5rem;}
.close{position: absolute; top: 15px; right: 20px; display: block !important; color: var(--gold); font-size: 2.8rem; cursor: pointer; z-index: 100;}
header nav{
    position: fixed;
    right: -1200px;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    background: var(--charkol-gray);
    z-index: 99;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

header nav ul{flex-direction: column; width: 100%; gap: 0;}
header nav ul li:not(:last-child){margin-right: 0; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 0.1rem solid var(--light-gray-two);}
header nav ul li a{padding:0; font-size: 2rem; display: block; width: 100%; text-align: center;}
header a.call{margin: 0 auto;}
  header nav ul{gap: 1.5rem;}
  header nav ul li a{font-size: 1.8rem;}
  header a.call span{font-size: 2.8rem;}
  header a.call svg{width:2.5rem; height:2.5rem; margin-right:1rem;}
  header .logo{width:11rem}
  header .logo img{max-width:100%; height:auto; display:block;}
  
  .hero .container .hero-image{width:60rem; height:54rem;}
  .hero .container{flex-direction: column-reverse; gap: 3rem;}
  .hero .container .content{max-width: 55rem; text-align: center;}
  .package-grid{grid-template-columns: repeat(2,1fr);}

  .inner_about{flex-direction: column; gap: 3rem;}
  .inner_about .about_hero_wrapper{margin: 0 auto;}
  .inner_about .about-content h2{text-align: center;}
  .inner_about .about-content{max-width: 55rem; text-align: center; margin: 0 auto;}

  .testimonials_wrapper{padding:3rem 0;}
  .testi_slider{margin: -4rem auto 0;}

  .inner_contact_wrapper{flex-direction: column-reverse; gap: 3rem; padding: 0 6rem;}
  .inner_contact_wrapper .left_content iframe{height: 35rem;}
  input[type="submit"]{margin: 0 auto; display: block; width: 100%;}

.details_wrapper{padding-top: 2rem;}
.details_content ul li{line-height: 2.8rem;}
.details_content ul{margin-bottom: 6rem; flex-direction: column;}
.footer_nav{flex-basis: 100%; display: flex; justify-content: center; margin: 0 0 2rem 0;}
}

@media only screen and (min-width:1024px) and (max-width:1200px){
  header a.call span{font-size: 2rem;}
  .hero .container .hero-image{width:50rem; height:45rem;}
  .hero .container .content h1{font-size: 4.5rem;}
  .package-grid{grid-gap: 2rem;}
  .button_wrapper{flex-direction: column; gap: 1.5rem;}
  .button_wrapper a{width: 100%; text-align: center;}
  .package-content{padding: 3rem 2rem;}

  .inner_about .about_hero_wrapper{width: 50rem; height: 45rem;}
  .counter_wrapper .counter p{line-height: 2rem;}
  .counter_wrapper .counter p span{display: block;}

  .testi_slider{margin: -8rem auto 0;}

  .details_wrapper{padding-top: 2rem;}
  
}