* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Arial;
}

html {
   overflow-y: scroll;
}


header {

   background: transparent;
   padding: 20px;

}


nav {

   display: flex;
   justify-content: space-between;
   align-items: center;

}


nav h2 {

   color: white;

}


ul {

   display: flex;
   list-style: none;

}


li {

   margin: 0 15px;

}


a {

   color: white;
   text-decoration: none;

}


.hero {

   height: 100vh;

   background: url("https://picsum.photos/1200/800");

   background-size: cover;

   display: flex;

   align-items: center;

   justify-content: center;

   color: white;

   text-align: center;

}


.hero h1 {

   font-size: 50px;

}



button {

   padding: 12px 25px;
   background: gold;
   border: none;
   cursor: pointer;

}



.page {

   padding: 100px 50px;

   text-align: center;

}



.cards {

   display: flex;

   justify-content: center;

   gap: 30px;

   margin-top: 40px;

}



.card {

   width: 300px;

   box-shadow: 0 0 10px gray;

   padding: 20px;

}


.card img {

   width: 100%;

}



input,
textarea {

   display: block;

   width: 300px;

   margin: 15px auto;

   padding: 12px;

}


textarea {

   height: 120px;

}



footer {

   background: #222;

   color: white;

   text-align: center;

   padding: 20px;

}

* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Poppins;
}


body {
   color: #333;
}



header {

   position: absolute;
   top: 0;
   width: 100%;

   display: flex;
   justify-content: space-between;
   align-items: center;

   padding: 25px 8%;

   color: white;
   z-index: 10;

}



.logo {

   font-size: 28px;
   font-weight: 700;

}

