@import 'variables.css';

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  max-width: 1920px;
  background-color: var(--shades-color-white);
}

.tpd {
  background-color: var(--primary-color-light);
}


/*Icons*/

.blue-icon {
  color: var(--primary-color);
}

.red-icon {
  color: var(--accent-color-red);
}

.green-icon {
  color: var(--accent-color-green);
}

.white-icon {
  color: var(--shades-color-white);
}


/*Buttons*/

.primary-button {
  padding: var(--space-3) var(--space-4);
  align-items: center;
  justify-content: center;
  color: var(--shades-color-white);
  background-color: var(--primary-color);
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  text-align: center;
  border-radius: 8px;
  gap: var(--spacing-3);
  font-weight: 400;
  display: flex;
  border: 1.2px solid var(--primary-color);
  transition: background-color 0.6s ease-in-out;
  -webkit-transition: background-color 0.6s ease-in-out;
  font-family: 'Poppins', sans-serif;
}


.primary-button:hover {
  background-color: var(--primary-color-hover);
}

.primary-button.whatspp {
  background: var(--accent-color-green);
  border-radius: 99px;
  padding: var(--space-3) var(--space-4);
  border: none;
  gap: var(--space-2);
}

.primary-button.call {
  border-radius: 99px;
  padding: var(--space-3) var(--space-4);
  border: none;
  gap: var(--space-2);
}

.primary-button.whatspp:hover {
  background: var(--accent-color-green-hover);
}

a .secondary-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-radius: 8px;
  border: 1px solid var(--primary-color);
  padding: var(--space-3) var(--space-4);
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  border-radius: 8px;
  color: var(--primary-color);
  font-family: 'DM Sans', sans-serif;
  background-color: transparent;
}

.secondary-button {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  border-radius: 8px;
  border: 1.2px solid var(--primary-color);
  padding: var(--space-3) var(--space-4);
  gap: 8px;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  border-radius: 8px;
  font-weight: 400;
  color: var(--primary-color);
  font-family: 'DM Sans', sans-serif;
  background-color: transparent;
}

.button-filter {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  width: 100%;
  border-radius: 8px;
  border: 1.2px solid var(--primary-color);
  padding: var(--space-3) var(--space-4);
  gap: 8px;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  border-radius: 8px;
  font-weight: 400;
  color: var(--primary-color);
  font-family: 'DM Sans', sans-serif;
  background-color: transparent;
}

.button-filter:hover {
  background-color: var(--primary-color);
  color: #fff;
}

.button-filter:active {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}


.secondary-button-white {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1.2px solid var(--shades-color-white);
  padding: var(--space-3) var(--space-4);
  gap: 8px;
  width: fit-content;
  align-items: center;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  border-radius: 8px;
  color: var(--shades-color-white);
  font-family: 'DM Sans', sans-serif;
  background-color: transparent;
}

.secondary-button-white:hover {
  background-color: var(--shades-color-white-hover);
}

.icon-button {
  display: flex;
  padding: var(--space-3);
  align-items: center;
  background-color: var(--primary-color);
  color: var(--shades-color-white);
  border-radius: 8px;
  border: 1px solid var(--primary-color);
}

.icon-button:hover {
  background: var(--primary-color-hover);
}

.icon-button-prev {
  display: flex;
  border-radius: 0px 16px 16px 0px;
  width: 40px;
  height: 80px;
  align-items: center;
  justify-content: center;
  border-top: 1.4px solid var(--shades-color-white);
  border-bottom: 1.4px solid var(--shades-color-white);
  border-right: 1.4px solid var(--shades-color-white);
  border-left: 0px solid var(--shades-color-white);
  color: var(--shades-color-white);
  backdrop-filter: blur(3px);
  cursor: pointer;
  background: none;
}

.icon-button-prev:hover {
  background: var(--shades-color-white-opacity20);
  color: var(--shades-color-white);
  transition: 0.3s ease-in-out;
}

.icon-button-next {
  display: flex;
  border-radius: 16px 0px 0px 16px;
  width: 40px;
  height: 80px;
  align-items: center;
  justify-content: center;
  border-top: 1.4px solid var(--shades-color-white);
  border-bottom: .41px solid var(--shades-color-white);
  border-left: 1.4px solid var(--shades-color-white);
  border-right: 0px solid var(--shades-color-white);
  color: var(--shades-color-white);
  background: none;
  backdrop-filter: blur(3px);
  cursor: pointer;
}

.icon-button-next:hover {
  background: var(--shades-color-white-opacity20);
  color: var(--shades-color-white);
  transition: 0.3s ease-in-out;
}


.contact-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  z-index: 150;
}