.nav-box {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.logo span {

   color: #D89B2B;

}



nav a {

   color: white;
   text-decoration: none;
   margin: 0 15px;

}

nav a:hover {
   color: #D89B2B
}

.active {
   color: #D89B2B;
}

.menu {

   display: none;

}





.hero {

   height: 100vh;

   background:

      linear-gradient(rgba(0, 0, 0, .55),
         rgba(0, 0, 0, .55)),

      url("./images/bhati\ banner.jpg");

   background-size: cover;

   background-position: center;


   display: flex;

   align-items: center;

   padding: 0 8%;

   color: white;

}



.hero-content {

   max-width: 650px;

}


.hero h1 {

   font-size: 55px;

}


.hero p {

   margin: 20px 0;

   font-size: 18px;

}



.btn {

   padding: 14px 30px;

   background: #D89B2B;

   border: none;

   color: white;

   border-radius: 30px;

   cursor: pointer;

}



.light {

   background: white;

   color: #333;

   margin-left: 10px;

}





section {

   padding: 70px 8%;

}



h2 {

   text-align: center;

   font-size: 35px;

   margin-bottom: 40px;

}



.cards,
.tour-box {

   display: flex;

   gap: 25px;

   justify-content: center;

   flex-wrap: wrap;

}



.card {

   width: 250px;

   padding: 30px;

   box-shadow: 0 5px 20px #ddd;

   border-radius: 15px;

   text-align: center;

}





.tour {

   width: 320px;

   box-shadow: 0 5px 20px #ddd;

   border-radius: 15px;

   overflow: hidden;

   padding-bottom: 20px;

}



.tour img {

   width: 100%;

   height: 220px;

   object-fit: cover;

}



.tour h3,
.tour p {

   padding: 10px 20px;

}



.tour button {

   margin-left: 20px;

   padding: 10px 20px;

   background: #0B2E4F;

   color: white;

   border: none;

}





.hotel {

   display: flex;

   gap: 50px;

   align-items: center;

}



.hotel img {

   width: 500px;

   border-radius: 20px;

}




.reviews {

   text-align: center;

}



.review {

   padding: 30px;

   box-shadow: 0 5px 20px #ddd;

}




.cta {

   background: #0B2E4F;

   color: white;

   text-align: center;

}



footer {

   background: #111;

   color: white;

   text-align: center;

   padding: 30px;

}





@media(max-width:768px) {

   .nav-box {
      justify-content: flex-start;
      gap: 5px;
   }

   nav {

      display: none;

   }


   .menu {

      display: block;
      order: -1;
      background: transparent;
      padding: 0;
      color: white;
      font-size: 28px;
   }



   .hero h1 {

      font-size: 35px;

   }


   .hotel {

      flex-direction: column;

   }


   .hotel img {

      width: 100%;

   }


}

/* TOUR OVERVIEW */
.tour-overview {
   padding: 80px 8%;
   background: #fdfbf7;
}

.overview-box {
   max-width: 900px;
   margin: 0 auto;
}

.overview-box img {
   width: 100%;
   border-radius: 20px;
   height: 450px;
   object-fit: cover;
   margin-bottom: 30px;
}

.overview-text .subtitle {
   color: #c78d22;
   font-size: 16px;
   display: block;
   margin-bottom: 10px;
}

.overview-text h2 {
   font-size: 32px;
   text-align: left;
   margin-bottom: 25px;
   color: #111;
}

.overview-text h2 span {
   color: #c78d22;
   font-weight: normal;
}

.overview-text p {
   color: #555;
   line-height: 1.8;
   margin-bottom: 20px;
}

/* CONTACT PAGE STYLES */
.contact-section {
   display: flex;
   justify-content: space-between;
   gap: 40px;
   padding: 60px 8%;
   background: #fdfaf5;
}

.contact-info,
.contact-form {
   width: 48%;
}

.contact-info h2,
.contact-form h2 {
   text-align: left;
   margin-bottom: 20px;
   font-size: 32px;
}

.contact-info p {
   margin-bottom: 25px;
   color: #555;
   line-height: 1.6;
}

.info-card {
   background: white;
   padding: 28px 20px;
   margin-bottom: 25px;
   border-radius: 10px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.info-card:last-child {
   margin-bottom: 0;
}

.contact-form form {
   background: white;
   padding: 28px 30px;
   border-radius: 10px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.contact-form input,
.contact-form select,
.contact-form textarea {
   width: 100% !important;
   padding: 12px 15px;
   margin-bottom: 15px;
   border: 1px solid #ddd;
   border-radius: 5px;
   font-size: 15px;
   font-family: inherit;
   background: #f9f9f9;
}

.contact-form textarea {
   height: 110px;
   resize: none;
}

.contact-form button {
   width: 100%;
   padding: 15px;
   background: #0B2E4F;
   color: white;
   border: none;
   border-radius: 5px;
   font-size: 18px;
   cursor: pointer;
}

.contact-form button:hover {
   background: #D89B2B;
}

/* WHY SECTION */

.why-section {

   padding: 90px 8%;

   background: #fff;



   background-size: cover;

   background-position: center;

   color: black;

}




.section-title {

   text-align: center;

   max-width: 750px;

   margin: auto;

}

.section-title p {

   color: #D89B2B;

   letter-spacing: 3px;

   font-weight: bold;

}


.section-title h2 {

   font-size: 42px;

   margin: 15px 0;

}


.section-title span {

   color: #ddd;

   font-size: 17px;

}





.why-cards {


   display: grid;

   grid-template-columns:

      repeat(4, 1fr);

   gap: 25px;

   margin-top: 60px;


}




.why-card {


   background:

      #0B2E4F;


   backdrop-filter: blur(10px);


   border: 1px solid rgba(255, 255, 255, .2);


   padding: 35px 25px;


   border-radius: 20px;


   text-align: center;


   transition: .4s;


}





.why-card:hover {


   transform: translateY(-12px);


   background: #D89B2B;


}





.icon {


   font-size: 45px;


   margin-bottom: 20px;


}



.why-card h3 {


   font-size: 24px;


   margin-bottom: 15px;


}



.why-card p {


   color: #eee;


   line-height: 1.7;


}





@media(max-width:900px) {


   .why-cards {

      grid-template-columns: repeat(2, 1fr);

   }


}



@media(max-width:600px) {


   .why-cards {

      grid-template-columns: 1fr;

   }


   .section-title h2 {

      font-size: 30px;

   }


}

/* WHY US */


.why-us {


   padding: 100px 8%;

   display: flex;

   gap: 70px;

   align-items: center;

   background: #faf7f1;


}





.why-left {

   width: 45%;

}



.small-title {


   color: #c58b32;

   letter-spacing: 3px;

   font-size: 14px;

   font-weight: bold;


}



.why-left h2 {


   font-size: 48px;

   line-height: 1.2;

   margin: 20px 0;


   color: #1c3557;


}



.desc {


   font-size: 17px;

   color: #666;

   line-height: 1.8;


}




.stats {


   display: flex;

   gap: 35px;

   margin-top: 40px;


}



.stats div {


   border-left: 3px solid #c58b32;

   padding-left: 20px;


}



.stats h3 {


   font-size: 35px;

   color: #c58b32;


}



.stats p {

   color: #555;

}





.why-right {


   width: 55%;

   display: grid;

   grid-template-columns: 1fr 1fr;

   gap: 25px;


}





.feature {


   background: white;


   padding: 30px;


   border-radius: 18px;


   display: flex;


   gap: 20px;


   align-items: flex-start;


   box-shadow: 0 10px 30px rgba(0, 0, 0, .08);


   transition: .3s;


}



.feature:hover {


   transform: translateY(-8px);


   box-shadow: 0 15px 35px rgba(0, 0, 0, .15);


}



.feature-icon {


   font-size: 40px;


}



.feature h3 {


   font-size: 22px;

   color: #1c3557;

   margin-bottom: 10px;


}



.feature p {


   color: #777;

   line-height: 1.6;


}







@media(max-width:900px) {


   .why-us {

      flex-direction: column;

   }


   .why-left,
   .why-right {

      width: 100%;

   }



}



@media(max-width:600px) {


   .why-right {

      grid-template-columns: 1fr;

   }


   .why-left h2 {

      font-size: 35px;

   }



   .stats {

      flex-direction: column;

   }


}

/* EXPERIENCE SECTION */


.experience {

   margin-top: 50px;
   height: 750px;

   position: relative;


   background-image: url("https://images.unsplash.com/photo-1524498250077-390f9e378fc0");


   background-size: cover;

   background-position: center;


   display: flex;

   justify-content: center;

   align-items: center;


   color: white;


}





.experience-overlay {


   position: absolute;

   inset: 0;


   background:

      linear-gradient(90deg,
         rgba(0, 0, 0, .75),
         rgba(0, 0, 0, .45));


}





.experience-content {


   position: relative;

   text-align: center;

   width: 85%;


}



.tag {


   color: #e1a43a;

   letter-spacing: 5px;

   font-weight: bold;


}



.experience-content h2 {


   font-size: 48px;

   max-width: 800px;

   margin: 20px auto;


}



.intro {


   max-width: 700px;

   margin: auto;

   font-size: 18px;

   color: #eee;

   line-height: 1.8;


}




.experience-box {


   margin-top: 60px;


   display: flex;

   justify-content: center;

   gap: 25px;


}




.exp-card {


   width: 260px;

   padding: 35px 25px;


   background:

      rgba(255, 255, 255, .15);


   border-radius: 25px;


   backdrop-filter: blur(12px);


   border: 1px solid rgba(255, 255, 255, .25);


   transition: .4s;


}





.exp-card:hover {


   transform: translateY(-15px);


   background: white;

   color: #333;


}



.circle {


   height: 80px;

   width: 80px;

   margin: auto;


   border-radius: 50%;


   display: flex;

   align-items: center;

   justify-content: center;


   font-size: 40px;


   background: #d89b2b;


   margin-bottom: 20px;


}




.exp-card h3 {


   font-size: 24px;

   margin-bottom: 15px;


}




.exp-card p {


   line-height: 1.6;


}




@media(max-width:1000px) {


   .experience {

      height: auto;

      padding: 100px 0;

   }


   .experience-box {

      flex-wrap: wrap;

   }



}



@media(max-width:600px) {


   .experience-content h2 {

      font-size: 32px;

   }


}

/* REVIEWS */


.reviews-section {


   padding: 100px 8%;


   background: #f8f5ef;


}





.reviews-title {


   text-align: center;

   max-width: 700px;

   margin: auto;


}



.reviews-title p {


   color: #c58b32;

   letter-spacing: 4px;

   font-weight: bold;


}



.reviews-title h2 {


   font-size: 42px;

   color: #17324d;

   margin: 15px 0;


}



.reviews-title span {


   color: #777;

   font-size: 17px;


}





.review-container {


   margin-top: 60px;


   display: grid;


   grid-template-columns: repeat(3, 1fr);


   gap: 30px;


}




.review-card {


   background: white;


   padding: 35px;


   border-radius: 25px;


   box-shadow: 0 15px 35px rgba(0, 0, 0, .08);


   transition: .4s;


   position: relative;


}





.review-card:hover {


   transform: translateY(-12px);


}




.guest {


   display: flex;

   align-items: center;

   gap: 20px;


}




.guest img {


   width: 70px;

   height: 70px;


   border-radius: 50%;


   object-fit: cover;


}





.guest h3 {


   color: #17324d;

   font-size: 20px;


}



.guest p {


   color: #888;

   font-size: 14px;


}





.stars {


   margin: 25px 0;


   font-size: 22px;


}



.message {


   color: #555;


   line-height: 1.8;


   font-style: italic;


}




@media(max-width:900px) {


   .review-container {


      grid-template-columns: 1fr 1fr;


   }


}



@media(max-width:600px) {


   .review-container {


      grid-template-columns: 1fr;


   }



   .reviews-title h2 {

      font-size: 32px;

   }


}

/* DESTINATION SECTION */


.destinations {


   padding: 100px 8%;

   background: white;


}




.destination-title {


   text-align: center;

   margin-bottom: 60px;


}



.destination-title p {


   color: #d89b2b;

   letter-spacing: 4px;

   font-weight: bold;


}



.destination-title h2 {


   font-size: 42px;

   color: #17324d;

   margin: 15px 0;


}



.destination-title span {


   color: #777;

   font-size: 17px;


}




.destination-grid {


   display: grid;

   grid-template-columns: repeat(4, 1fr);

   gap: 25px;


}




.destination-card {


   height: 420px;

   position: relative;


   overflow: hidden;


   border-radius: 25px;


   cursor: pointer;


}



.destination-card img {


   width: 100%;


   height: 100%;


   object-fit: cover;


   transition: .6s;


}





.destination-card:hover img {


   transform: scale(1.15);


}





.destination-card::after {


   content: "";


   position: absolute;

   inset: 0;


   background:

      linear-gradient(transparent,
         rgba(0, 0, 0, .75));


}





.destination-info {


   position: absolute;


   bottom: 30px;


   left: 25px;


   color: white;


   z-index: 2;


}





.destination-info h3 {


   font-size: 30px;


   margin-bottom: 8px;


}



.destination-info p {


   font-size: 16px;


}





@media(max-width:1000px) {


   .destination-grid {


      grid-template-columns: repeat(2, 1fr);


   }


}




@media(max-width:600px) {


   .destination-grid {


      grid-template-columns: 1fr;


   }



   .destination-title h2 {

      font-size: 32px;

   }


}

/* ABOUT SECTION */


.about-home {


   padding: 100px 8%;


   display: flex;


   align-items: center;


   gap: 70px;


   background: #faf7f1;


}





.about-image {


   width: 50%;


   position: relative;


}




.about-image img {


   width: 100%;


   height: 520px;


   object-fit: cover;


   border-radius: 30px;


}




.about-image::before {


   content: "";


   position: absolute;


   width: 150px;

   height: 150px;


   background: #d89b2b;


   left: -25px;


   top: -25px;


   border-radius: 30px;


   z-index: 0;


}





.about-image img {


   position: relative;


   z-index: 1;


}






.about-content {


   width: 50%;


}





.about-tag {


   color: #d89b2b;


   letter-spacing: 4px;


   font-weight: bold;


   font-size: 14px;


}





.about-content h2 {


   font-size: 45px;


   line-height: 1.2;


   color: #17324d;


   margin: 20px 0;


}





.about-content p {


   color: #666;


   font-size: 17px;


   line-height: 1.8;


   margin-bottom: 15px;


}





.about-points {


   display: grid;


   grid-template-columns: 1fr 1fr;


   gap: 15px;


   margin: 30px 0;


}




.about-points div {


   font-weight: 600;


   color: #333;


}



.about-points span {


   color: #d89b2b;


   font-size: 22px;


   margin-right: 10px;


}





.about-btn {


   background: #d89b2b;


   color: white;


   border: none;


   padding: 14px 35px;


   border-radius: 30px;


   font-size: 16px;


   cursor: pointer;


   transition: .3s;


}



.about-btn:hover {


   background: #17324d;


}







@media(max-width:900px) {


   .about-home {


      flex-direction: column;


   }



   .about-image,
   .about-content {


      width: 100%;


   }



   .about-content h2 {


      font-size: 34px;


   }


}

/* FOOTER */


.footer {


   background: #10263d;


   color: white;


   padding: 70px 8% 20px;


}





.footer-container {


   display: grid;


   grid-template-columns: 2fr 1fr 1.3fr;


   gap: 50px;


}




.footer-box h2 {


   font-size: 30px;


   margin-bottom: 20px;


}



.footer-box h2 span {


   color: #d89b2b;


}



.footer-box h3 {


   font-size: 22px;


   margin-bottom: 25px;


   color: #d89b2b;


}



.footer-box p {


   color: #ddd;


   line-height: 1.8;


}





.footer-box ul {


   list-style: none;


}



.footer-box ul li {


   margin-bottom: 15px;


}



.footer-box ul li a {


   color: #ddd;


   text-decoration: none;


   transition: .3s;


}



.footer-box ul li a:hover {


   color: #d89b2b;


}




.social {


   display: flex;


   gap: 15px;


   margin-top: 25px;


}



.social a {


   height: 40px;


   width: 40px;


   border-radius: 50%;


   background: #d89b2b;


   color: white;


   display: flex;


   justify-content: center;


   align-items: center;


   text-decoration: none;


   font-weight: bold;


}




.footer-bottom {


   border-top: 1px solid rgba(255, 255, 255, .2);


   margin-top: 50px;


   padding-top: 20px;


   text-align: center;


   color: #bbb;


}







@media(max-width:900px) {


   .footer-container {


      grid-template-columns: 1fr;


   }



}

* {

   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Poppins;

}


body {

   color: #333;

}



/* HEADER */


header {

   position: absolute;

   top: 0;

   width: 100%;

   padding: 25px 8%;

   display: flex;

   justify-content: space-between;

   color: white;

   z-index: 2;

}


.logo {

   font-size: 28px;

   font-weight: bold;

}


.logo span {

   color: #d89b2b;

}



nav a {

   color: white;

   text-decoration: none;

   margin-left: 25px;

}





/* HERO */


.about-hero {


   height: 70vh;


   background:

      linear-gradient(rgba(0, 0, 0, .6),
         rgba(0, 0, 0, .6)),

      url("https://images.unsplash.com/photo-1477587458883-47145ed94245");


   background-size: cover;


   background-position: center;


   display: flex;


   align-items: center;


   justify-content: center;


   text-align: center;


   color: white;


}



.about-hero h1 {

   font-size: 55px;

}





/* ABOUT */


.about-main {


   padding: 100px 8%;


   display: flex;


   gap: 60px;


   align-items: center;


}



.about-img {

   width: 50%;

}


.about-img img {


   width: 100%;


   border-radius: 30px;


}



.about-text {


   width: 50%;


}



.tag {

   color: #d89b2b;

   letter-spacing: 3px;

   font-weight: bold;

}



.about-text h2 {


   font-size: 42px;


   color: #17324d;


   margin: 20px 0;


}


.about-text p {

   line-height: 1.8;

   margin-bottom: 15px;

}



button {


   background: #d89b2b;

   border: none;

   padding: 14px 35px;

   color: white;

   border-radius: 30px;

   cursor: pointer;


}





/* MISSION */


.mission {


   padding: 70px 8%;


   display: flex;

   gap: 30px;


   background: #faf7f1;


}



.box {


   background: white;


   padding: 40px;


   border-radius: 20px;


   text-align: center;


}





/* WHY */


.why {


   padding: 80px 8%;

   text-align: center;


}



.why-grid {


   display: grid;


   grid-template-columns: repeat(3, 1fr);


   gap: 30px;


   margin-top: 40px;


}



.why-grid div {


   padding: 35px;

   box-shadow: 0 10px 30px #ddd;

   border-radius: 20px;


}




/* STATS */


.stats {


   background: #17324d;


   color: white;


   display: grid;


   grid-template-columns: repeat(4, 1fr);


   padding: 60px 8%;


   text-align: center;


}



.stats h2 {

   color: #d89b2b;

   font-size: 40px;

}






.cta {


   padding: 80px;


   text-align: center;


}



footer {

   background: #111;

   color: white;

   padding: 25px;

   text-align: center;

}




@media(max-width:900px) {


   .about-main,
   .mission {


      flex-direction: column;


   }


   .about-img,
   .about-text {


      width: 100%;


   }


   .why-grid,
   .stats {


      grid-template-columns: 1fr;


   }


}

/* HEADER DESIGN */


.header {


   position: absolute;


   top: 0;


   left: 0;


   width: 100%;


   padding: 25px 8%;


   display: flex;


   align-items: center;


   justify-content: space-between;


   z-index: 100;


   transition: .4s;


}





.logo a {


   text-decoration: none;


   color: white;


   font-size: 30px;


   font-weight: 700;


   letter-spacing: .5px;


}





.logo span {


   color: #d89b2b;


}






#nav {


   display: flex;


   gap: 15px;


}



#nav a {


   color: white;


   text-decoration: none;


   font-size: 16px;


   font-weight: 500;


   position: relative;


   transition: .3s;


}





#nav a::after {


   content: "";


   position: absolute;


   bottom: -8px;


   left: 0;


   height: 2px;


   width: 0;


   background: #d89b2b;


   transition: .3s;


}





#nav a:hover::after,
#nav .active::after {


   width: 100%;


}




#nav a:hover {


   color: #d89b2b;


}






.header-btn a {


   background: #d89b2b;


   color: white;


   padding: 13px 28px;


   border-radius: 30px;


   text-decoration: none;


   font-weight: 600;


   transition: .3s;


}





.header-btn a:hover {


   background: white;


   color: #17324d;


}







.menu {


   display: none;


   background: none;


   border: none;


   color: white;


   font-size: 30px;


   cursor: pointer;


}





/* Sticky Header */




.header.sticky {


   position: fixed;


   background: #17324d;


   box-shadow: 0 5px 20px rgba(0, 0, 0, .2);


}







@media(max-width:900px) {



   #nav {


      position: absolute;


      top: 80px;


      left: 0;


      width: 100%;


      background: #17324d;


      display: none;


      flex-direction: column;


      text-align: center;


      padding: 30px;


   }





   #nav a {


      margin: 10px;


   }



   .header-btn {


      display: none;


   }



   .menu {


      display: block;


   }



}

/* TRANSPARENT TRAVEL HEADER */
.travel-header {
   position: absolute;
   top: 25px;
   left: 0;
   width: 100%;
   height: 80px;
   z-index: 100;
   padding: 0 5%;
}