.contact-content {
  display: flex;
  flex-direction: row;
  gap: 8px;
}



.menu {
  z-index: 100;
}


.spacer {
  height: 120px;
}

.logo-main {
  height: 64px;
}


/* Header  */

/* Slider */


.slider {
  height: 100vh;
  margin-top: -50px;
  position: relative;
}

.slider .list .item {
  position: absolute;
  inset: 0 0 0 0;
  overflow: hidden;
  opacity: 0;
  transition: .5s;
}

.slider .list .item img {
  filter: brightness(0.8);
  width: 100%;
  height: 100%;
  object-fit: cover;

}

.slider .list .item::after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
}

.slider .list .item .content {
  display: flex;
  flex-direction: column;
  position: absolute;
  justify-content: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  width: 100%;
  z-index: 1;
  gap: var(--space-7);
}


.slider .list .item .content .slider-text h1 {
  color: var(--shades-color-white);
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: var(--display-xl);
  line-height: var(--display-xl-lh);
  font-style: normal;
  font-weight: 500;
  letter-spacing: -0.1rem;
  margin: 0;
}

.slider .list .item .content p {
  margin: 0;
  color: var(--shades-color-white);
  font-family: 'Poppins', sans-serif;
  font-size: var(--heading-md);
  line-height: var(--heading-md-lh);
  font-style: normal;
  font-weight: 400;
  text-align: center;
  opacity: 90%;
}

.slider-text {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: var(--space-2);
}

.slider .list .item.active {
  opacity: 1;
  z-index: 10;
}

@keyframes showContent {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slider .list .item .content p:nth-child(1),
.slider .list .item .content .slider-text h1,
.slider .list .item .content p:nth-child(3) {
  transform: translateY(30px);
  opacity: 0;
  animation: showContent .5s .7s ease-in-out forwards;
  text-align: center;
}

.slider .list .item .content .slider-text h1 {
  animation-delay: 1s;
  text-align: center;

}

.slider .list .item .content p:nth-child(3) {
  animation-duration: 1.3s;
  text-align: center;

}

.arrows {
  position: absolute;
  top: 50%;
  display: flex;
  justify-content: space-between;
  width: 100%;
  z-index: 101;
}


.arrows button {
  transition: .5s;
}





/**Highlights**/

.highlights {
  display: flex;
  margin: var(--space-12);
}

.highlights-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  justify-content: center;
  gap: var(--space-12);
}

.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-4);
}

.highlight-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--space-2);
}

.highlight-text h2 {
  margin: 0%;
  color: var(--shades-color-grey500);
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: var(--heading-sm);
  line-height: var(--heading-sm-lh);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.3px;
}

.highlight-text p {
  margin: 0;
  color: var(--shades-color-grey500);
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  font-style: normal;
  font-weight: 400;
}

.highlight {
  border-radius: 24px;
  background-color: var(--shades-color-white);
  box-shadow: var(--shadow-2);
  width: 112px;
  height: 112px;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Products*/


.products {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  align-items: center;
  margin: var(--space-9) var(--space-12);
  gap: var(--space-7);
  text-align: left;
  font-size: var(--display-md);
  line-height: var(--display-md-lh);
  color: var(--shades-color-black);
  font-family: 'Poppins', sans-serif;
}


.user-cards {
  flex-direction: column;
  justify-content: flex-start;
  font-size: 24px;
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex-direction: row;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-4);
}

.card {
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  max-width: 600px;
  min-width: 240px;
  flex-shrink: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  background-color: var(--shades-color-white);
  border: 1px solid var(--shades-color-grey200);
  box-sizing: border-box;
  align-items: flex-start;
  justify-content: flex-start;
  padding: var(--space-4) var(--space-4) var(--space-6);
}


.card:hover {
  border: 0px solid var(--shades-color-grey200);
  box-shadow: var(--shadow-2)
}


.card>.head {
  margin-bottom: 0em;
}

.card>.body {
  font-size: .5rem;
  color: var(--shades-color-grey500);
}

.hide {
  display: none;
}

.no-cards-message {
  font-size: 1rem;
  color: var(--shades-color-grey500);
  margin-top: 1rem;
  display: none;
}

.content-products {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
  width: 100%;
}


.content {
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  flex-direction: row;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.image-placeholder-child {
  align-self: stretch;
  flex: 1;
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 100%;
  object-fit: cover;
}

.image-placeholder {
  align-self: stretch;
  border-radius: 16px;
  color: var(--shades-color-white);
  height: 284px;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

.product-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-3);
}