.nav-box {
   width: 100%;
   height: 100%;
   padding: 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
   background: transparent;
}





.logo a {


   text-decoration: none;


   font-size: 28px;


   font-weight: 700;


   color: white;


}




.logo span {


   color: #e0a238;


}






#nav {


   display: flex;


   gap: 15px;
   margin-left: 30px
}



#nav a {
   text-decoration: none;
   color: white;
   font-family: Arial, sans-serif;
   font-size: 16px;
   font-weight: 500;


   transition: .3s;


   position: relative;


}




#nav a:hover,
#nav .active {


   color: #e0a238;


}

#nav a::before {


   content: "";


   position: absolute;


   height: 2px;


   width: 0;


   background: #e0a238;


   bottom: -7px;


   left: 0;


   transition: .3s;


}





#nav a:hover::before,
#nav .active::before {


   width: 100%;


}






.book-btn a {


   background: #e0a238;


   padding: 13px 25px;


   border-radius: 30px;


   color: white;


   text-decoration: none;


   font-weight: 600;


   transition: .3s;


}



.book-btn a:hover {


   background: white;


   color: #17324d;


}





.menu {


   display: none;


   background: none;


   border: none;


   color: white;


   font-size: 28px;


}






@media(max-width:900px) {



   .nav-box {


      border-radius: 20px;


   }



   #nav {


      display: none;


      position: absolute;


      top: 90px;


      left: 20px;


      right: 20px;


      background: #17324d;


      padding: 30px;


      border-radius: 20px;


      flex-direction: column;


      text-align: center;


   }



   .book-btn {


      display: none;


   }



   .menu {


      display: block;


   }


}

/* =========================
   ABOUT PAGE CSS
========================= */


* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Poppins, sans-serif;
}


body {
   color: #333;
}


/* =========================
   ABOUT HERO SECTION
========================= */


.about-hero {

   height: 75vh;

   background:

      linear-gradient(rgba(0, 0, 0, .55),
         rgba(0, 0, 0, .55)),

      url("./images/bhati\ banner.jpg");

   background-size: cover;

   background-position: center;

   display: flex;

   align-items: center;

   justify-content: center;

   text-align: center;

   color: white;

}



.about-hero h1 {

   font-size: 58px;

   font-weight: 700;

   margin-bottom: 15px;

}


.about-hero p {

   font-size: 20px;

   color: #eee;

}






/* =========================
   ABOUT COMPANY
========================= */


.about-company {

   padding: 100px 8%;

   display: flex;

   align-items: center;

   gap: 70px;

   background: #fff;

}



.about-image {

   width: 50%;

   position: relative;

}



.about-image img {

   width: 100%;

   height: 520px;

   object-fit: cover;

   border-radius: 30px;

}



.about-image::before {

   content: "";

   position: absolute;

   width: 160px;

   height: 160px;

   background: #d89b2b;

   left: -25px;

   top: -25px;

   border-radius: 30px;

   z-index: -1;

}




.about-content {

   width: 50%;

}



.tag {

   color: #d89b2b;

   font-size: 14px;

   font-weight: 700;

   letter-spacing: 3px;

}




.about-content h2 {

   font-size: 45px;

   line-height: 1.2;

   color: #17324d;

   margin: 20px 0;

}




.about-content p {

   font-size: 17px;

   line-height: 1.8;

   color: #666;

   margin-bottom: 15px;

}





.points {

   display: grid;

   grid-template-columns: 1fr 1fr;

   gap: 15px;

   margin: 30px 0;

}



.points div {

   font-weight: 600;

   color: #444;

}



.points div::first-letter {

   color: #d89b2b;

}





.about-content button {

   background: #d89b2b;

   border: none;

   padding: 14px 35px;

   border-radius: 30px;

   color: white;

   font-size: 16px;

   cursor: pointer;

   transition: .3s;

}



.about-content button:hover {

   background: #17324d;

}







/* =========================
   MISSION VISION
========================= */


.mission {

   padding: 90px 8%;

   background: #faf7f1;

   display: flex;

   gap: 30px;

}



.mission-card {

   flex: 1;

   background: white;

   padding: 45px 35px;

   border-radius: 25px;

   text-align: center;

   box-shadow: 0 15px 35px rgba(0, 0, 0, .08);

   transition: .3s;

}



.mission-card:hover {

   transform: translateY(-10px);

}



.icon {

   font-size: 45px;

   margin-bottom: 20px;

}



.mission-card h2 {

   color: #17324d;

   margin-bottom: 15px;

}



.mission-card p {

   color: #666;

   line-height: 1.7;

}







/* =========================
   WHY CHOOSE SECTION
========================= */


.choose {

   padding: 90px 8%;

   text-align: center;

}



.choose h2 {

   font-size: 42px;

   color: #17324d;

   margin: 15px 0 50px;

}




.choose-grid {

   display: grid;

   grid-template-columns: repeat(3, 1fr);

   gap: 30px;

}




.choose-grid div {

   padding: 35px;

   border-radius: 20px;

   background: white;

   box-shadow: 0 10px 30px rgba(0, 0, 0, .08);

   transition: .3s;

}



.choose-grid div:hover {

   transform: translateY(-10px);

   box-shadow: 0 15px 40px rgba(0, 0, 0, .15);

}



.choose-grid h3 {

   color: #17324d;

   font-size: 22px;

   margin-bottom: 15px;

}



.choose-grid p {

   color: #666;

   line-height: 1.7;

}