.product-content h1 {
  text-align: left;
  color: var(--shades-color-black);
  font-family: 'Poppins', sans-serif;
  font-size: var(--heading-md);
  line-height: var(--heading-md-lh);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.36px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.product-content p {
  text-align: left;
  margin: 0%;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: var(--shades-color-grey500);
  text-overflow: ellipsis;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  font-style: normal;
  font-weight: 400;
}

.content-group {
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.content-group.content-group-detail {
  gap: var(--space-3);
}

.product-features {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--space-3);
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: var(--shades-color-grey500);
  font-family: 'DM Sans', sans-serif;
}

.product-tags {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.product-tag {
  display: flex;
  padding: var(--space-2) var(--space-3);
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  border: 0.5px solid var(--primary-color);
  background: var(--primary-color);
}

.product-tag p {
  color: var(--shades-color-grey500);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  font-style: normal;
  font-weight: 400;
}

.feature {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
}

.cf {
  align-items: flex-start;
  gap: var(--space-3);
}

.fa-lg {
  line-height: 0;
}

.price-text {
  margin: 0;
  color: var(--primary-color);
  font-family: 'Poppins', sans-serif;
  font-size: var(--heading-md);
  line-height: var(--heading-md-lh);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.3px;
}


.product-price p {
  color: var(--shades-color-grey500);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-sm);
  line-height: var(--body-sm-lh);
  font-style: normal;
  font-weight: 400;
}


/**Adventures**/

.adventures-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin: var(--space-9) var(--space-12);
  box-sizing: border-box;
  gap: var(--space-7);
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: var(--display-md);
  line-height: var(--display-md-lh);
  color: var(--shades-color-black);
}

.adventure {
  color: var(--primary-color);
}

.adventure-packages {
  display: flex;
  align-self: stretch;
  align-items: center;
  gap: var(--space-4);
  flex-direction: row;
}

/* Aerial Adventure */

.adventure1 {
  background: var(--gradient-black-linear) url(images/paragliding/Paragliding\ Manali.webp) lightgray 50% / cover no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: row;
  text-align: left;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: var(--shades-color-white);
  font-family: 'DM Sans', sans-serif;
  border-radius: 16px;
  width: 50%;
  align-self: stretch;
}

/* Aerial Adventure */

.adventure2 {
  background: var(--gradient-black-linear) url(images/junglesafari/Junglesafari.webp), lightgray 50% / cover no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: row;
  text-align: left;
  border-radius: 16px;
  color: var(--shades-color-white);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  width: 100%;
  min-height: 240px;
  align-self: stretch;
}

/* Water Adventure */

.adventure3 {
  background: var(--gradient-black-linear) url(images/riverrafting/riverrafting.webp), lightgray 50% / cover no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-direction: row;
  text-align: left;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  font-family: 'DM Sans', sans-serif;
  border-radius: 16px;
  width: 100%;
  min-height: 240px;
  align-self: stretch;
}


.adventureall {
  background-color: var(--primary-color);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  flex-direction: row;
  text-align: left;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: var(--shades-color-white);
  font-family: 'DM Sans', sans-serif;
  border-radius: 16px;
  width: 30%;
  align-self: stretch;
}