/* =========================
   COUNTER SECTION
========================= */


.numbers {

   background: #17324d;

   padding: 70px 8%;

   display: grid;

   grid-template-columns: repeat(4, 1fr);

   text-align: center;

   color: white;

}



.numbers h2 {

   font-size: 45px;

   color: #d89b2b;

   margin-bottom: 10px;

}



.numbers p {

   font-size: 17px;

}







/* =========================
   CTA SECTION
========================= */


.about-cta {

   padding: 100px 8%;

   text-align: center;

   background: #faf7f1;

}



.about-cta h2 {

   font-size: 42px;

   color: #17324d;

   margin-bottom: 30px;

}



.about-cta a {

   background: #d89b2b;

   color: white;

   padding: 15px 40px;

   border-radius: 30px;

   text-decoration: none;

   font-weight: 600;

}





/* =========================
   RESPONSIVE
========================= */


@media(max-width:900px) {


   .about-company {

      flex-direction: column;

   }


   .about-image,
   .about-content {

      width: 100%;

   }


   .about-content h2 {

      font-size: 35px;

   }



   .mission {

      flex-direction: column;

   }



   .choose-grid {

      grid-template-columns: 1fr;

   }



   .numbers {

      grid-template-columns: 1fr 1fr;

   }


}



@media(max-width:600px) {


   .about-hero h1 {

      font-size: 38px;

   }



   .points {

      grid-template-columns: 1fr;

   }



   .numbers {

      grid-template-columns: 1fr;

   }


}


/* HERO */


.tour-banner {


   height: 75vh;


   background:

      linear-gradient(rgba(0, 0, 0, .55),
         rgba(0, 0, 0, .55)),

      url("./images/tour3.jpg");


   background-size: cover;

   background-position: center;


   display: flex;

   align-items: center;

   justify-content: center;


   text-align: center;

   color: white;


}



.tour-banner-content p {

   color: #d89b2b;

   letter-spacing: 4px;

   font-weight: bold;

}


.tour-banner h1 {


   font-size: 55px;

   margin: 20px 0;


}



.tour-banner span {

   font-size: 18px;

}







/* FLEET */


.fleet-section {


   padding: 100px 8%;

   background: #faf7f1;


}



.fleet-title {

   text-align: center;

   margin-bottom: 60px;


}



.fleet-title p {

   color: #d89b2b;

   letter-spacing: 3px;

   font-weight: bold;

}


.fleet-title h2 {


   font-size: 42px;

   color: #17324d;

   margin: 15px;


}



.fleet-container {


   display: grid;


   grid-template-columns: repeat(3, 1fr);


   gap: 30px;


}




.fleet-card {


   background: white;

   border-radius: 30px;

   overflow: hidden;


   box-shadow: 0 15px 40px rgba(0, 0, 0, .1);


   transition: .4s;


}



.fleet-card:hover {

   transform: translateY(-15px);

}



.vehicle-image {

   height: 280px;

   position: relative;

}



.vehicle-image img {


   width: 100%;

   height: 100%;

   object-fit: cover;


}



.seat {


   position: absolute;

   bottom: 20px;

   left: 20px;


   background: #d89b2b;

   color: white;


   padding: 10px 20px;

   border-radius: 30px;


}



.fleet-content {

   padding: 30px;


}


.fleet-content h3 {

   font-size: 25px;

   color: #17324d;

}



.fleet-content p {

   color: #777;

   line-height: 1.7;

   margin: 15px 0;


}



.details {


   display: flex;

   gap: 10px;

   flex-wrap: wrap;


}



.details span {


   background: #f3ead8;

   padding: 8px 12px;

   border-radius: 20px;

   font-size: 13px;


}



.fleet-content a {


   display: inline-block;


   margin-top: 25px;


   background: #d89b2b;


   color: white;


   padding: 13px 30px;


   border-radius: 30px;


   text-decoration: none;


}







/* BENEFITS */


.travel-benefits {


   padding: 90px 8%;


   text-align: center;


}



.travel-benefits h2 {

   font-size: 40px;

   color: #17324d;

}



.benefit-grid {


   display: grid;

   grid-template-columns: repeat(3, 1fr);

   gap: 30px;

   margin-top: 40px;


}



.benefit-grid div {


   padding: 35px;


   box-shadow: 0 10px 30px #ddd;


   border-radius: 20px;


}





@media(max-width:900px) {


   .fleet-container,
   .benefit-grid {


      grid-template-columns: 1fr;


   }


   .tour-banner h1 {

      font-size: 38px;

   }


}

* {

   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Poppins, sans-serif;

}


body {

   color: #333;

}





/* HERO */


.hotel-hero {


   height: 75vh;


   background:

      linear-gradient(rgba(0, 0, 0, .55),
         rgba(0, 0, 0, .55)),

      url("./images/hotel.jpg");


   background-size: cover;


   background-position: center;


   display: flex;


   align-items: center;


   justify-content: center;


   text-align: center;


   color: white;


}



.hotel-hero p {

   color: #d89b2b;

   letter-spacing: 4px;

   font-weight: bold;


}



.hotel-hero h1 {

   font-size: 55px;

   margin: 20px;


}





/* ABOUT */


.hotel-about {


   padding: 100px 8%;


   display: flex;


   align-items: center;


   gap: 70px;


}



.hotel-image,
.hotel-text {

   width: 50%;


}



.hotel-image img {


   width: 100%;


   height: 500px;


   object-fit: cover;


   border-radius: 30px;


}




.tag {

   color: #d89b2b;

   letter-spacing: 3px;

   font-weight: bold;


}



.hotel-text h2 {


   font-size: 42px;


   color: #17324d;


   margin: 20px 0;


}


.hotel-text p {

   line-height: 1.8;

   color: #666;

   margin-bottom: 15px;


}



.hotel-text a,
.hotel-cta a {


   display: inline-block;


   background: #d89b2b;


   color: white;


   padding: 14px 35px;


   border-radius: 30px;


   text-decoration: none;


   margin-top: 20px;


}






/* ROOMS */


.rooms {


   background: #faf7f1;


   padding: 100px 8%;


}



.title {

   text-align: center;

   margin-bottom: 50px;


}



.title p {

   color: #d89b2b;

   letter-spacing: 3px;

}



.title h2 {

   font-size: 42px;

   color: #17324d;

}




.room-grid {


   display: grid;


   grid-template-columns: repeat(3, 1fr);


   gap: 30px;


}



.room-card {


   background: white;


   border-radius: 25px;


   overflow: hidden;


   box-shadow: 0 15px 35px #ddd;


}



.room-card img {


   width: 100%;


   height: 280px;


   object-fit: cover;


}


.room-card div {

   padding: 25px;

}



.room-card h3 {

   color: #17324d;

   font-size: 24px;


}



.room-card span {

   color: #d89b2b;


}







/* FACILITY */


.facilities {


   padding: 90px 8%;


   text-align: center;


}



.facility-grid {


   display: grid;


   grid-template-columns: repeat(4, 1fr);


   gap: 25px;


   margin-top: 40px;


}



.facility-grid div {


   padding: 30px;


   box-shadow: 0 10px 30px #ddd;


   border-radius: 20px;


}







/* CTA */


.hotel-cta {


   padding: 90px;


   text-align: center;


   background: #17324d;


   color: white;


}



.hotel-cta h2 {


   font-size: 40px;

   margin-bottom: 30px;


}




@media(max-width:900px) {


   .hotel-about {


      flex-direction: column;


   }


   .hotel-image,
   .hotel-text {

      width: 100%;

   }



   .room-grid,
   .facility-grid {

      grid-template-columns: 1fr;

   }



   .hotel-hero h1 {

      font-size: 38px;

   }

}

* {

   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: Poppins, sans-serif;

}



body {

   color: #333;

}




/* HERO */


.contact-hero {


   height: 70vh;


   background:

      linear-gradient(rgba(0, 0, 0, .6),
         rgba(0, 0, 0, .6)),

      url("./images/bhati\ banner.jpg");


   background-size: cover;


   background-position: center;


   display: flex;


   justify-content: center;


   align-items: center;


   text-align: center;


   color: white;


}



.contact-hero p {


   color: #d89b2b;

   letter-spacing: 4px;

   font-weight: bold;


}


.contact-hero h1 {


   font-size: 55px;

   margin: 20px 0;


}




.contact-hero span {

   font-size: 18px;

}







/* CONTACT */


.contact-section {


   padding: 100px 8%;


   display: flex;


   gap: 60px;


   background: #faf7f1;


}




.contact-info,
.contact-form {


   width: 50%;


}





.contact-info h2,
.contact-form h2 {


   font-size: 38px;

   color: #17324d;

   margin-bottom: 20px;


}



.contact-info p {

   line-height: 1.8;

   color: #666;

}




.info-card {


   background: white;


   padding: 25px;


   margin-top: 20px;


   border-radius: 20px;


   box-shadow: 0 10px 30px rgba(0, 0, 0, .08);


}



.info-card h3 {


   color: #d89b2b;


   margin-bottom: 10px;


}






/* FORM */


.contact-form {


   background: white;


   padding: 40px;


   border-radius: 25px;


   box-shadow: 0 10px 35px #ddd;


}



form {


   display: flex;


   flex-direction: column;


   gap: 18px;


}




input,
select,
textarea {


   padding: 15px;


   border: 1px solid #ddd;


   border-radius: 12px;


   font-size: 15px;


   outline: none;


}



textarea {

   height: 130px;

   resize: none;

}



button {


   background: #d89b2b;


   border: none;


   padding: 15px;


   color: white;


   border-radius: 30px;


   font-size: 16px;


   cursor: pointer;


}







/* MAP */


.map iframe {


   width: 100%;


   height: 400px;


   border: 0;


}







/* CTA */


.contact-cta {


   padding: 90px;


   background: #17324d;


   color: white;


   text-align: center;


}



.contact-cta h2 {


   font-size: 40px;

   margin-bottom: 30px;


}



.contact-cta a {


   background: #d89b2b;


   color: white;


   padding: 14px 35px;


   border-radius: 30px;


   text-decoration: none;


}







@media(max-width:900px) {


   .contact-section {


      flex-direction: column;


   }



   .contact-info,
   .contact-form {


      width: 100%;


   }



   .contact-hero h1 {


      font-size: 38px;


   }

}

/* LUXURY FOOTER */


.luxury-footer {


   background: #101f33;


   color: white;


   padding: 70px 8% 25px;


}





.footer-wrapper {


   display: grid;


   grid-template-columns: 2fr 1fr 1.5fr;


   gap: 60px;


}






.footer-column h2 {


   font-size: 32px;


   margin-bottom: 20px;


}



.footer-column h2 span {


   color: #d89b2b;


}




.footer-column p {


   color: #cfcfcf;


   line-height: 1.8;


}




.footer-column h3 {


   font-size: 22px;


   margin-bottom: 25px;


   color: #d89b2b;


}






.footer-column ul {


   list-style: none;
   display: block;


}



.footer-column ul li {


   margin-bottom: 15px;


}




.footer-column ul li a {


   color: #ddd;


   text-decoration: none;


   transition: .3s;


}



.footer-column ul li a:hover {


   color: #d89b2b;


   padding-left: 8px;


}







/* SOCIAL */


.footer-social {


   display: flex;


   gap: 15px;


   margin-top: 25px;


}



.footer-social a {


   height: 42px;


   width: 42px;


   border-radius: 50%;


   background: #d89b2b;


   color: white;


   display: flex;


   align-items: center;


   justify-content: center;


   text-decoration: none;


   font-weight: bold;


   transition: .3s;


}