.adventure-explore {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.adventure-explore h5 {
  color: var(--shades-color-white);
  text-overflow: ellipsis;
  font-family: 'Poppins', sans-serif;
  font-size: var(--heading-lg);
  line-height: var(--heading-lg-lh);
  font-style: normal;
  font-weight: 500;
  line-height: 130%;
  letter-spacing: -0.64px
}

.adventure-group3 {
  display: flex;
  flex-direction: row;
  gap: var(--space-4);
  width: 100%;
  align-self: stretch;
}

.adventure-explore h3 {
  margin: 0;
  color: var(--shades-color-white);
  font-family: 'Poppins', sans-serif;
  font-size: var(--display-sm);
  line-height: var(--display-sm-lh);
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  letter-spacing: -0.075rem;
}

.no-of-adventures {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.adventure2-group {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
  flex-direction: row;
}


.adventure-detail {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
  flex-direction: column;
  padding: var(--space-9) var(--space-5) var(--space-5)var(--space-5);
  box-sizing: border-box;
  background-image: url(./public/item-4@3x.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  gap: var(--space-3);
}

.adventure-detail .secondary-button-white {
  display: none;
}

.adventure-detail:hover .secondary-button-white {
  display: block;
}

.adventure-detail h1 {
  margin: 0;
  color: var(--shades-color-white);
  text-overflow: ellipsis;
  font-family: 'Poppins', sans-serif;
  font-size: var(--heading-lg);
  line-height: var(--heading-lg-lh);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.64px;
}

.feature-adventure {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
}

.feature-adventure p {
  color: var(--shades-color-white);
}

.adventure2-3 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  width: 100%;
}



/* About Us*/


.aboutus {
  display: flex;
  flex-direction: row;
  align-items: center;
  background-color: var(--shades-color-white);
  justify-content: center;
  margin: var(--space-12);
  box-sizing: border-box;
  gap: var(--space-10);
  text-align: left;
  color: var(--shades-color-black);
  flex-shrink: 0;
}

.aboutus-content {
  width: 50%;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  gap: var(--space-4);
}

.why-choose-us {
  margin: 0%;
  font-family: 'Poppins', sans-serif;
  font-size: var(--heading-xl);
  line-height: var(--heading-xl-lh);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.09375rem;
}

.description {
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  font-family: 'DM Sans', sans-serif;
  color: var(--shades-color-grey500);
}


.description-bold {
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  font-weight: 700;
  font-family: 'DM Sans', sans-serif;
  color: var(--shades-color-black);
}


.testimonials-parent {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: var(--space-4);
  flex-direction: row;
  width: 100%;
  max-width: 100%;
}


.testimonials:hover {
  box-shadow: var(--shadow-2);
  border: 1px solid var(--primary-color);
}

.testimonials {
  width: 100%;
  height: 80%;
  border-radius: 16px;
  background-color: var(--shades-color-white);
  border: 1px solid var(--shades-color-grey200);
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.testimonial-content {
  width: 100%;
  gap: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.ratings {
  font-size: var(--heading-sm);
  line-height: var(--heading-sm-lh);
}

.review {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
  gap: var(--space-5);
}

.review-content {
  gap: var(--space-3);
  color: var(--shades-color-black);
  font-family: 'DM Sans', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  align-self: stretch;
}

.review-content h6 {
  margin: 0%;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  font-style: normal;
  font-weight: 700;
}

.review-content p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  align-self: stretch;
  margin: 0%;
  overflow: hidden;
  color: var(--shades-color-grey500);
  text-overflow: ellipsis;
  font-family: 'DM Sans', sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.reviewer {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
  font-size: 1rem;
  font-weight: 700;
  color: var(--shades-color-black);
  font-family: 'DM Sans', sans-serif;
  width: 100%;
}


/*Call to Action*/

.call-to-action {
  display: flex;
  flex-direction: row;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  margin: var(--space-9) var(--space-12);
  align-self: stretch;
}

.cta-container {
  display: flex;
  flex-direction: row;
  border-radius: 16px;
  width: 100%;
  align-items: center;
  padding: var(--space-12) var(--space-9);
  background: var(--gradient-black-opacity20), url(images/uttrakhand/auli\ \(2\).avif), lightgray 50% / cover no-repeat;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  justify-content: center;
}

.secondary-button-white-cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid var(--shades-color-white);
  padding: var(--space-3) var(--space-4);
  gap: var(--space-2);
  width: 50%;
  align-items: center;
  font-size: var(--body-md);
  line-height: var(--body-md);
  color: var(--shades-color-white);
  font-family: 'DM Sans', sans-serif;
  background-color: var(--shades-color-white-opacity20);
}


.cta-text {
  color: var(--shades-color-white);
  font-family: 'Poppins', sans-serif;
  text-align: center;
  font-size: var(--heading-lg);
  line-height: var(--heading-lg-lh);
  font-style: normal;
  font-weight: 600;
  letter-spacing: -0.035rem;
}

.text-side {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
}



/*footer*/

#footer-placeholder {
  width: 100%;
}


.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: var(--space-9) var(--space-12);
  box-sizing: border-box;
  gap: var(--space-9);
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  color: var(--shades-color-grey500);
  font-family: 'DM Sans', sans-serif;
  text-align: left;
}

.footer-content {
  width: 100%;
  display: flex;
  align-items: center;
  align-self: stretch;
  gap: var(--space-12);
}

.about {
  display: flex;
  width: 500px;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.links {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: var(--space-7);
  color: var(--primary-color);
}

.column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  flex: 1 0 0;
}

.menu {
  align-self: stretch;
  position: relative;
  line-height: 150%;
}

.footer-links {
  display: flex;
  flex-direction: column;
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  color: var(--shades-color-grey500);
  gap: var(--space-3);
}

.link {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: row;
  padding: var(--space-2) 0;
}

.link:hover {
  color: var(--primary-color);
}

.link-social {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-self: stretch;
  font-size: var(--body-lg);
  line-height: var(--body-lg-lh);
  color: var(--shades-color-grey500);
  gap: var(--space-3);
  text-decoration: none;
}

a {
  text-decoration: none;
  color: var(--primary-color);
}



.link-social:hover {
  color: var(--primary-color);
}

.credits,
.row {
  display: flex;
  align-items: center;
  justify-content: center;
}

.row {
  align-self: stretch;
}

.credits {
  align-self: stretch;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: var(--shades-color-grey500);
}


/** Home End**/


/**Tour Packages**/

.header-tp {
  width: 100%;
  align-items: center;
}

input {
  display: flex;
  align-self: stretch;
  padding: var(--space-0) var(--space-4);
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  border: none;
  width: 100%;
  height: 100%;
  background: transparent;
  color: var(--shades-color-grey500);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  font-style: normal;
  font-weight: 400;
}

input:focus {
  outline: solid 1px var(--primary-color);
}


.search-wrapper {
  position: relative;
  text-align: left;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: var(--shades-color-grey500);
  font-family: 'DM Sans', sans-serif;
  border-radius: 8px;
  background-color: var(--primary-color);
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1920px;
  width: 100%;
  align-self: stretch;
  border-radius: 16px;
  background-color: var(--shades-color-white);
  border: 1px solid var(--shades-color-grey200);
  box-sizing: border-box;
  height: 78px;
  align-items: center;
}


.search-wrapper .icon-button {
  position: absolute;
  right: 16px
}

.button-parent {
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  overflow-x: auto;
  max-width: 100%;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.button-parent button.active{
  background-color: var(--primary-color);
  color: #fff;
}


.buttons {
  margin-top: var();
  display: flex;
  flex-direction: row;
  gap: var(--space-3);
  width: 100%;
}




/**Product Detail*/


.product-details-screen {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-4);
  align-self: stretch;
  margin: var(--space-12);
}

.product-features .product-overview {
  width: 50%;
}

.product-feature {
  align-self: stretch;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: var(--space-3);
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  color: var(--shades-color-grey500);
  font-family: 'DM Sans', sans-serif;
}

.product-overview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  align-self: stretch;
  border-radius: 16px;
  background-color: var(--shades-color-white);
  padding: var(--space-7);
}