.footer-social a:hover {


   background: white;


   color: #17324d;


   transform: translateY(-5px);


}







/* CONTACT */


.contact p {


   margin-bottom: 12px;


}





.footer-line {


   height: 1px;


   background: rgba(255, 255, 255, .2);


   margin-top: 50px;


}





.copyright {


   text-align: center;


   padding-top: 25px;


   color: #bbb;


   font-size: 14px;


}







@media(max-width:900px) {


   .footer-wrapper {


      grid-template-columns: 1fr;


      gap: 35px;


   }



}

/* HERO SLIDER */


.hero {


   height: 100vh;

   position: relative;

   overflow: hidden;

   display: flex;

   align-items: center;

   justify-content: center;


}





.hero-slider {


   position: absolute;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;


}





.slide {


   position: absolute;

   width: 100%;

   height: 100%;


   background-size: cover;

   background-position: center;


   opacity: 0;


   transition: opacity 1.5s ease;


}




.slide.active {


   opacity: 1;


}






.hero-overlay {


   position: absolute;

   top: 0;

   left: 0;

   width: 100%;

   height: 100%;


   background:

      linear-gradient(rgba(0, 0, 0, .55),
         rgba(0, 0, 0, .55));


   z-index: 1;


}






.hero-content {


   position: relative;

   z-index: 2;

   text-align: center;

   color: white;


   max-width: 900px;


}




.hero-content h1 {


   font-size: 60px;

   font-weight: 700;

   margin-bottom: 20px;


}



.hero-content p {


   font-size: 20px;

   line-height: 1.7;

   margin-bottom: 35px;


}




.btn {
   padding: 15px 35px;
   border: none;
   border-radius: 30px;
   background: #d89b2b;
   color: white;
   font-size: 16px;
   margin: 10px;
   cursor: pointer;
   text-decoration: none;
   display: inline-block;
}



.btn.light {


   background: white;

   color: #17324d;


}





@media(max-width:768px) {


   .hero-content h1 {

      font-size: 38px;

   }



   .hero-content p {

      font-size: 16px;

   }


}

/* MANUAL SLIDER BUTTONS */


.slider-btn {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 5;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   border: none;
   background: rgba(255, 255, 255, .3);
   color: white;
   font-size: 30px;
   cursor: pointer;
   transition: .3s;
   display: flex;
   align-items: center;
   justify-content: center;
   line-height: 1;
}



.slider-btn:hover {


   background: #d89b2b;


}




.prev {

   left: 40px;

}



.next {

   right: 40px;

}


@media(max-width:768px) {


   .slider-btn {


      width: 40px;

      height: 40px;

      font-size: 22px;


   }

   .prev {

      left: 15px;

   }


   .next {

      right: 15px;

   }


}

/* GLOBAL MOBILE RESPONSIVENESS */
@media (max-width: 768px) {

   /* Header and Navigation */
   .menu {
      display: block !important;
      position: relative;
      background: transparent;
      border: none;
      color: white;
      font-size: 32px;
      cursor: pointer;
      z-index: 101;
      order: -1 !important;
   }

   #nav {
      display: flex !important;
      position: fixed;
      top: 0;
      left: 0 !important;
      right: auto !important;
      height: 100vh;
      width: 250px;
      background: #0b2e4f;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 100px;
      transform: translateX(-100%);
      transition: transform 0.4s ease;
      z-index: 99;
      margin-left: 0 !important;
   }

   #nav.nav-active {
      transform: translateX(0);
   }

   #nav a {
      margin: 15px 0 !important;
      font-size: 18px !important;
      width: 100%;
      text-align: center;
   }

   .travel-header {
      height: 70px !important;
      padding: 0 15px !important;
   }

   .nav-box {
      padding: 0 !important;
      justify-content: flex-start !important;
      gap: 15px !important;
   }

   .logo {
      font-size: 22px !important;
      z-index: 100;
   }

   /* Sections */
   section {
      padding: 40px 5% !important;
   }

   /* Typography */
   h1 {
      font-size: 30px !important;
   }

   h2 {
      font-size: 24px !important;
   }

   /* About Home */
   .about-home {
      display: flex !important;
      flex-direction: column !important;
   }

   .about-image {
      width: 100% !important;
   }

   .about-image img {
      width: 100% !important;
      height: auto !important;
   }

   .about-content {
      width: 100% !important;
      padding: 20px 0 0 0 !important;
   }

   /* Tours */
   .tours .tour-box {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 20px !important;
   }

   .tour {
      width: 100% !important;
   }

   /* Experience */
   .experience-box {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 20px !important;
   }

   .exp-card {
      width: 100% !important;
   }

   /* Hotel */
   .hotel {
      display: flex !important;
      flex-direction: column !important;
   }

   .hotel img {
      width: 100% !important;
      height: auto !important;
   }

   .hotel-text {
      width: 100% !important;
      padding: 20px 0 0 0 !important;
   }

   /* Destination Grid */
   .destination-grid,
   .choose-grid {
      display: grid !important;
      grid-template-columns: 1fr !important;
      gap: 20px !important;
   }

   /* Reviews */
   .review-container {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      gap: 20px !important;
   }

   .review-card {
      width: 100% !important;
   }

   /* Footer */
   .footer-wrapper,
   .luxury-footer .footer-wrapper {
      display: flex !important;
      flex-direction: column !important;
      text-align: center !important;
   }

   .footer-column {
      width: 100% !important;
      margin-bottom: 30px !important;
   }

   .footer-social {
      justify-content: center !important;
   }

   /* Contact Page Mobile */
   .contact-section {
      flex-direction: column !important;
      padding: 40px 5% !important;
   }

   .contact-info,
   .contact-form {
      width: 100% !important;
   }
}