.product-main {
  display: flex;
  gap: var(--space-7);
  align-self: stretch;
  justify-content: space-between;
}

.product-main .buttons {
  margin-top: 0px;
}

.package-overview {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: 24px;
  align-self: stretch;
}

.package-overview h2 {
  margin: 0;
  color: var(--shades-color-black);
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.01875rem;
}

.package-overview p {
  margin: 0;
  color: var(--shades-color-grey500);
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.package-overview .bold {
  margin: 0;
  color: var(--shades-color-grey500);
  font-family: "DM Sans", sans-serif;
  font-size: 1rem;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}

.package-overview-sm {
  display: flex;
  flex-direction: column;
  gap: 8px;
}


.package-highlight {
  flex-direction: row;
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: flex-start;
}

.package-highlight .blue-icon {
  padding-top: 4px;
}

.package-highlight .red-icon {
  padding-top: 4px;
}

.package-highlight .green-icon {
  padding-top: 4px;
}

.product-book {
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
  align-items: center;
}

.feature .detail {
  flex-direction: row;
}

/** Image Carousel **/

.carousel-container {
  position: relative;
  width: 100%;
}

#prevButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  z-index: 4;
}

#nextButton {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 4;
}


.carousel {
  width: 100%;
  position: relative;
  overflow: hidden;
  height: 508px;
  border-radius: 16px;
}

.slide {
  width: 100%;
  height: 100%;
  position: absolute;
  transition: 1s;
  object-fit: cover;
  object-position: center;
}

.nav {
  text-align: center;
  margin-top: 15px;
}

.nav button {
  font-size: 20px;
  padding: 5px;

}

/**Tabs**/

.tab {
  overflow-x: auto;
  display: flex;
  flex-direction: row;
  max-width: 100%;
}

.tab button.tablinks {
  background-color: var(--shades-color-white);
  padding: 0px 16px;
  gap: 10px;
  max-width: 100%;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
  outline: none;
  cursor: pointer;
  color: var(--shades-color-grey500);
  border-bottom: 0px solid var(--shades-color-black);
}

.tab button::-webkit-scrollbar {
  width: 0px;
  background-color: var(--shades-color-white);

}

.tab button::-webkit-scrollbar-thumb {
  background-color: var(--shades-color-white);
}

.tab button::-webkit-scrollbar-track {
  background-color: var(--shades-color-white);
}


.tab button p {
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-style: normal;
  font-weight: 600;
  line-height: 130%;
  letter-spacing: -0.01875rem;
  margin: 8px 8px;
}

.tab button.tablinks.active,
.tab button.tablinks:hover {
  color: var(--shades-color-black);
  background-color: var(--shades-color-white);
  border-bottom: 2px solid var(--shades-color-black);
}


.tabcontent {
  display: none;
}


/* Loader */

#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--shades-color-white);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  display: none;
}

#loader {
  border: 4px solid var(--shades-color-white);
  border-top: 4px solid var(--primary-color);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}


/* Contact Form */

.contact-section {
  display: flex;
  margin: var(--space-12);
}

.contact-us {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  background-color: var(--primary-color-light);
  justify-content: center;
  border-radius: 16px;
  padding: var(--space-9);
  box-sizing: border-box;
  gap: var(--space-9);
}

.contactus-content {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
  width: 40%;
}

.contact-form {
  display: flex;
  padding: var(--space-9);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  border-radius: 16px;
  background-color: var(--shades-color-white);
  width: 60%;
}

.cf {
  display: flex;
  align-items: center;
}


.inputBox {
  position: relative;
  width: 100%;
}

.inputBox input {
  border-radius: 16px;
  border: 1px solid var(--shades-color-grey200);
  outline: none;
  color: var(--shades-color-black);
  font-size: 1rem;
  display: flex;
  width: 100%;
  height: 56px;
  padding: 16px 24px;
  align-items: center;
  gap: 24px;
  color: var(--shades-color-grey500);
  font-family: 'DM Sans', sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.inputBox label {
  position: absolute;
  left: 10;
  top: 2;
  padding: 10px;
  pointer-events: none;
  color: var(--shades-color-grey500);
  font-family: 'DM Sans', sans-serif;
  font-size: 1.125rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
}

.inputBox input:valid~label,
.inputBox input:focus~label {
  color: var(--primary-color);
  top: 0;
  transform: translateX(10px) translateY(-7px);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.875rem;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  padding: 0 10px;
  background-color: var(--shades-color-white);
}

.inputBox input:valid,
.inputBox input:focus {
  border: 1px solid var(--primary-color);
}

.contact-form .primary-button {
  width: 100%;
}

/* Nav */

#nav-placeholder {
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 200;
}

.navbar {
  display: flex;
  background-color: var(--shades-color-white);
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: var(--shadow-1);
  align-items: center;
  padding: var(--space-4) var(--space-12);
  justify-content: space-between;
}

.navbar a {
  float: left;
  display: block;
  color: var(--shades-color-grey500);
  text-align: center;
  font-family: 'DM Sans', sans-serif;
  font-size: var(--body-md);
  line-height: var(--body-md-lh);
  font-style: normal;
  font-weight: 400;
  text-decoration: none;
}

.navbar a:hover {
  color: var(--primary-color);
}

.navbar .logo {
  display: block;
  float: left;
  height: 56px;
  width: 200px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left;
}

.nav-items {
  display: flex;
  flex-direction: row;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
}

.nav-items:active {
  color: var(--primary-color);
}

.navbar-toggle {
  display: none;
  float: right;
  cursor: pointer;
  padding: var(--space-4) var(--space-3);
  border-radius: 8px;
  outline: 2px solid var(--primary-color);
  background-color: white;
  color: var(--primary-color);
  border: none;
  transition: transform 0.3s ease-in-out;
}

.nav-logo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.nav-logo img {
  height: 100%;
  width: 100%;
  background-size: cover;
}


/* Media Query for max-width: 768px */


@media only screen and (min-width: 480px) and (max-width: 900px) {

  /* Nav */

  .navbar {
    padding: var(--space-3) var(--space-8);
    display: block;
  }

  .navbar a {
    display: none;
  }

  .navbar .logo {
    float: none;
    display: block;
    text-align: center;
  }

  .nav-items {
    flex-direction: column;
  }

  .navbar-toggle {
    display: block;
  }

  .navbar.responsive {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    gap: var(--space-5);
  }

  .nav-logo {
    width: 100%;
  }

  .navbar.responsive a {
    display: block;
    text-align: center;
  }

  /* Header */

  .slider .list .item .content .slider-text h1 {
    font-size: var(--display-lg);
    line-height: var(--display-lg-lh);
  }

  .slider .list .item .content p {
    font-size: var(--heading-sm);
    line-height: var(--heading-sm-lh);
  }



  /* Highlights */

  .highlights {
    margin: var(--space-9) var(--space-8);
  }

  .highlights-container {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Products */

  .products {
    margin: var(--space-9) var(--space-8);
  }

  .user-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Adventures */

  .adventures-content {
    margin: var(--space-9) var(--space-8);
  }

  .adventure-packages {
    flex-direction: column;
  }

  .adventure1 {
    min-height: 240px;
    width: 100%;
  }

  /* About Us */

  .aboutus {
    margin: var(--space-9) var(--space-8);
    flex-direction: column;
  }

  /* CTA */

  .call-to-action {
    margin: var(--space-9) var(--space-8);
  }

  .cta-container {
    padding: var(--space-9) var(--space-2);
  }

  .text-side {
    width: 80%;
  }

  /* Footer */
  .footer {
    margin: var(--space-9) var(--space-8);
  }

  .footer-content {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-9);
  }

  .about {
    width: 100%;
  }

  .links {
    width: 100%;
  }

  /* Home Page End */

  /* Tour Packages */




  /* Contact Form */

  .contact-section {
    margin: var(--space-12) var(--space-8);
  }

  .contact-us {
    flex-direction: column;
  }

  .contactus-content {
    width: 100%;
  }

  .contact-form {
    width: 100%;
  }

  /* Product Details */

  .product-details-screen {
    margin: var(--space-12) var(--space-8);
  }

  .product-feature {
    flex-direction: column;
  }

}

/* Media Query for max-width: 480px */


@media only screen and (max-width: 480px) {


  /* Nav */

  .navbar {
    display: block;
    padding: var(--space-3) var(--space-2);
  }

  .navbar a {
    display: none;
  }

  .navbar .logo {
    float: none;
    display: block;
    text-align: center;

  }

  .nav-items {
    flex-direction: column;
  }

  .navbar-toggle {
    display: block;
  }

  .nav-logo {
    width: 100%;
  }

  .navbar.responsive {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease-in-out;
    gap: var(--space-5);
  }

  .navbar.responsive a {
    display: block;
    text-align: center;
  }

  /* Buttons */


  .primary-button {
    padding: var(--space-3) var(--space-3);
    font-size: 0.875rem;
  }

  .secondary-button {
    padding: var(--space-3) var(--space-3);
    font-size: 0.875rem;
  }

  .icon-button {
    padding: var(--space-2);
  }

  .button-filter {
    font-size: 0.875rem;
  }


  .primary-button.call {
    display: none;
  }

  .buttons {
    gap: var(--space-2);
  }

  /* Header */

  .arrows {
    display: none;
  }

  .slider .list .item .content {
    justify-content: flex-start;
    align-items: flex-start;
    padding: var(--space-3);
    gap: var(--space-6);

  }

  .slider .list .item .content .slider-text h1 {
    font-size: var(--display-md);
    line-height: var(--display-md-lh);
    text-align: left;
  }

  .slider .list .item .content p {
    font-size: var(--body-md);
    line-height: var(--body-md-lh);
    text-align: left;
  }

  .slider .list .item .content .button-parent .secondary-button-white {
    display: none;
  }

  /* Highlights*/

  .highlights {
    margin: var(--space-9) var(--space-2);
  }

  .highlights-container {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-6);
  }

  .item {
    gap: var(--space-3);
  }

  .highlight-text {
    gap: var(--space-2);
    width: 80%;
  }

  .highlight-text h2 {
    font-size: var(--mobile-heading-md);
    line-height: var(--mobile-heading-md-lh);
  }

  .highlight-text p {
    font-size: var(--mobile-body-lg);
    line-height: var(--mobile-body-lg-lh);
  }


  /* Products*/

  .products {
    margin: var(--space-2) var(--space-2);
    gap: var(--space-4);
    font-size: var(--mobile-display-md);
    line-height: var(--mobile-display-md);
  }

  .user-cards {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-3);
  }

  .card {
    padding: var(--space-3) var(--space-3) var(--space-5);
  }

  .image-placeholder {
    height: 176px;
    margin-bottom: 16px;
  }

  .product-content {
    gap: var(--space-2);
  }

  .product-content h1 {
    font-size: var(--heading-sm);
    line-height: var(--heading-sm-lh);
  }

  .product-content p {
    font-size: var(--mobile-body-xs);
    line-height: var(--mobile-body-xs-lh);
  }

  .content-group {
    gap: var(--space-2);
  }

  .content-group.content-group-detail {
    gap: var(--space-2);
  }

  .product-features {
    font-size: var(--mobile-body-xs);
    line-height: var(--mobile-body-xs-lh);
  }

  .product-price p {
    font-size: var(--mobile-body-xs);
    line-height: var(--mobile-body-xs-lh);
  }


  /* Adventures*/

  .adventures-content {
    margin: var(--space-9) var(--space-2);
    gap: var(--space-5);
    font-size: var(--mobile-display-md);
    line-height: var(--mobile-display-md-lh);
  }


  .adventure-packages {
    flex-direction: column;
    gap: var(--space-3);
  }


  .adventure2-3 {
    gap: var(--space-3);
  }

  .adventure2-group {
    flex-direction: column;
    gap: var(--space-3);
  }

  .adventureall {
    width: 100%;
    padding: var(--space-3);
    align-items: center;
    justify-content: center;
    font-size: var(--heading-sm);
    line-height: var(--heading-sm-lh);
  }

  .adventure-explore h3 {
    font-size: var(--heading-sm);
    line-height: var(--heading-sm-lh);
  }

  .adventure-explore h5 {
    font-size: var(--heading-sm);
    line-height: var(--heading-sm-lh);
  }

  .adventure-explore {
    flex-direction: column;
    align-items: center;
  }

  .no-of-adventures {
    gap: var(--space-2);
    flex-direction: row;
    align-items: flex-end;
  }

  a .explore-all-white {
    width: 100%;
  }

  .text-side {
    width: 100%;
  }

  .user-cards .card .content-group .primary-button,
  .user-cards .card .content-group .secondary-button {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .adventure1 {
    width: 100%;
  }

  .adventure-detail {
    padding: var(--space-9) var(--space-3) var(--space-3)var(--space-3);
    height: 18rem;
    gap: var(--space-2);
  }

  .adventure-detail h1 {
    font-size: var(--heading-sm);
    line-height: var(--heading-sm-lh);
  }


  /* About Us */

  .aboutus {
    flex-direction: column;
    margin: var(--space-0) var(--space-2);
    gap: var(--space-4);
  }

  .aboutus-content {
    gap: var(--space-3);
  }

  .why-choose-us {
    font-size: var(--mobile-display-md);
    line-height: var(--mobile-display-md-lh);
  }

  .description {
    font-size: var(--mobile-heading-sm);
    line-height: var(--mobile-heading-sm-lh);
  }

  .testimonials-parent {
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
  }

  .testimonials {
    padding: var(--space-3);
  }

  .testimonial-content {
    gap: var(--space-3);
  }

  .ratings {
    font-size: var(--mobile-heading-sm);
    line-height: var(--mobile-heading-sm-lh);
  }

  .review {
    gap: var(--space-4);
  }

  .review-content {
    gap: var(--space-2);
  }

  .review-content h6 {
    font-size: var(--body-md);
    line-height: var(--body-md-lh);
  }


  /* CTA */

  .call-to-action {
    margin: var(--space-9) var(--space-2);
  }

  .cta-container {
    padding: var(--space-9) var(--space-2);
  }

  .cta-text {
    width: 80%;
    font-size: var(--mobile-heading-lg);
    line-height: var(--mobile-heading-lg-lh);
  }

  .secondary-button-white-cta {
    width: 100%;
  }


  /* Footer */

  .footer {
    margin: var(--space-0) var(--space-2) var(--space-9) var(--space-2);
  }

  .footer-content {
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
  }

  .links {
    gap: var(--space-4);
    flex-direction: column;
  }

  .link-social {
    font-size: var(--body-md);
    line-height: var(--body-md-lh);
  }

  .column {
    gap: var(--space-3);
  }

  .credits {
    font-size: var(--body-sm);
    line-height: var(--body-sm-lh);
  }

  /* Home Page End */

  /* Tour Packages */

  .button-parent {
    gap: var(--space-2);
    overflow: auto;
    justify-content: flex-start;
  }

  .search-wrapper {
    height: 56px;
    border-radius: 8px;
  }

  input {
    padding: var(--space-0) var(--space-3);
    border-radius: 8px;
  }

  .about {
    width: 100%;
  }

  /* Contact Form */

  .spacer {
    height: 56px;
  }

  .contact-section {
    margin: var(--space-3) var(--space-3);
  }

  .contact-us {
    flex-direction: column;
    padding: var(--space-5) var(--space-3);
    gap: var(--space-5);
  }

  .contactus-content {
    width: 100%;
    gap: var(--space-3);
  }

  .contact-form {
    width: 100%;
    padding: var(--space-5) var(--space-3);
    gap: var(--space-3);

  }

  /* Product Detail Screen */

  .product-details-screen {
    gap: var(--space-3);
    margin: var(--space-3) var(--space-3);
  }

  .product-overview {
    padding: var(--space-4);
  }

  .product-main {
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
  }

  .product-book {
    align-items: flex-start;
  }

  .product-features .product-overview {
    width: 100%;
  }

  .product-feature {
    flex-direction: column;
    font-size: var(--mobile-body-xs);
    line-height: var(--mobile-body-xs-lh);
  }

}