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

*{
  font-family: "Plus Jakarta Sans", sans-serif;t
	font-family: 'Inter', sans-serif;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* border: 1px solid rgb(0, 0, 255) !important; */
}


/*Base Style
--------------*/
.place-visit-parent{
	display: none;
}

.container {
    width: 100%;
    padding: 15px;
    margin: 0 auto;
}

.rata-kiri-kanan{
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.6; /* Untuk readability yang lebih baik */
}

label::after{
  content: var(--label-info, '');
  font-size: .9em;
  font-weight: normal;
  color: var(--label-info-color, gray);
}

.form-group:has([required]){
  --label-info: ' *';
  --label-info-color: red;
}


.mb-30{
	margin-bottom: 30px !important;
}


.carousel-inner .item {
	-webkit-transition-duration: 2s;
	-moz-transition-duration: 2s;
	-o-transition-duration: 2s;
	transition-duration: 2s;
}


.allura-regular {
	font-family: "Allura", cursive;
	font-weight: 400;
	font-style: normal;
}  

.v-center {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}


.title-text {
	margin-top: 0px;
	padding: 0 0 10px 0;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	font-size: 20px;
	line-height: normal;
}

.title-text .main-button {
	padding: 5px 16px;
	font-size: 12px;
}

.align-items-flex-end {
	align-items: flex-end;
}

.main-button {
	padding: 4px 16px;
	display: inline-block;
	color: #fff;
	font-size: 11px;
	background: #00c3ff;
	border: none;
	border-radius: 3px;
	cursor: pointer;
	outline: none;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	transition: .6s ease;
}

.main-button:hover {
	color: #fff;
	background: #002F6D;
}

.btn-info {
	color: #fff;
	background-color: #002F6D;
	border-color: #46b7da00;
}

.big-button {
	border: none;
	background: #002F6D;
	color: #fff;
	font-size: 25px;
	width: 400px;
	line-height: 32px;
	padding: 20px 50px;
	text-decoration: none;
	transition: .5s ease;
	display: inline-block;
	cursor: pointer;
	outline: none;
	font-weight: 800;
	text-transform: uppercase;
	width: auto;
	border-radius: 9px;
}

.big-button:hover {
	color: #fff;
	background: #0051bb;
}

.mid-button {
	border: none;
	background: #002F6D;
	color: #fff;
	font-size: 30px;
	line-height: 32px;
	padding: 20px 40px;
	text-decoration: none;
	transition: .5s ease;
	display: inline-block;
	cursor: pointer;
	outline: none;
	font-weight: 800;
	text-transform: uppercase;
}

.mid-button:hover {
	color: #fff;
	background: #0051bb;
}

.bg-black{
	background-color: #000;
}

.box-style-1{
	box-shadow: inset 0 0 0 1px #e0e5e9;
	border: 5px solid #fbfbfc;
	border-radius: 5px;
	margin-bottom: 0px;
	font-size: 14px;
	line-height: 20px;
	background-color: #fff;
	padding-right: 15px;
}

.box-style-1 h4{
	border-bottom: 1px solid #eaeff3;
	margin-top: 10px;
	padding-bottom: 10px;
	text-transform: uppercase;
	padding-left: 15px;
	
}

.widget-list {
	margin: 0;
}

.widget-list li {
	margin-bottom: 10px;
	color: #888;
	border-bottom: 1px #e7e7e7 dotted;
	list-style: none;
	line-height: 18px;
}

.widget-list li:last-child,
.widget-list li:last-child div {
	border-bottom: 0;
	margin-bottom: 0;
}

.widget-list li a {
	padding-left: 5px;
	font-weight: 700;
	text-decoration: none;
}

.widget-list li.d-flex a {
	padding-left: 5px;
}

.widget-list li div {
	margin-bottom: 10px;
	padding-left: 20px;
}

.borderound-box{
	border-radius: 10px;
	box-shadow: 0px 4px 7px #888888;
}

.btn-dark-blue{
	background-color: #002F6D;
	color: white;
}


/*Header Design*/
.header{
	width: 100%;
	background-color: #fff;
	padding: 15px 20px;
	transition: 0.5s;
  position: relative;
  z-index: 2000;
}

.header-fixed{
	position: fixed;
	z-index: 9999 !important;
	border-bottom: 5px solid #e5e5e5;
	box-shadow: 1px 1px 2px #cecece;
	padding: 5px 20px;
	padding-top: 15px;
	top: 0;
}

.header ul > li > a{
	font-weight: 500;
	color: black;
}


.logo{display: none;}
.logo img{width:58px; border-radius: 50%}


/*Before HEader*/
.before-header{
	width: 100%;
	background-color: #002F6D;
	padding: 15px 0px 0px 0px;
  z-index:998;

}
.before-header-item{
	list-style: none;
	padding-bottom: 20px;
	position:relative;
	font-family: Calibri, Arial;
	font-size: 15px;
	border: none;
}

.before-header-item li{
	float: left;

}

.before-header-item > li > i{
	color: #fff;
	padding-right: 10px;
}
.before-header-item > li > a{
	text-decoration: none;
	color: #fff;
	padding-right: 10px;
}



/* Accomodation */

.accomo-title{
	padding-bottom: 1rem;
}
.accomo-title h3{
	font-size: 2.3rem;
	font-weight: 700;
}

.accomo-title p{
	font-size: 15px;
}


.accomo-container{
	display: flex;
	width: max-content;
	gap: 1rem;
}

.accomo-horizontal-scroll{
	width: 100%;
	overflow-x: scroll;
}

.item-gall-accomo{
	position: relative;
	overflow: hidden;
}

.item-gall-accomo img{
	transform: scale(1) ;
	transition: all 600ms ;
}

.item-gall-accomo:hover img{
	transform: scale(1.05) ;
}


.item-gall-accomo figcaption{
	position: absolute;
	bottom: -4rem ;
	color: white;
	background-color: #000000b1;
	padding: 20px 20px;
	width: 100%;
	text-align: center;
	transition: all 200ms ;
}


.item-gall-accomo:hover figcaption{
	bottom: 0;
}


/*Tables Accomodation*/
.table-box{
	box-shadow: 0px 3px 7px #888888;
}


/*SOCIAL MEDIA FOOTER ICON*/
.social-media{
	padding:0px;
	list-style-type:none;
	display:flex;
	justify-content: center;
	letter-spacing: 1px;
	
}

.social-media li{
	display: inline-block;
	margin-right: 2px;
	margin-top: 0px;
	margin-bottom: 10px;
}

.social-media li a{
	width: 60px;
	color:#ffffff00;
	text-decoration: none;
	display: flex;/*Merubah sifat link yang awalnya inline ,menjadi kotak*/
	justify-content: center;
	padding: 15px 10px;
	margin-bottom: 10px;
	transition: all .2s ease-in;
}

.social-media img{
	text-decoration: nones;
}

.social-media li a:hover{
	transform: scale(1.1);
}


/*HERO SLIDER DESIGN*/

.c-item{
	height: 480px;
}

.c-img{
	height: 100%;
	object-fit: cover;
	filter: brightness(0.6);
}

.btn-home{
    display: inline-block;
    padding: 18px 38px;
    background-color:  rgb(0, 120, 233);
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin: 28px 0px 0px 0px;
    transition: .2s ease-in;
}

.btn-home:hover{
    background-color: #002F6D;
}

.carousel-item img{
	filter: brightness(60%)
}

.carousel-caption{
	top: 25%;
	left: 5%;
	text-align: left;
}

.carousel-caption h5{
	font-size: 80px;
}

.carousel-caption h5 span{
	font-family: "Playfair Display", serif;
	font-style: italic;
	border-bottom: solid 3px white;
}

.carousel-caption p{
	font-size: 16px;
	padding-right: 30rem;
	padding-top: 5px;
	padding-bottom: 20px;
}

.carousel-caption a{
	background-color: transparent;
	color: white;
	padding: 10px 20px;
	border-radius: 5px;
	border: 1px solid white;
	text-decoration: none;
	transition: all 300ms ease-in;
}

.carousel-caption a:hover{
	background-color: white;
	color: #002F6D;
}

.transparent-btn{
	background-color: transparent;
	color: #00132d;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: 5px;
	border: 2px solid #00132d;
	text-decoration: none;
	transition: all 300ms ease-in;
}

.transparent-btn:hover{
	background-color: #002F6D;
	color: white;
}


/* Program Info */
.program-title{
	margin-top: 20px;
	margin-left: -1.5rem;
}

.program-title h1{
	font-size: 28px;
}

.program-detail{
	padding-left: 10px;
	margin-top: -1rem;
}

.program-detail1{
	margin-top: 20px;
	background-color: #002F6D;
	width: 200px;
	height: 160px;
	padding-top: 20px;
	border-radius: 10px;
}

.program-detail2{
	margin-top: 20px;
	background-color: #002F6D;
	width: 200px;
	height: 160px;
	padding-top: 20px;
	margin-left: 20px;
	border-radius: 10px;
}

.program-content{
	margin-top: 15px;
	padding-left: 12px;
}

.program-content h6{
	font-size: 15px;
	color: white;
	font-weight: 600;
	opacity: 0.8;
}

.program-content p{
	font-size: 20px;
	color: white;
	padding-bottom: 15px;
}

.program-content p span{
	font-size: 13px;
	font-weight: 700;
}

.program-icon i{
	font-size: 25px;
	padding-left: 12px;
	color: white;
}

/* Beyond bali */
.beyond-hero{
	margin-top: 6rem;
}

.beyond-hero h1{
	font-size: 50px;
	font-weight: 700;
}

.beyond-hero-img{
	padding-left: 5rem ;
}

.beyond-hero p small{
	font-weight: 700;
	font-size: 15px;
}

.beyond-hero h5{
	font-weight: 700;
}

.agent-assistant{
	text-align: center;
	margin-top: 2.5rem;
	padding-bottom: 2rem;
}

.agent-assistant h6{
	font-size: 20px;
	font-weight: 600;
}

/* Kuta tour3d2n */
.kuta-tour3d{
	background-image: url(../image/kuta.webp); filter: brightness(0.90);
	height: 400px;
	background-size: cover;
}

.nusa-dua-tour3d{
	background-image: url(../image/nusa-dua.webp); filter: brightness(0.90);
	height: 400px;
	background-size: cover;
}


.kutatour-book{
	color: white;
}

.kutatour-book h3{
	font-size: 50px;
	font-weight: 700;
	margin-top: 3rem;
	text-shadow: 2px 2px 4px #767676;
}

.kutatour-book p{
	font-size: 15px;
	text-shadow: 2px 2px 4px #767676;
}

.kutatour-book strong{
	font-size: 20px;
	text-shadow: 2px 2px 4px #767676;
}

.contactbook{
	padding-top: 10px;
	text-shadow: 2px 2px 4px #767676;
	font-weight: 500;
	font-size: 20px;
	margin-bottom: 1rem;
}

.phonebook-ico{
	margin-left: 1rem;
}

/* HRHM-Inspired Intro Section - Collage Version */
.hrhm-intro-section {
  padding-top: 80px;
  padding-bottom: 10px;
  background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 50%, #f0f7ff 100%);
  position: relative;
  overflow: hidden;
}

.hrhm-intro-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 80%, rgba(0, 108, 250, 0.02) 0%, transparent 50%);
  z-index: 1;
}

.hrhm-intro-section .container {
  position: relative;
  z-index: 2;
}

/* Image Collage Section */
.hrhm-visual-section {
  position: relative;
}

.hrhm-image-collage {
  position: relative;
  max-width: 500px;
  height: 600px;
  margin: 0 auto;
}

/* Main large image */
.collage-main-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 90%;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  z-index: 3;
}

.collage-main-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.collage-main-image:hover img {
  transform: scale(1.02);
}

/* Small images container */
.collage-small-images {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Small image 1 - Top right */
.small-image-1 {
  position: absolute;
  top: -20px;
  right: -30px;
  width: 38%;
  height: 40%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
  z-index: 5;
  border: 4px solid white;
}

/* Small image 2 - Middle right */
.small-image-2 {
  position: absolute;
  top: 45%;
  right: 10px;
  width: 40%;
  height: 25%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
  z-index: 4;
  border: 4px solid white;
}

/* Small image 3 - Bottom left */
.small-image-3 {
  position: absolute;
  bottom: 80px;
  left: -100px;
  width: 40%;
  height: 30%;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12);
  z-index: 4;
  border: 4px solid white;
}

.small-image-1 img,
.small-image-2 img,
.small-image-3 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.small-image-1:hover img,
.small-image-2:hover img,
.small-image-3:hover img {
  transform: scale(1.05);
}

/* Floating Experience Badge */
.experience-floating-badge {
  position: absolute;
  bottom: 100px;
  right: -20px;
  background: linear-gradient(135deg, #002F6D, #006cfa);
  color: white;
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(0, 47, 109, 0.3);
  z-index: 5;
  min-width: 140px;
}

.badge-number {
  display: block;
  font-size: 28px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 5px;
}

.badge-text {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 1px;
}

/* Content Section */
.hrhm-content-section {
  padding-left: 40px;
  margin-bottom: 80px;
}

.hrhm-content-wrapper {
  max-width: 550px;
}

.hrhm-about-badge {
  display: inline-block;
  background: linear-gradient(135deg, #002F6D, #006cfa);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 25px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 20px;
}

.hrhm-main-title {
  font-size: 3.2rem;
  font-weight: 800;
  color: #002F6D;
  line-height: 1.2;
  margin-bottom: 15px;
  letter-spacing: -1px;
}

.hrhm-description {
  font-size: 1rem;
  line-height: 1.7;
  color: #64748b;
  margin-bottom: 20px;
  text-align: justify;
}

/* Service Tags with Blue Style */
.hrhm-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 25px;
}

.service-tag-blue {
  background: rgba(0, 47, 109, 0.1);
  color: #002F6D;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(0, 47, 109, 0.2);
  transition: all 0.3s ease;
}

.service-tag-blue:hover {
  background: linear-gradient(135deg, #002F6D, #006cfa);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 47, 109, 0.3);
}

/* Features Grid */
.hrhm-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 5px;
}

.hrhm-feature {
  display: flex;
  align-items: center;
  gap: 15px;
}

.feature-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.feature-icon.green {
  background: linear-gradient(135deg, #002F6D, #006cfa);
}

.feature-icon i {
  color: white;
  font-size: 20px;
}

.feature-content h4 {
  font-size: 16px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0;
  line-height: 1.3;
}

/* CTA Button */
.hrhm-cta-section {
  margin-top: 30px;
}

.hrhm-btn-primary {
  background: linear-gradient(135deg, #002F6D, #006cfa);
  color: white;
  padding: 15px 30px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all .5s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.hrhm-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 108, 250, 0.3);
  color: white;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .hrhm-main-title {
    font-size: 2.8rem;
  }
  
  .hrhm-image-collage {
    max-width: 450px;
    height: 550px;
  }
}

@media (max-width: 992px) {
  .hrhm-intro-section {
    padding: 60px 0;
  }
  
  .hrhm-content-section {
    padding-left: 0;
    text-align: center;
    margin-top: 50px;
  }
  
  .hrhm-content-wrapper {
    max-width: 100%;
  }
  
  .hrhm-image-collage {
    max-width: 400px;
    height: 500px;
    margin: 0 auto;
  }
  
  .hrhm-service-tags {
    justify-content: center;
  }
  
  .experience-floating-badge {
    position: relative;
    bottom: auto;
    right: auto;
    margin: 20px auto;
    display: block;
    width: fit-content;
  }
}

@media (max-width: 768px) {
  .hrhm-main-title {
    font-size: 2.5rem;
  }
  
  .hrhm-image-collage {
    max-width: 350px;
    height: 450px;
  }
  
  .hrhm-features-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .hrhm-feature {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 10px;
  }
  
  
  .small-image-1,
  .small-image-2,
  .small-image-3 {
    width: 35%;
    height: 20%;
  }

  .hrhm-description{
    padding: 15px 25px;
  }

  .hrhm-main-title{
    padding: 30px 15px 0px;
  }

  .collage-main-image{
    top: 20px;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .small-image-1 {
    width: 50%;
    height: 40%;
    top: -20x;
    right: -20px;
  }

  .small-image-3{
    width: 40%;
    height: 30%;
    bottom: -20px;
    left: -20px;
  }
}

@media (max-width: 576px) {
  .hrhm-main-title {
    font-size: 2.2rem;
  }
  
  .hrhm-image-collage {
    max-width: 300px;
    height: 400px;
  }
  
  .hrhm-service-tags {
    flex-direction: column;
    align-items: center;
  }
  
  .service-tag-blue {
    width: 100%;
    max-width: 250px;
    text-align: center;
  }
  
  .hrhm-btn-primary {
    width: 100%;
    max-width: 250px;
    justify-content: center;
  }
}





/*HERO DESIGN*/
.home-text{
	padding-left: 50px;
	padding-right: 50px;
}

.hero-feature{
	position: relative
	/* position: relative; */
	/* padding: 30px 15px;atas dan bawah 30px kanan dan kiri 150px */
}

.tourpackages-hero{
  position: relative;
  margin-left: -6.5rem;
  padding-right: 6.5rem;
  margin-top: -3rem;
}

@media (min-width: 768px) and (max-width: 14962px) {
  .tourpackages-hero {
    margin-left: 1rem;
  }
}


.hero-feature img{
	margin-left: 6.5rem;
	border-radius: 15px;
	height: 500px;
	width: 500px;
}

.hero-feature h1{
	color: #00132d;
	font-weight: 650;
	text-transform: uppercase;
	font-size: 50px;
	/* text-align: center; */
	position: relative;
	margin-top: 40px;
	font-family: 'Open sans' sans-serif;
	/* text-shadow: 2px 5px 20px #002F6D; */
}

.hero-feature h3{
	color: white;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 20px;
	background-color: #002F6D;
	padding-left: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	/* text-align: center; */
	position: relative;
}

.hero-feature p{
	font-size: 15px;
	line-height: 1.8em;
	position: relative;
	color: black;
	margin-bottom: 50px;
}

.hero-feature h5{
	margin-bottom: 20px;
	margin-top: 20px;
}

.hero-feature h5 span{	
	letter-spacing: 1px;
	font-weight: 500;
	font-size: 25px;
	color: black;
	position: relative;
	border-bottom: solid 2px black ;
}

.hero-section{
	position: relative;
	text-align: center;
	padding: 10px 15px 50px;/*atas 25px kanan dan kiri 15px bawah 30px*/
}

.img-hero img{
	position: relative;
}

.img-hero p{
	z-index: 10;
	position: absolute;
	margin-left: 13rem;
	margin-top: 1rem;
	font-size: 20px;
  background-color: #002F6D;
  color: white;
  padding: 10px 40px;
  border-radius: 5px;
}

.hero-section h1{
	color: #060606;
	font-family: 'Open sans' sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 35px;
	text-align: center;
	position: relative;	
	
}

.hero-section h2{
	text-transform: uppercase;
	font-size: 25px;
}

.hero-section p{
	font-size: 18px;
	line-height: 1.8em;
	position: relative;
	color: #000000;
	margin-bottom: 30px;
}

.hero-section span{	
	font-style: italic;
	font-size: 25px;
	color: #002b41;
	position: relative;
	text-shadow:none ;
}

.hero-section h4{
	color: #002F6D;
	font-size: 22px;
	font-family: "Allura", cursive;
	font-weight: 500;
	font-style: normal;
	font-size: 45px;
}

.leisurepak-hero{
	margin-top: 5rem;
}


/* ========================== */






/* ======================== */

/* Testimonial Design */
.testimonial-hero {
    position: relative;
    height: 550px;
    color: white;
    overflow: hidden;
    background-image: url('../image/contact-top.jpg');
    background-size: cover;
    background-position: center;
  }

.testimonial-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.6;
    background: linear-gradient(135deg, rgba(0,47,109,0.85) 0%, rgba(0,108,250,0.75) 100%);
    z-index: 1;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.testimonial-hero-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
    margin-top: 2rem;
}

.hero-badge-testi {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 8px 20px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 24px;
    text-transform: uppercase;
    letter-spacing: 2px;
    transform: translateY(20px);
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

.hero-title {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    transform: translateY(20px);
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards 0.2s;
}

.hero-title .highlight {
    position: relative;
}

.hero-title .highlight::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 4px;
    background-color: white;
    border-radius: 2px;
}

.hero-subtitle {
    max-width: 700px;
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 40px;
    opacity: 0.9;
    transform: translateY(20px);
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards 0.4s;
}

.hero-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    transform: translateY(20px);
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards 0.6s;	
}

.stat-item {
    text-align: center;
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	padding: 20px 30px;
	border-radius: 15px;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.stat-value {
    font-size: 42px;
    font-weight: 700;
    line-height: 1;
}

.stat-label {
    margin-top: 8px;
    font-size: 16px;
    opacity: 0.9;
}

.hero-wave {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    z-index: 2;
}

/* Testimonial Container Section
-------------------------------------------- */
.testimonials-container {
    padding: 60px 0 80px;
    background-color: #ffffff;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 20px;
}

.section-header h2 {
    font-size: 32px;
    font-weight: 700;
    color: #002F6D;
    margin: 0;
}

.filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-btn {
    border: none;
    background-color: #f5f7fa;
    color: #555;
    padding: 10px 20px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn.active, 
.filter-btn:hover {
    background-color: #002F6D;
    color: white;
    box-shadow: 0 5px 15px rgba(0, 47, 109, 0.2);
}

/* Testimonial Grid
-------------------------------------------- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.testimonial-card {
    position: relative;
    background-color: white;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

.card-tag {
    position: absolute;
    top: 20px;
    left: 0;
    background: linear-gradient(90deg, #ffb100, #ff8300);
    color: white;
    font-weight: 600;
    font-size: 12px;
    padding: 6px 15px;
    padding-right: 25px;
    border-radius: 0 30px 30px 0;
    z-index: 10;
}

.testimonial-card.featured {
    border: 2px solid #ffb100;
}

.card-header {
    background: linear-gradient(135deg, #002F6D 0%, #006cfa 100%);
    padding: 25px;
    position: relative;
}

.testimonial-card.featured .card-header {
    background: linear-gradient(135deg, #ffb100 0%, #ff8300 100%);
}

.user-info {
    display: flex;
    align-items: center;
}

.avatar-container {
    position: relative;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.flag {
    position: absolute;
    bottom: 0;
    right: 0;
    background: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.user-details {
    padding-left: 15px;
    color: white;
}

.user-name {
    margin: 0 0 5px;
    font-size: 18px;
    font-weight: 600;
}

.review-date {
    font-size: 14px;
    opacity: 0.8;
}

.rating {
    color: #ffc107;
    margin-top: 15px;
    font-size: 15px;
    display: flex;
    gap: 3px;
}

.quote-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.quote-icon i {
    color: white;
    font-size: 20px;
}

.card-body {
    padding: 25px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.review-text {
    font-size: 15px;
    line-height: 1.6;
    color: #444;
    margin-bottom: auto;
    padding-bottom: 20px;
}

.tour-details {
    display: flex;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid #eee;
    margin-top: auto;
}

.tour-icon {
    width: 40px;
    height: 40px;
    background-color: #f0f7ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.tour-icon i {
    color: #006cfa;
    font-size: 18px;
}

.tour-info h5 {
    margin: 0 0 5px;
    font-size: 14px;
    color: #888;
    font-weight: 500;
}

.tour-info p {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #002F6D;
}

/* Pagination
-------------------------------------------- */
.pagination-container {
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.pagination {
    display: flex;
    list-style: none;
    padding: 0;
    gap: 10px;
}

.page-item {
    margin: 0;
    transition: all 0.3s ease;
}

.page-link {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f0f7ff;
    color: #002F6D;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.page-item.active .page-link,
.page-link:hover {
    background-color: #002F6D;
    color: white;
    box-shadow: 0 5px 15px rgba(0, 47, 109, 0.2);
}

.page-item.disabled .page-link {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Form Section
-------------------------------------------- */
.testimonial-form-section {
    background-color: #f8f9fc;
    padding: 80px 0;
    border-radius: 0;
    position: relative;
}

.form-container {
    background-color: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.form-title {
    color: #002F6D;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
    position: relative;
    padding-bottom: 15px;
}

.form-title:after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, #002F6D, #006cfa);
    transform: translateX(-50%);
    border-radius: 2px;
}

.form-group {
    margin-bottom: 20px;
}

.form-control {
    height: 50px;
    border-radius: 10px;
    border: 1px solid #e0e5ed;
    padding: 10px 15px;
    transition: all 0.3s;
}

.form-control:focus {
    border-color: #006cfa;
    box-shadow: 0 0 0 3px rgba(0, 108, 250, 0.1);
}

textarea.form-control {
    height: auto;
    resize: vertical;
}

.rating-selector {
    display: flex;
    gap: 5px;
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
}

.rating-selector i.fas {
    color: #ffb100;
}

.btn-submit {
    background: linear-gradient(to right, #002F6D, #006cfa);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 5px 15px rgba(0, 47, 109, 0.2);
    transition: all 0.3s ease;
}

.btn-submit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 47, 109, 0.3);
}

/* Sidebar
-------------------------------------------- */
.sidebar-container {
    background-color: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    height: 100%;
}

.sidebar-container h4 {
    color: #002F6D;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 12px;
}

.sidebar-container h4:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(to right, #002F6D, #006cfa);
    border-radius: 2px;
}

.tour-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
}

.tour-list li {
    margin-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 15px;
}

.tour-list li:last-child {
    border-bottom: none;
}

.tour-list a {
    display: flex;
    align-items: center;
    color: #444;
    text-decoration: none;
    transition: all 0.3s;
    font-weight: 500;
}

.tour-list a:hover {
    color: #006cfa;
}

.tour-list a i {
    width: 35px;
    height: 35px;
    background-color: #f0f7ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: #006cfa;
    transition: all 0.3s;
}

.tour-list a:hover i {
    background-color: #006cfa;
    color: white;
}

.testimonial-cta {
    background-color: #f0f7ff;
    border-radius: 15px;
    padding: 25px;
    text-align: center;
}

.testimonial-cta h5 {
    color: #002F6D;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
}

.testimonial-cta p {
    color: #555;
    margin-bottom: 20px;
    font-size: 15px;
}

.testimonial-cta img {
    max-width: 180px;
    margin: 0 auto;
}

/* Animations
-------------------------------------------- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Styles
-------------------------------------------- */
@media (max-width: 1199px) {
    .testimonials-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

@media (max-width: 991px) {
    .testimonial-hero {
        height: auto;
        padding: 80px 0 100px;
    }
    
    .hero-title {
        font-size: 40px;
    }
    
    .hero-stats {
        gap: 40px;
    }
    
    .sidebar-container {
        margin-top: 40px;
    }
}

@media (max-width: 767px) {
    .testimonial-hero {
        padding: 60px 0 100px;
    }
    
    .hero-title {
        font-size: 30px;
    }
    
    .hero-subtitle {
        font-size: 16px;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 25px;
    }
    
    .section-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    
    .form-container, 
    .sidebar-container {
        padding: 25px;
    }
    
    .rating-selector {
        font-size: 20px;
    }
}

@media (max-width: 480px) {
    .hero-title {
        font-size: 26px;
    }
    
    .stat-value {
        font-size: 32px;
    }
    
    .filter-container {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 10px;
        margin-right: -15px;
        margin-left: -15px;
        width: calc(100% + 30px);
    }
    
    .filter-btn {
        padding: 8px 16px;
        font-size: 14px;
    }
}


.review-icons-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    padding: 30px 0;
    position: relative;
}

.review-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    position: relative;
    transition: transform 0.3s ease;
}

.review-icon-wrapper:hover {
    transform: translateY(-5px);
}

.review-icon-wrapper.primary {
    background: linear-gradient(135deg, #002F6D, #006cfa);
    z-index: 3;
    width: 80px;
    height: 80px;
}

.review-icon-wrapper.primary i {
    font-size: 35px;
    color: white;
}

.review-icon-wrapper.secondary {
    background: linear-gradient(135deg, #ffb100, #ff8300);
    z-index: 2;
    margin-left: -20px;
}

.review-icon-wrapper.secondary i {
    font-size: 25px;
    color: white;
}

.review-icon-wrapper.tertiary {
    background: linear-gradient(135deg, #ff5c8a, #ff3366);
    z-index: 1;
    margin-left: -20px;
}

.review-icon-wrapper.tertiary i {
    font-size: 25px;
    color: white;
}


/* FAQ Large */
.dv-faq-section {
  padding: 60px 0;
  background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 50%, #f0f7ff 100%);
  position: relative;
  margin-top: 40px;
}

.dv-faq-container {
  max-width: 1000px;
  margin: 0 auto;
}

.dv-faq-header {
  text-align: center;
  margin-bottom: 40px;
}

.dv-faq-title {
  font-size: 38px;
  font-weight: 700;
  color: #002F6D;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.dv-faq-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #006cfa, #00c3ff);
  border-radius: 2px;
}

.dv-faq-subtitle {
  color: #666;
  font-size: 16px;
  max-width: 700px;
  margin: 0 auto;
}

.dv-faq-item {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: none;
}

.dv-faq-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.dv-faq-button {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 20px 25px;
  background-color: #fff;
  border: none;
  text-align: left;
  color: #002F6D;
  font-weight: 600;
  font-size: 20px;
  transition: all 0.3s ease;
}

.dv-faq-button:not(.collapsed) {
  background-color: #f0f7ff;
  color: #006cfa;
}

.dv-faq-button:focus {
  box-shadow: none;
}

.dv-faq-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  min-width: 36px;
  margin-right: 20px;
  font-size: 24px;
  background-color: #f0f7ff;
  color: #006cfa;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.dv-faq-button:not(.collapsed) .dv-faq-icon {
  background-color: #006cfa;
  color: #fff;
}


.dv-faq-button::after {
  content: '+';
  position: absolute;
  right: 25px;
  font-size: 28px;
  color: #006cfa;
  transition: all 0.3s ease;
}

.dv-faq-button:not(.collapsed)::after {
  content: '−';
}

.dv-faq-body {
  padding: 5px 25px 25px 76px;
  font-size: 18px;
  line-height: 1.6;
  border-top: 1px solid rgba(0, 47, 109, 0.08);
}

.dv-faq-body a {
  color: #006cfa;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
}

.dv-faq-body a:hover {
  color: #002F6D;
  text-decoration: underline;
}

.dv-faq-footer {
  text-align: center;
  margin-top: 30px;
}

.dv-contact-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 25px;
  background-color: #002F6D;
  color: white;
  text-decoration: none;
  font-weight: 600;
  border-radius: 30px;
  transition: all 0.3s ease;
  border: 2px solid #002F6D;
}

.dv-contact-btn:hover {
  background-color: transparent;
  color: #002F6D;
}

.dv-contact-btn i {
  margin-right: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .dv-faq-title {
    font-size: 32px;
  }
  
  .dv-faq-button {
    font-size: 16px;
    padding: 18px 20px;
  }
  
  .dv-faq-body {
    padding: 5px 20px 20px 65px;
    font-size: 16px;
  }

  .dv-faq-icon i {
    font-size: 15px;
  }
}

@media (max-width: 576px) {
  .dv-faq-section {
    padding: 40px 0;
  }
  
  .dv-faq-title {
    font-size: 26px;
  }
  
  .dv-faq-button {
    padding: 15px 40px 15px 15px;
  }
  
  .dv-faq-body {
    padding: 5px 15px 20px 15px;
  }
  
  .dv-faq-icon {
    width: 28px;
    height: 28px;
    min-width: 28px;
    margin-right: 10px;
  }
}

/* Faq Horizontal alignment */
/* Horizontal FAQ Layout */
.dv-faq-horizontal {
  display: flex;
  flex-direction: row;
  gap: 40px;
}

.dv-faq-left {
  flex-basis: 35%;
}

.dv-faq-right {
  flex-basis: 65%;
}

.dv-faq-left-sticky {
  position: sticky;
  top: 120px;
}

.dv-faq-horizontal .dv-faq-title {
  text-align: left;
  margin-bottom: 25px;
}

.dv-faq-horizontal .dv-faq-title::after {
  margin: 0;
  left: 0;
  transform: none;
  width: 80%;
}

.dv-faq-horizontal .dv-faq-subtitle {
  text-align: left;
  margin: 0 0 30px 0;
}

.dv-faq-contact-info {
  margin-top: 40px;
  padding: 25px;
  background-color: #f0f7ff;
  border-radius: 12px;
  border-left: 4px solid #006cfa;
}

.dv-faq-contact-info h4 {
  color: #002F6D;
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 15px;
}

.dv-faq-contact-info p {
  color: #666;
  font-size: 15px;
  margin-bottom: 20px;
}

.dv-contact-option {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.dv-contact-option i {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #006cfa;
  margin-right: 15px;
  box-shadow: 0 3px 10px rgba(0, 108, 250, 0.1);
}

.dv-contact-option strong {
  font-weight: 600;
  color: #002F6D;
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .dv-faq-horizontal {
    flex-direction: column;
  }
  
  .dv-faq-left, .dv-faq-right {
    flex-basis: 100%;
  }
  
  .dv-faq-left-sticky {
    position: relative;
    top: 0;
    margin-bottom: 40px;
  }
  
  .dv-faq-horizontal .dv-faq-title::after {
    width: 100%;
  }
}






/* About us temporary */

/* General Styles */
.section-heading {
    margin-bottom: 50px;
}

.section-heading .subtitle {
    color: #006cfa;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
    display: block;
}

.section-heading h2 {
    color: #002F6D;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

.lead {
    font-size: 18px;
    color: #555;
    max-width: 700px;
}

.min-vh-80 {
    min-height: 50vh;
}

.text-gradient {
    background: linear-gradient(to right, #ffff,rgb(83, 158, 255));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
}

/* Hero Section */
.about-hero {
    position: relative;
    padding: 70px 0 120px;
    background-image: url('../image/activites.jpg');
    background-size: cover;
    background-position: center;
    color: white;
    overflow: hidden;
    height: 670px;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,47,109,0.85) 0%, rgba(0,108,250,0.75) 100%);
    z-index: 1;
}

.about-hero .container {
    position: relative;
    z-index: 2;
}

.hero-badge-about {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-hero-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.about-hero-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 30px;
    max-width: 600px;
}

.about-credentials {
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.credential-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    padding: 12px 20px;
    border-radius: 10px;
}

.credential-item i {
    font-size: 24px;
    color: #fff;
}

.credential-item p {
    margin: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
}

.credential-item small {
    opacity: 0.8;
}

.floating-image-group {
    position: relative;
    height: 500px;
}

.main-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    z-index: 3;
}

.accent-image {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 10px;
    object-fit: cover;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.accent-top {
    top: 0;
    left: 20%;
    animation: float 3s ease-in-out infinite;
}

.accent-right {
    right: 0;
    top: 40%;
    animation: float 3.5s ease-in-out infinite;
}

.accent-bottom {
    bottom: 10%;
    left: 30%;
    animation: float 4s ease-in-out infinite;
}

.hero-wave {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    z-index: 3;
}

/* Our Story Section */
.story-timeline {
    position: relative;
    padding-left: 30px;
    border-left: 2px solid #e0e5ef;
    margin-top: 30px;
    margin-left: 30px;
}

.timeline-item {
    position: relative;
    margin-bottom: 40px;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-marker {
    position: absolute;
    left: -60px;
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #002F6D, #006cfa);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 0 0 5px #fff;
    z-index: 2;
}

.timeline-content h4 {
    color: #002F6D;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.timeline-content p {
    color: #666;
    margin-bottom: 0;
}

.quote-box {
    background-color: #f8f9fb;
    padding: 25px;
    border-radius: 15px;
    position: relative;
}

.quote-box i {
    color: #006cfa;
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

.quote-box p {
    font-size: 18px;
    font-style: italic;
    color: #002F6D;
    font-weight: 500;
    margin-bottom: 0;
}

.signature-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}

.signature-img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

.signature-box h5 {
    margin-bottom: 0;
    font-weight: 600;
}

.signature-box p {
    margin-bottom: 0;
    font-size: 14px;
    opacity: 0.7;
}

/* Values Section */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

.value-card {
    background-color: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    height: 100%;
}

.value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.value-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(to bottom, #002F6D, #006cfa);
    border-radius: 3px;
}

.icon-box {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(0, 47, 109, 0.1), rgba(0, 108, 250, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.icon-box i {
    font-size: 30px;
    color: #006cfa;
}

.value-card h3 {
    color: #002F6D;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.value-card p {
    color: #666;
    margin-bottom: 0;
}

/* Stats Section */
.stats-section {
    background-color: #f8f9fb;
}

.stats-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.stats-box {
    background-color: #fff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.stats-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.counter-wrapper {
    font-size: 48px;
    font-weight: 700;
    color: #002F6D;
    line-height: 1;
    margin-bottom: 10px;
}

.stats-box h4 {
    color: #006cfa;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
}

.stats-box p {
    color: #666;
    margin-bottom: 0;
    font-size: 14px;
}

.badge-blue {
    background-color: rgba(0, 108, 250, 0.1);
    color: #006cfa;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 15px;
    border-radius: 30px;
    display: inline-block;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.section-title {
    font-size: 36px;
    font-weight: 700;
    color: #002F6D;
    margin-bottom: 15px;
}

.section-subtitle {
    color: #666;
    max-width: 700px;
    margin: 0 auto 40px;
}

.team-section {
    background-color: #f8f9fb;
    padding: 80px 0;
}

.team-card {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    height: 100%;
    transition: all 0.3s ease;
}

.team-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.team-img {
    position: relative;
    overflow: hidden;
    height: 280px;
}

.team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.team-card:hover .team-img img {
    transform: scale(1.05);
}

.team-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 47, 109, 0.9), rgba(0, 108, 250, 0.7));
    padding: 20px;
    color: white;
    transform: translateY(100%);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.team-card:hover .team-overlay {
    transform: translateY(0);
}

.team-overlay p {
    font-style: italic;
    margin-bottom: 20px;
    font-size: 14px;
}

.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: white;
    transition: all 0.2s ease;
}

.social-links a:hover {
    background-color: white;
    color: #006cfa;
}

.team-info {
    padding: 20px;
    text-align: center;
}

.team-info h4 {
    font-size: 20px;
    font-weight: 600;
    color: #002F6D;
    margin-bottom: 5px;
}

.team-info p {
    color: #006cfa;
    margin: 0;
    font-weight: 500;
}

/* Gallery Section */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 200px;
    gap: 20px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    cursor: pointer;
}

.item-tall {
    grid-row: span 2;
}

.item-wide {
    grid-column: span 2;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.1);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 100%);
    color: #fff;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.gallery-item:hover .gallery-caption {
    opacity: 1;
    transform: translateY(0);
}

.gallery-caption h5 {
    margin-bottom: 0;
    font-weight: 600;
}

/* CTA Section */
.cta-section {
    background-color: #f8f9fb;
}

.cta-box {
    background: linear-gradient(135deg, #002F6D, #006cfa);
    border-radius: 15px;
    padding: 50px;
    text-align: center;
    color: #fff;
}

.cta-box h2 {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 15px;
}

.cta-box p {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.btn-primary {
    background-color: #fff;
    color: #002F6D;
    border: 2px solid #fff;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: transparent;
    color: #fff;
}

.btn-outline {
    background-color: transparent;
    color: #fff;
    border: 2px solid #fff;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-outline:hover {
    background-color: #fff;
    color: #002F6D;
}

/* Animations */
@keyframes float {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Responsive adjustments */
@media (max-width: 991px) {
    .about-hero-title {
        font-size: 36px;
    }
    
    .floating-image-group {
        margin-top: 50px;
        height: 400px;
    }
    
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cta-box {
        padding: 40px 20px;
    }
    
    .cta-buttons {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 767px) {
    .about-hero-title {
        font-size: 30px;
    }
    
    .about-credentials {
        flex-direction: column;
        gap: 10px;
    }
    
    .floating-image-group {
        display: none;
    }
    
    .gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .item-tall, .item-wide {
        grid-column: auto;
        grid-row: auto;
    }
    
    .value-card::before {
        width: 100%;
        height: 5px;
    }
}



/* Contact Us */
:root {
    --primary-color: #002F6D;
    --accent-color: #006cfa;
    --light-accent: #e7f1ff;
    --dark-text: #333333;
    --light-text: #6c757d;
    --white: #ffffff;
    --section-padding: 80px 0;
    --border-radius: 12px;
    --box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    --transition: all 0.3s ease;
}


.section-badge {
    display: inline-block;
    background-color: var(--light-accent);
    color: var(--accent-color);
    font-weight: 600;
    font-size: 14px;
    padding: 6px 15px;
    border-radius: 30px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

.text-accent {
    color: var(--accent-color);
}

/* Contact Hero Section */
.contact-hero {
    position: relative;
    padding: 120px 0 150px;
    background-image: url('../image/contact-top.jpg');
    background-size: cover;
    background-position: center;
    color: var(--white);
    overflow: hidden;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.6;
    background: linear-gradient(135deg, rgba(0,47,109,0.9) 0%, rgba(0,108,250,0.85) 100%);
    z-index: 1;
}

.contact-hero .container {
    position: relative;
    z-index: 2;
}

.hero-content {
    max-width: 600px;
}

.hero-badge-contact {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(5px);
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-title {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 30px;
    max-width: 500px;
}

.contact-quick-links {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 450px;
}

.quick-link {
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 12px;
    padding: 16px 20px;
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
}

.quick-link:hover {
    background-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    color: var(--white);
}

.quick-link .icon-container {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
}

.quick-link .icon-container i {
    font-size: 20px;
}

.quick-link.whatsapp .icon-container {
    background-color: rgba(37, 211, 102, 0.2);
}

.quick-link.email .icon-container {
    background-color: rgba(66, 133, 244, 0.2);
}

.quick-link.phone .icon-container {
    background-color: rgba(234, 67, 53, 0.2);
}

.link-content {
    flex-grow: 1;
}

.link-content h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 3px;
}

.link-content p {
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
}

.arrow-icon {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.quick-link:hover .arrow-icon {
    transform: translateX(5px);
}

.hero-wave {
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    z-index: 2;
}

/* Contact Methods Section */
.contact-methods {
    padding: var(--section-padding);
}

.contact-card {
    background-color: var(--white);
    border-radius: var(--border-radius);
    padding: 40px 30px;
    height: 100%;
    box-shadow: var(--box-shadow);
    text-align: center;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.contact-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
}

.card-icon {
    width: 80px;
    height: 80px;
    background: var(--light-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.card-icon i {
    font-size: 32px;
    color: var(--primary-color);
}

.contact-card h3 {
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
}

.contact-card p {
    color: var(--light-text);
    margin-bottom: 20px;
}

.contact-card .hours {
    font-size: 14px;
    font-style: italic;
    color: var(--light-text);
}

.btn-link {
    display: inline-flex;
    align-items: center;
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    margin-top: 10px;
}

.btn-link i {
    margin-left: 8px;
    transition: transform 0.3s ease;
}

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

.btn-link:hover i {
    transform: translateX(5px);
}

/* Contact Form Section */
.contact-form-section {
    padding: var(--section-padding);
    background-color: #f8f9fc;
}

.form-content {
    padding-right: 30px;
}

.form-content h2 {
    color: var(--primary-color);
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 20px;
}

.form-content .lead {
    color: var(--light-text);
    margin-bottom: 30px;
}

.travel-categories {
    margin-top: 40px;
    margin-bottom: 40px;
}

.travel-categories h4 {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

.category-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.category-item {
    display: flex;
    align-items: center;
    background-color: var(--white);
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
    transition: var(--transition);
}

.category-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.category-item i {
    color: var(--accent-color);
    margin-right: 10px;
    font-size: 18px;
}

.category-item span {
    color: var(--dark-text);
    font-weight: 500;
}

.testimonial-snippet {
    background-color: var(--white);
    border-radius: var(--border-radius);
    padding: 25px;
    position: relative;
    box-shadow: var(--box-shadow);
}

.quote-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--accent-color);
    font-size: 24px;
    opacity: 0.2;
}

.snippet-content p {
    font-style: italic;
    color: var(--dark-text);
    margin-bottom: 20px;
}

.snippet-author {
    display: flex;
    align-items: center;
}

.snippet-author img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
}

.snippet-author h5 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--primary-color);
}

.snippet-author span {
    color: var(--light-text);
    font-size: 14px;
}

.contact-form-wrapper {
    background-color: var(--white);
    border-radius: var(--border-radius);
    padding: 40px;
    box-shadow: var(--box-shadow);
}

.form-header {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}

.header-icon {
    width: 60px;
    height: 60px;
    background: var(--light-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
}

.header-icon i {
    font-size: 24px;
    color: var(--primary-color);
}

.header-text h4 {
    margin: 0;
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 600;
}

.header-text p {
    margin: 5px 0 0;
    color: var(--light-text);
}

.form-floating > label {
    color: var(--light-text);
}

.form-control:focus, .form-select:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.25rem rgba(0, 108, 250, 0.15);
}

.btn-primary {
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    border: none;
    color: white;
    padding: 12px 25px;
    font-weight: 600;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}

.btn-primary i {
    margin-left: 10px;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 47, 109, 0.3);
}

/* FAQ Section */
.faq-section {
    padding: var(--section-padding);
}

.accordion-item {
    border: none;
    margin-bottom: 15px;
    border-radius: 8px !important;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.accordion-button {
    display: flex;
    align-items: center;
    padding: 20px;
    background-color: var(--white);
    color: var(--primary-color);
    font-weight: 600;
    border: none;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: var(--accent-color);
    background-color: var(--light-accent);
}

.accordion-button::after {
    margin-left: auto;
}

.accordion-button i {
    margin-right: 15px;
    font-size: 20px;
    color: var(--accent-color);
}

.accordion-body {
    padding: 0 20px 20px;
}

.btn-outline-primary {
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: var(--transition);
}

.btn-outline-primary i {
    margin-right: 10px;
    font-size: 18px;
}

.btn-outline-primary:hover {
    background-color: var(--accent-color);
    color: var(--white);
    border-color: var(--accent-color);
}

/* Map Section */
.map-section {
    padding: var(--section-padding);
}

.map-container {
    position: relative;
    height: 450px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.map-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 10;
    max-width: 300px;
}

.map-card {
    background-color: var(--white);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.map-card h3 {
    color: var(--primary-color);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 15px;
}

.map-card p {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    color: var(--light-text);
}

.map-card p i {
    color: var(--accent-color);
    margin-right: 10px;
}

/* Social Media Section */
.social-section {
    padding: var(--section-padding);
    background-color: #f8f9fc;
}

.social-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.social-card {
    position: relative;
    height: 200px;
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition);
}


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


.card-overlay-contact {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
    padding: 20px;
    text-align: center;
}

.card-overlay-contact i {
    font-size: 36px;
    margin-bottom: 10px;
}

.card-overlay-contact span {
    font-weight: 600;
    font-size: 18px;
}

/* Call to Action */
.cta-section {
    padding: 60px 0;
    background-color: var(--primary-color);
    color: var(--white);
}

.cta-section h2 {
    margin: 0;
    font-size: 32px;
    font-weight: 700;
}

.cta-section p {
    margin: 10px 0 0;
    opacity: 0.9;
}

/* Responsive Adjustments */
@media (max-width: 991px) {
    .hero-title {
        font-size: 36px;
    }
    
    .contact-quick-links {
        margin-top: 40px;
    }
    
    .form-content {
        padding-right: 0;
        margin-bottom: 40px;
    }
    
    .social-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .contact-hero {
        padding: 80px 0 150px;
    }
    
    .hero-title {
        font-size: 30px;
    }
    
    .map-overlay {
        position: static;
        max-width: 100%;
        margin-bottom: 20px;
    }
    
    .map-container {
        height: auto;
    }
    
    .map-container iframe {
        position: static;
        height: 300px;
    }
  
    .cta-section .btn-lg {
        width: 100%;
        margin-top: 20px;
    }
}

@media (max-width: 576px) {
    .hero-content {
        text-align: center;
    }
    
    .social-grid {
        grid-template-columns: 1fr;
    }
    
    .category-list {
        justify-content: center;
    }
}



/* Style For Company Value Section */
.value{
	/* margin-bottom: 70px; */
	color: #f1f1f1;
	padding-bottom: 5rem;
	padding-top: 55px;
	background-image: url(../image/contact-top.jpg);
}

.value-leisure{
	margin-top: 50px;
	margin-bottom: 30px;
	color: #f1f1f1;
	padding-bottom: 30px;
}

.value-content{
    align-items: center;
    text-align: center;
}

.value-text{
    text-align: center;
    align-items: center;
    margin-bottom: 30px;
	color: #000;
}

.value-text h2{
    font-size: 60px;
    font-weight: 500;
	font-family: 'Playfair Display', serif;
    margin-bottom: 10px;
	color: #fff;
	align-items: center;
}

.value-content h4{
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    transition: all .50s ease;
    margin-bottom: 10px;
	color: #000;
	align-items: center;
	padding-bottom: 15px;
}

.value-img{
    overflow: hidden;
    margin: 0 auto;
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
    border-radius: 50%;
    cursor: pointer;
	margin-top: 15px;
}

.value-img img{
    display: block;
    transition: transform .5s;
    width: 100%;
}

.value-img img:hover{
    transform: scale(1.04);

}

.value-content h4:hover{
    color: #002F6D;

}

.value-content p{
    font-size: 12px;
	color: #000;
}


/* Photo List Infinite */
.photo-list{
	overflow: hidden;
	padding: 20px 0;	
	white-space: nowrap;
}

.photo-list:hover .wrapper-photo{
	animation-play-state: paused;
}

.wrapper-photo{
	animation: 30s slide infinite linear;
	display: inline-block;
}

.wrapper-photo img{
	margin: 0 6px;
	height: 200px;
}


@keyframes slide {
	from{
		transform: translateX(0);		
	}

	to{
		transform: translateX(-100%);
	}
}


/* Image zoom in card */

figure{
	overflow: hidden;
	margin: 0;
}

.image-card img{
	display: block;
	cursor: pointer;
	width: 100%;
	height: auto;
}

.image-card #zoom-in img{
	transform: scale(1);
	transition: 0.3s ease-in-out;
}

.image-card #zoom-in:hover img{
	transform: scale(1.06);
}

/*Price and Detail Program*/

.price-program p{
	text-align: center;
	font-weight: 700;
}

.price-program a{
	margin-top: 1px;
	margin-left: 170px;
	text-align: center;
}

.price-program-child{
	margin-top: 40px;
}

.price-program-child a{
	margin-left: 130px;
}

.details-program{
	justify-content: center;
	padding-left: 36px;
}

.details-program p span{
	font-style: italic;
}

.details-program h3{
	font-size: 23px;
	font-weight: 600;
}

.btn-detail-program{
		margin-top: 8px;
		border: none;
		background: #002F6D;
		color: #fff;
		font-size: 20px;
		line-height: 32px;
		padding: 20px 45px;
		text-decoration: none;
		transition: .5s ease;
		display: inline-block;
		cursor: pointer;
		outline: none;
		font-weight: 800;
		text-transform: uppercase;
}

.btn-detail-program:hover {
	color: #fff;
	background: #0051bb;
}



/* Timeline Itinerary */
.itinerary-timeline-section{
  background: url('../image/background-light.jpg') no-repeat center center/cover;
}

.tour-timeline {
    padding: 20px 60px 60px 40px;
}

@media (max-width: 768px) {
    .tour-timeline {
        padding: 20px 20px 40px;
    }
}


.timeline-heading h5{
	font-size: 45px;
	text-transform: uppercase;
	font-weight: 800;
	color: #002f6d;
  padding-bottom: 20px;
}

.timeline-heading h5 span{
  border-bottom: 5px solid #20bfeb;
}

.timeline-heading p{
	font-size: 16px;
}

.timeline-image img{	
	width: 450px;
	height: 450px;
	margin-left: 40px;
}

.timeline{
	border-left: 1px dashed hsl(193deg, 84%, 52%);
	margin-left: 20px;
	margin-bottom: 30px;
}



.timeline .timeline-box{
	padding-left: 40px;
	margin-bottom: 30px;
	position: relative;
}

.timeline-content-wrap{
  background-color: rgba(119, 144, 255, 0.15);
  position: relative;
  border-radius: 10px;
  padding: 20px;
  border: 2px solid rgba(119, 194, 255, 0.86);
}

.timeline-content{
  color: #fff;
  margin-left: 10px;
}

.timeline-icon{
	left: -18px;
	top: 20px;
	background-color: #20bfeb;
	position: absolute;
	width: 35px;
	z-index: 1;
	text-align: center;
	line-height: 35px;
}

.timeline-icon i{
	color: #fff;
}

.timeline .timeline-icon:after{
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	background-color: #16e7dd;
	opacity: 0.5;
	z-index: -1;
	right: 0;
	bottom: 0;
}

@media (max-width: 500px) {
  .timeline{
    border-left: none;
    margin-left: 0;
  }

  .timeline-icon{
    display: none;
  }

  .timeline .timeline-box{
    padding-left: 0;
    margin-bottom: 20px;
}

.tourdetail-heading h3{
  font-size: 30px;
  }

}

/* timeline section */

/* CTA Section */
.ttimel-cta {
  text-align: center;
  margin-top: 60px;
  padding: 50px;
  background: linear-gradient(135deg, rgba(0, 47, 109, 0.05), rgba(0, 108, 250, 0.05));
  border-radius: 25px;
  border: 2px solid rgba(0, 108, 250, 0.1);
  position: relative;
  overflow: hidden;
}

.ttimel-cta::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(0, 108, 250, 0.03) 0%, transparent 70%);
  animation: ttimelRotate 20s linear infinite;
}

.ttimel-cta-content {
  position: relative;
  z-index: 2;
}

.ttimel-cta-title {
  font-size: 32px;
  font-weight: 800;
  color: #002F6D;
  margin-bottom: 15px;
}

.ttimel-cta-subtitle {
  color: #64748b;
  font-size: 18px;
  margin-bottom: 30px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.ttimel-btn-primary {
  background: linear-gradient(135deg, #002F6D, #006cfa);
  color: white;
  padding: 18px 40px;
  border-radius: 30px;
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.ttimel-btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s;
}

.ttimel-btn-primary:hover::before {
  left: 100%;
}

.ttimel-btn-primary:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 15px 40px rgba(0, 47, 109, 0.4);
  color: white;
}

/* Animations */

@keyframes ttimelRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Responsive Design */
@media (max-width: 1200px) {
  .ttimel-title {
    font-size: 42px;
  }
  
  .ttimel-content {
    padding: 35px;
  }
}

@media (max-width: 992px) {
  .ttimel-section {
    padding: 60px 0;
  }
  
  .ttimel-container::before {
    left: 40px;
  }
  
  .ttimel-item:nth-child(odd) .ttimel-content,
  .ttimel-item:nth-child(even) .ttimel-content {
    width: calc(100% - 120px);
    margin-left: 120px;
    margin-right: 0;
    text-align: left;
  }
  
  .ttimel-item:nth-child(odd) .ttimel-content::before {
    display: none;
  }
  
  .ttimel-item:nth-child(even) .ttimel-content::before {
    top: 50px;
    left: -20px;
    border-right: 20px solid white;
    border-left: none;
  }
  
  .ttimel-icon {
    left: 40px;
    transform: translateX(-50%);
  }
  
  .ttimel-item:nth-child(odd) .ttimel-day,
  .ttimel-item:nth-child(odd) .ttimel-highlights {
    justify-content: flex-start;
  }
  
  .ttimel-item:nth-child(odd) .ttimel-item-title::after {
    right: auto;
    left: 0;
  }
}

@media (max-width: 768px) {
  .ttimel-title {
    font-size: 36px;
  }
  
  .ttimel-content {
    padding: 25px;
    width: calc(100% - 100px);
    margin-left: 100px;
  }
  
  .ttimel-item-title {
    font-size: 24px;
  }
  
  .ttimel-icon {
    width: 60px;
    height: 60px;
    font-size: 24px;
    left: 30px;
  }
  
  .ttimel-container::before {
    left: 30px;
  }
  
  .ttimel-info {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ttimel-cta {
    padding: 35px 20px;
  }
  
  .ttimel-cta-title {
    font-size: 28px;
  }
}

@media (max-width: 576px) {
  .ttimel-section {
    padding: 40px 0;
  }
  
  .ttimel-title {
    font-size: 30px;
  }
  
  .ttimel-content {
    width: calc(100% - 80px);
    margin-left: 80px;
    padding: 20px;
  }
  
  .ttimel-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
    left: 25px;
  }
  
  .ttimel-container::before {
    left: 25px;
    width: 4px;
  }
  
  .ttimel-highlights {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .ttimel-info {
    grid-template-columns: 1fr;
  }
  
  .ttimel-item-title {
    font-size: 20px;
  }
  
  .ttimel-description {
    font-size: 14px;
  }
  
  .ttimel-cta-title {
    font-size: 24px;
  }
  
  .ttimel-btn-primary {
    padding: 15px 30px;
    font-size: 14px;
  }
}


/*FEATURE DESIGN*/
.feature-desc{
	width:700px;
	position: absolute;
	top:100px;
	left:50px;
	padding: 10px;
	display: none;
}

.feature-desc h1{
	text-transform: uppercase;
	font-weight: 800;
	text-align: center;
	font-size: 50px;
	color:#FFFFFF;
	text-shadow: 1px 1px 2px #6a6a6a;
	margin-bottom: 15px;
}

.feature-desc h2{
	text-transform: uppercase;
	font-weight: 800;
	color:#ffff;
	text-shadow: 2px 2px 5px #000000;
	margin-bottom: 15px;
	font-size: 50px;
}

.feature-desc h4{
	color: #fff;
	font-style:italic ;
}

.feature-desc p{
	color:#fff;
	font-size: 18px;
	text-shadow: 1px 1px 5px #000000;
	margin-bottom: 13px;
}

.feature-desc small{
	color: #fff;
	margin-right: 25px;
	font-size: 18px;
	text-shadow: 1px 1px 2px #0000;
	padding-bottom: 20px;
}

.feature-desc small span{
	color: #ffffff;
	background-color: #002f6d;
	border-radius: 10px;
	padding-right: 10px;
	padding-left: 10px;
}


.feature-desc-testimonial{
	width:600px;
	position: absolute;
	top:50px;
	left:300px;
	padding: 10px;
	display: block;
}

.feature-desc-testimonial h1{
	text-transform: uppercase;
	text-align: center;
	font-family: "Arial Black";
	font-size: 50px;
	color:#FFFFFF;
	text-shadow: 1px 1px 2px #6a6a6a;
	margin-bottom: 10px;
	padding-left: 50px;
}

.feature-desc-testimonial h2{
	text-transform: uppercase;
	font-family: "Arial Black";
	color:#039AEE;
	text-shadow: 1px 1px 2px #6a6a6a;
	margin-bottom: 15px;
}
.feature-desc-testimonial p{
	text-align: center;
	color:#fff;
	font-size: 18px;
	text-shadow: 1px 1px 2px #6a6a6a;
	margin-bottom: 20px;
	padding-left: 50px;
}

.feature{
	padding-left: 95px;
	position: relative;
	margin-top: 30px;
	margin-bottom: 10x;
}

.feature img{
	width: 90px;
	height: 90px;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
}

.feature h3{
	color: white;
	font-weight: bolder;
	font-size: 20px;
	text-align: left;
	padding-left: 30px;
}

.feature a{
	text-decoration: none;
	color: white;
	font-weight: 800;
}

.feature p{
	text-align: left;
	margin-left: 30px;
	font-size: 15px;
}

/* Title Container Styling */
		.title-container {
		padding: 60px 0 40px;
		background-color: #e9ecef;
		position: relative;
		}

		.title-container .container {
		/* max-width: 1200px; */
		}

		/* Title Left Section */
		.title-left {
			position: relative;
			margin-left: -1rem;
		}

		.title-overline {
		display: inline-block;
		color: #40A9FF;
		font-size: 14px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 1px;
		margin-bottom: 8px;
		margin-left: 2rem;
		position: relative;
		}

		.title-overline::before {
		content: '';
		position: absolute;
		left: -30px;
		top: 50%;
		transform: translateY(-50%);
		width: 20px;
		height: 2px;
		background-color: #40A9FF;
		}

		.title-main {
		font-size: 42px;
		font-weight: 700;
		color: #1a1a1a;
		margin: 0;
		line-height: 1.2;
		}

		.title-italic {
		font-style: italic;
		color: #666;
		font-weight: 400;
		}

		/* Title Right Section - Button */
		.title-right {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		}

		.btn-visit-all {
		display: inline-flex;
		align-items: center;
		background: linear-gradient(135deg, #40A9FF, #1890FF);
		color: white;
		text-decoration: none;
		padding: 14px 20px;
		border-radius: 50px;
		font-weight: 600;
		font-size: 16px;
		transition: all 0.3s ease;
		box-shadow: 0 4px 15px rgba(64, 169, 255, 0.3);
		position: relative;
		overflow: hidden;
		}

		.btn-visit-all::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: all 0.6s;
		}

		.btn-visit-all:hover::before {
		left: 100%;
		}

		.btn-visit-all:hover {
		transform: translateY(-2px);
		box-shadow: 0 8px 25px rgba(64, 169, 255, 0.4);
		color: white;
		}

		.btn-visit-all span {
		margin-right: 10px;
		}

		.btn-arrow {
		width: 32px;
		height: 32px;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		}

		.btn-visit-all:hover .btn-arrow {
		background-color: rgba(255, 255, 255, 0.3);
		transform: translateX(3px);
		}

		.btn-arrow i {
		font-size: 16px;
		color: white;
		}

		/* Responsive Design */
		@media (max-width: 991px) {
		.title-container {
			padding: 50px 0 30px;
		}
		
		.title-main {
			font-size: 36px;
		}
		
		.title-right {
			justify-content: flex-start;
			margin-top: 20px;
		}
		}

		@media (max-width: 768px) {
		.title-container {
			padding: 40px 0 25px;
		}
		
		.title-main {
			font-size: 32px;
		}
		
		.title-overline::before {
			left: -25px;
			width: 15px;
		}
		
		.btn-visit-all {
			padding: 12px 18px;
			font-size: 15px;
		}
		
		.btn-arrow {
			width: 28px;
			height: 28px;
		}
		}

		@media (max-width: 576px) {
		.title-main {
			font-size: 28px;
		}
		
		.title-overline {
			font-size: 13px;
		}
		
		.title-overline::before {
			left: -20px;
			width: 12px;
		}
		
		.btn-visit-all {
			width: 100%;
			justify-content: center;
			margin-top: 15px;
		}
		}

    @media (max-width: 480px) {
        .title-container {
            padding: 30px 0 20px;
        }
        
        .title-main {
            font-size: 24px;
        }
        
        .title-overline {
            font-size: 12px;
        }
        
        .btn-visit-all {
            padding: 10px 15px;
            font-size: 14px;
        }
        
        .btn-arrow {
            width: 24px;
            height: 24px;
        }
    }

/*TOUR PACKAGES (TEMPORARY) */
/* Style For Tour Section 
-------------------------- */
.tour{
	padding-bottom: 100px;
	width: 100%;
}
.tour-text{
    text-align: center;
}

.tour-text h2{
    font-size: 40px;
    font-weight: 800;  
	color: #000;
}

.tour-content{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px,auto));
    align-items: center;
    gap: 30px;
}

.box{
    position: relative;
}

.box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    filter: brightness(70%);
    transition: all .3s cubic-bezier(.499,.05,.55,.95);
    will-change: filter;
    display: block;
}

.box h6{
    position: absolute;
    left: 25px;
    bottom: 155px;
    font-size: 15px;
    font-weight: 500;
	color: #fff;
}

.box h4{
    position: absolute;
    left: 25px;
    bottom: 110px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    border: solid 2px #fff;
    padding: 5px 20px;
    border-radius: 15px;
    /* width: 70%; */
    /* margin-left: -20px; */
}

.box p{
	position: absolute;
	font-size: 12px;
    left: 25px;
    bottom: 35px;
	color: #fff;
	margin-right: 5rem;
	font-weight: 200;
}

.box img:hover{
    filter: brightness(70%) hue-rotate(60deg);
    cursor: pointer;
}

@media screen and (max-width: 768px){
	.tour-content{
		gap: 25px;
	}
	
	.box h6{
		font-size: 10px;
		left: 8px;
		bottom: 130px;
	}
	.box h4{
		font-size: 14px;
		left: 8px;
		bottom: 88px;
	}
	.box p{
		font-size: 7px;
		left: 8px;
	}
}

.center-btn{
    text-align: center;
    margin-top: 2rem;
	  margin-bottom: 50px;
}

.btn-package{
    display: inline-block;
    padding: 13px 40px;
    background: #002F6D;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    transition: all .50s ease;
    cursor: pointer;
    border: 2px solid transparent;
	text-decoration: none;
}

.btn-package:hover{
    border: 2px solid #000;
    background: transparent;
    color: #000;
}

.btn-package-small{
    display: inline-block;
    padding: 13px 40px;
    background: #002F6D;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    transition: all .50s ease;
    cursor: pointer;
    border: 2px solid transparent;
	text-decoration: none;
}

.btn-package-small:hover{
    border: 2px solid #000;
    background: transparent;
    color: #000;
}

/*TITLE INFO*/
.title-info{
	border-bottom: solid 1px #cecece;
	padding-bottom: 12px;
	margin-bottom: 30px;
	padding-right: 0px;
	font-size: 35px;
	padding-top: 20px;
	text-transform: uppercase;
	text-align: center;
	font-weight: 610;
}

.title-info span{
	border-bottom: solid 4px rgb(0, 90, 207);
	padding-bottom: 13px;
	align-items: center;
}

/* Place Visit */
.place-visit-parent h4{
	text-align: center;
	margin-bottom: 25px;
	text-transform: uppercase;
	font-weight: 700;
}

.place-visit img{
	border-radius: 30px;
	transition: all .3s ease;
}

.place-visit img:hover{
	transform: scale(1.03);
	filter: hue-rotate(50deg);
	cursor: pointer;
}

/*LEISURE DESIGN*/

.leisure{
	background-color: #e9ecef;
	padding-bottom: 20px;
	width: 100%;
	margin-left: 0;
	padding-right: 0;
}

/* Leisure Banner Section */
.leisure-bnr {
    position: relative;
    height: 590px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #002F6D;
}

.leisure-bnr-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Background Image */
.leisure-bnr-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.leisure-bnr-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
}

.leisure-bnr-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba(0, 47, 109, 0.8) 0%,
        rgba(0, 108, 250, 0.6) 50%,
        rgba(0, 47, 109, 0.8) 100%
    );
    opacity: 0.5;
}

/* Content */
.leisure-bnr-content {
    position: relative;
    z-index: 3;
    text-align: center;
    color: white;
    max-width: 800px;
    padding: 0 20px;
    margin-top: 50px;
}

.leisure-bnr-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    padding: 8px 20px;
    border-radius: 50px;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.leisure-bnr-badge i {
    margin-right: 8px;
    color: #00c3ff;
}

.leisure-bnr-title {
    font-size: 50px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.leisure-bnr-title .highlight {
    color: #00c3ff;
    position: relative;
}

.leisure-bnr-title .highlight::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #00c3ff;
    border-radius: 2px;
}

.leisure-bnr-subtitle {
    font-size: 17px;
    line-height: 1.6;
    margin-bottom: 30px;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Features */
.leisure-bnr-features {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.feature-item-bnr {
    display: flex;
    align-items: center;
    background: #ffffff;
    backdrop-filter: blur(10px);
    padding: 12px 20px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
    color: #002F6D;
}

.feature-item-bnr:hover {
    transform: translateY(-2px);
}

.feature-item-bnr i {
    margin-right: 8px;
    color: #00c3ff;
    font-size: 16px;
}



/* CTA Buttons */
.leisure-bnr-cta {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 60px;
    flex-wrap: wrap;
}

.leisure-bnr-btn {
    display: inline-flex;
    align-items: center;
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.leisure-bnr-btn i {
    margin-right: 8px;
}

.leisure-bnr-btn.primary {
    background: linear-gradient(135deg, #00c3ff, #006cfa);
    color: white;
    box-shadow: 0 8px 25px rgba(0, 195, 255, 0.3);
}

.leisure-bnr-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 195, 255, 0.4);
    color: white;
}

.leisure-bnr-btn.secondary {
    background: transparent;
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
}

.leisure-bnr-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
    transform: translateY(-3px);
    color: white;
}

/* Stats */
.leisure-bnr-stats {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 60px;
    z-index: 3;
}

.stat-item {
    text-align: center;
    color: white;
}

.stat-number {
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 5px;
    color: #00c3ff;
}

.stat-label {
    font-size: 14px;
    opacity: 0.8;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 992px) {
    .leisure-bnr-title {
        font-size: 42px;
    }
    
    .leisure-bnr-features {
        gap: 15px;
    }
    
    .leisure-bnr-stats {
        gap: 40px;
    }
}

@media (max-width: 768px) {
    .leisure-bnr {
        height: 80vh;
        min-height: 500px;
    }
    
    .leisure-bnr-title {
        font-size: 36px;
    }
    
    .leisure-bnr-subtitle {
        font-size: 16px;
    }
    
    .leisure-bnr-features {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    
    .leisure-bnr-cta {
        flex-direction: column;
        align-items: center;
    }
    
    .leisure-bnr-btn {
        width: 100%;
        max-width: 280px;
        justify-content: center;
    }
    
    .leisure-bnr-stats {
        position: relative;
        bottom: auto;
        left: auto;
        transform: none;
        margin-top: 20px;
        gap: 30px;
    }
    
    .stat-number {
        font-size: 24px;
    }
}

@media (max-width: 576px) {
    .leisure-bnr-title {
        font-size: 40px;
    }

    .leisure-bnr-subtitle{
      font-size: 16px;
      padding: 0 30px;  
    }
    
    .leisure-bnr-features {
        padding: 0 10px;
        display: none;
    }

    .leisure-bnr-btn.secondary{
      display: none;
    }
    
    .feature-item {
        padding: 10px 15px;
        font-size: 14px;
    }
    
    .leisure-bnr-stats {
        flex-direction: column;
        gap: 15px;
    }
}


/* FAQ Design */
.faq-title{
	margin-top: 3rem;
}

.faq-title h6{
	font-size: 15px;
	color: #002F6D;
}

.faq-title h3{
	font-size: 30px;
	font-weight: 560;
}

.faq-title p{
	font-size: 15px;
}

.btn-homewhite{
	background-color: #002F6D;
	border: none;
	color: white;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	border-radius: 50px;
	cursor: pointer;
}

.btn-homewhite:hover{
	background-color: #002F6D;
	color: #ffff;
}	

.arrow {
	display: inline-block;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background-color: #002F6D;
	color: white;
	font-weight: 500;
	font-size: 20px;
	transform: rotate(-20deg);
	text-align: center;
	line-height: 50px;
	margin-left: -6px;
	cursor: pointer;
}



/* Destination homepage */

.card-img-overlay{
	margin-top: 12rem;
}

.card-img-overlay h5{
	font-size: 30px;
	font-weight: 700;
}

.card-img-overlay p{
	font-size: 10px;
}

.carousel-indicators{
	bottom: -3.5rem;
	border-radius: 12px;
	padding: 3px;
}

.carousel-indicators button{
	color: #002F6D;
}


.carousel-control-prev-icon, .carousel-control-next-icon{
	background-color: #00132d;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	margin-top: -31rem;
	background-size: 20px 20px  !important;
}


.carousel-control-prev-icon{
	margin-right: -140rem;
}

.carousel-control-next-icon{
	margin-right: -8rem;
}

.desti{
	padding: 20px 10px 7rem 10px;
}

.destination-title{
	padding-bottom: 20px;
}

.destination-title h4{
	text-transform: uppercase;
	font-size: 15px;
	color: #007CE3;
	word-spacing: 3px;
	letter-spacing: 3px;
}

/* Option Tour Section Styling */
.optour-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 50%, #f0f7ff 100%);
  position: relative;
  overflow: hidden;
}

.optour-section::before {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 108, 250, 0.05) 0%, transparent 70%);
  z-index: 1;
}

.optour-section::after {
  content: '';
  position: absolute;
  bottom: -150px;
  left: -150px;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 47, 109, 0.03) 0%, transparent 70%);
  z-index: 1;
}

/* Section Header */
.optour-header {
  text-align: center;
  margin-bottom: 60px;
  position: relative;
  z-index: 2;
}

.optour-badge {
  display: inline-block;
  background: linear-gradient(135deg, #006cfa, #00c3ff);
  color: white;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
  box-shadow: 0 5px 15px rgba(0, 108, 250, 0.2);
}

.optour-title {
  font-size: 52px;
  font-weight: 800;
  color: #002F6D;
  margin-bottom: 15px;
  position: relative;
}

.optour-title::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -10px;
  width: 80px;
  height: 4px;
  background: linear-gradient(to right, #006cfa, #00c3ff);
  border-radius: 2px;
}

.optour-subtitle {
  font-size: 16px;
  color: #666;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Cards Container */
.optour-cards-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px;
  position: relative;
  z-index: 2;
  margin-bottom: 40px;
}

/* Individual Card */
.optour-card {
  position: relative;
  height: 500px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.optour-card:hover {
  /* transform: scale(1.02); */
  box-shadow: 0 25px 100px rgba(0, 0, 0, 0.2);
}

.optour-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Card Background */
.optour-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.optour-card-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.optour-card:hover .optour-card-bg img {
  transform: scale(1.05);
}

.optour-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    135deg,
    rgba(0, 47, 109, 0.85) 0%,
    rgba(0, 108, 250, 0.75) 50%,
    rgba(0, 195, 255, 0.65) 100%
  );
  transition: all 0.4s ease;
}

.optour-card-packages .optour-card-overlay {
  background: linear-gradient(
    135deg,
    rgba(255, 107, 107, 0.85) 0%,
    rgba(255, 142, 83, 0.75) 50%,
    rgba(255, 193, 7, 0.65) 100%
  );
}

/* Card Content */
.optour-card-content {
  position: relative;
  z-index: 3;
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}

.optour-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20px;
}

.optour-card-hashtag {
  font-size: 14px;
  font-weight: 500;
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.15);
  padding: 5px 12px;
  border-radius: 15px;
  backdrop-filter: blur(5px);
}

.optour-card-icon {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.optour-card-icon i {
  font-size: 24px;
  color: white;
}

.optour-card-body {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}

.optour-card-title {
  font-size: 45px;
  font-weight: 800;
  margin-bottom: 15px;
  letter-spacing: 2px;
  line-height: 1.2;
}

.optour-card-description {
  font-size: 16px;
  line-height: 1.6;
  opacity: 0.9;
  margin-bottom: 25px;
}

/* Card Features */
.optour-card-features {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;
}

.optour-feature-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.15);
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.optour-feature-item i {
  font-size: 14px;
}

/* Card Footer */
.optour-card-footer {
  margin-top: auto;
}

.optour-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 30px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  overflow: hidden;
}

.optour-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s;
}

.optour-btn:hover::before {
  left: 100%;
}

.optour-btn-primary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.optour-btn-primary:hover {
  background: white;
  color: #002F6D;
  border-color: white;
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.3);
}

.optour-btn-secondary {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

.optour-btn-secondary:hover {
  background: white;
  color: #ff6b6b;
  border-color: white;
  box-shadow: 0 10px 20px rgba(255, 255, 255, 0.3);
}

/* Decorative Elements */
.optour-card-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.optour-floating-element {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  animation: optourFloat 6s ease-in-out infinite;
}

.optour-element-1 {
  width: 80px;
  height: 80px;
  top: 20%;
  right: 10%;
  animation-delay: 0s;
}

.optour-element-2 {
  width: 60px;
  height: 60px;
  bottom: 30%;
  left: 15%;
  animation-delay: 2s;
}

.optour-element-3 {
  width: 100px;
  height: 100px;
  top: 15%;
  right: 5%;
  animation-delay: 1s;
}

.optour-element-4 {
  width: 70px;
  height: 70px;
  bottom: 25%;
  left: 10%;
  animation-delay: 3s;
}

/* Additional Info */
.optour-additional-info {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.optour-info-card {
  display: flex;
  align-items: center;
  gap: 15px;
  background: white;
  padding: 20px 30px;
  border-radius: 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 108, 250, 0.1);
}

.optour-info-card i {
  font-size: 24px;
  color: #006cfa;
}

.optour-info-card span {
  color: #555;
  font-size: 16px;
}

.optour-info-card strong {
  color: #002F6D;
  font-weight: 700;
}

/* Animations */
@keyframes optourFloat {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-20px) rotate(180deg);
    opacity: 0.6;
  }
}

/* Responsive Design */
@media (max-width: 992px) {
  .optour-cards-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .optour-card {
    height: 450px;
  }
  
  .optour-title {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .optour-section {
    padding: 60px 0;
  }
  
  .optour-title {
    font-size: 32px;
  }
  
  .optour-card {
    height: 400px;
  }
  
  .optour-card-content {
    padding: 25px;
  }
  
  .optour-card-title {
    font-size: 34px;
  }
  
  .optour-card-description {
    font-size: 15px;
  }
  
  .optour-card-features {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 576px) {
  .optour-header {
    margin-bottom: 40px;
  }
  
  .optour-title {
    font-size: 28px;
  }
  
  .optour-subtitle {
    font-size: 15px;
  }
  
  .optour-card {
    height: 380px;
  }
  
  .optour-card-content {
    padding: 20px;
  }
  
  .optour-card-title {
    font-size: 32px;
  }

  .optour-card-description {
    font-size: 14px;
  }
  
  .optour-btn {
    padding: 10px 25px;
    margin-bottom: 20px;
    font-size: 15px;
  }
  
  .optour-info-card {
    padding: 15px 20px;
    text-align: center;
    flex-direction: column;
    gap: 10px;
  }
  
  .optour-info-card span {
    font-size: 14px;
  }
}

// blablabla



// ...existing code...

/* Top Destinations Slider - Perbaikan UI */
.topdestination-slider-section {
  padding: 60px 0 80px;
  background: linear-gradient(180deg, #fff 0%, #f8f9fb 100%);
  /* background-color: blue; */
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.topdestination-slider-header {
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.topdestination-slider-subtitle {
  display: block;
  color: #007CE3;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.topdestination-slider-title {
  font-size: 40px;
  font-weight: 700;
  color: #002F6D;
  position: relative;
  margin-bottom: 0;
  display: inline-block;
}

.topdestination-slider-title span {
  border-bottom: 4px solid #007CE3;
}

/* Slider Wrapper - Perbaikan untuk Navigation */
.topdestination-slider-wrapper {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
  z-index: 1;
  /* background-color: blue; */
}

.topdestination-slider {
  overflow: visible;
  position: relative;
  z-index: 1;
}

.topdestination-slider-item {
  padding: 0 15px;
  outline: none;
  height: auto;
  padding-bottom: 60px;
}

/* Card Design - Perbaikan Layout */
.topdestination-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  height: 420px;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 20px 0;
}

.topdestination-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Image Container - Fix Aspect Ratio */
.topdestination-card .topdestination-image {
  display: flex;
  position: relative;
  height: 250px;
  padding: 5px 15px;
  overflow: hidden;
  padding-top: 10px;
  padding-bottom: 0;
  border-radius: 8px;
  flex-shrink: 0;
}

.topdestination-image img {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  transition: transform 0.5s ease;
}


/* Location Pin - Perbaikan Positioning */
.location-pin {
  position: absolute;
  top: 20px;
  right: 30px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  font-size: 12px;
  font-weight: 600;
  color: #333;
  z-index: 3;
}

.location-pin i {
  color: #dc3545;
  font-size: 14px;
}

/* Content Container - Fix Height */
.topdestination-content {
  padding: 25px;
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
}

.topdestination-name {
  font-size: 28px;
  font-weight: 700;
  color: #002F6D;
  margin-bottom: px;
  line-height: 1.2;
}

.topdestination-description {
  color: #666;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 15px;
}

/* Button - Perbaikan Styling */
.destination-btn {
  background: linear-gradient(135deg, #dc3545, #c82333);
  color: white;
  padding: 12px 24px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
  transition: all 0.3s ease;
  display: inline-block;
  width: fit-content;
  margin-top: auto;
  align-self: flex-start;
}

.destination-btn:hover {
  background: linear-gradient(135deg, #c82333, #a71e2a);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(220, 53, 69, 0.3);
}

/* Slick Navigation - Perbaikan Positioning */
.topdestination-slider .slick-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 47, 109, 0.9);
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.topdestination-slider .slick-arrow::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0;
  height: 0;
  border-style: solid;
}

.topdestination-slider .slick-prev {
  left: -70px;
}

.topdestination-slider .slick-prev::before {
  border-width: 8px 12px 8px 0;
  border-color: transparent white transparent transparent;
  margin-left: -2px;
}

.topdestination-slider .slick-next {
  right: -70px;
}

.topdestination-slider .slick-next::before {
  border-width: 8px 0 8px 12px;
  border-color: transparent transparent transparent white;
  margin-left: 2px;
}

.topdestination-slider .slick-arrow:hover {
  background: #006cfa;
  transform: translateY(-50%) scale(1.1);
}

/* Slick Dots - Perbaikan */
.topdestination-slider .slick-dots {
  display: flex !important;
  justify-content: center;
  margin-top: -15px;
  padding: 0;
  list-style: none;
  position: relative;
  z-index: 5;
}

.topdestination-slider .slick-dots li {
  margin: 0 5px;
}

.topdestination-slider .slick-dots button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: #ddd;
  font-size: 0;
  transition: all 0.3s ease;
  cursor: pointer;
}

.topdestination-slider .slick-dots .slick-active button {
  background: #002F6D;
  width: 20px;
  border-radius: 6px;
}

/* Slick Track - Fix untuk Layout */
.topdestination-slider .slick-track {
  display: flex;
  align-items: stretch;
  z-index: 1;
}

.topdestination-slider .slick-slide {
  height: auto;
  z-index: 1;
}

.topdestination-slider .slick-slide > div {
  height: 100%;
}

/* Responsive Design - Perbaikan */
@media (max-width: 1200px) {
  .topdestination-slider-wrapper {
    padding: 0 60px;
  }
  
  .topdestination-slider .slick-prev {
    left: -15px;
  }
  
  .topdestination-slider .slick-next {
    right: -15px;
  }
}

@media (max-width: 992px) {
  .topdestination-slider-title {
    font-size: 36px;
  }
  
  .topdestination-card {
    height: 400px;
  }
  
  .destination-name {
    font-size: 22px;
  }
  
  .topdestination-slider-wrapper {
    padding: 0 40px;
  }
  
  .topdestination-slider .slick-arrow {
    width: 45px;
    height: 45px;
  }
}

@media (max-width: 768px) {
  .topdestination-slider-section {
    padding: 60px 0;
  }
  
  .topdestination-slider-title {
    font-size: 32px;
  }
  
  .topdestination-card {
    height: 380px;
  }
  
  .destination-name {
    font-size: 20px;
  }
  
  .topdestination-slider-wrapper {
    padding: 0 20px;
  }
  
  .topdestination-slider .slick-arrow {
    display: none !important;
  }
}

@media (max-width: 576px) {
  .topdestination-slider-section {
    padding: 40px 0;
  }
  
  .topdestination-slider-title {
    font-size: 28px;
  }
  
  .topdestination-card {
    height: 360px;
  }
  
  .destination-name {
    font-size: 18px;
  }
  
  .topdestination-content {
    padding: 20px;
    height: 150px;
  }
  
  .destination-description {
    font-size: 13px;
    -webkit-line-clamp: 2;
  }
}

// ...existing code...



/* Top Destinations Slider */
.topdes-slider-section {
  padding: 45px 0 10rem;
  background: linear-gradient(180deg, #fff 0%, #f8f9fb 100%);
  position: relative;
  overflow: hidden;
}

.topdes-slider-section::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: rgba(0, 47, 109, 0.05);
  z-index: 1;
}

.topdes-slider-section::after {
  content: '';
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: rgba(0, 108, 250, 0.03);
  z-index: 1;
}

.topdes-slider-header {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
}

.topdes-slider-subtitle {
  display: block;
  color: #007CE3;
  font-size: 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}

.topdes-slider-title {
  font-size: 40px;
  font-weight: 700;
  color: #002F6D;
  position: relative;
  margin-bottom: 0;
  display: inline-block;
}

.topdes-slider-title::after {
  content: '';
  position: absolute;
  left: 25%;
  right: 25%;
  bottom: -10px;
  height: 3px;
  background: linear-gradient(to right, rgba(0, 47, 109, 0), rgba(0, 47, 109, 0.8), rgba(0, 47, 109, 0));
}

/* Slider Container */
.topdes-slider-container {
  position: relative;
  overflow: hidden;
  margin: 0 -60px;
  margin-top: -10px;
  z-index: 2;
}

.topdes-slider-track {
  display: flex;
  animation: topdesSlide 35s linear infinite;
  gap: 25px;
  width: calc(200% + 25px);
  padding: 25px 0px;
}

/* Pause animation on hover */
.topdes-slider-container:hover .topdes-slider-track {
  animation-play-state: paused;
}

/* Enhanced Slider Card */
.topdes-slider-card {
  flex: 0 0 320px;
  height: 480px;
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  background: white;
  display: flex;
  flex-direction: column;
}

.topdes-slider-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* Slider Image */
.topdes-slider-image {
  position: relative;
  width: 100%;
  height: 60%;
  overflow: hidden;
}

.topdes-slider-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.topdes-slider-card:hover .topdes-slider-image img {
  transform: scale(1.01);
}

/* Enhanced Badges */
.topdes-slider-badges {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 3;
}

.category-badge {
  background: rgba(0, 47, 109, 0.9);
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Category Badge Colors */
.category-badge.cultural { background: rgba(156, 39, 176, 0.9); }
.category-badge.island { background: rgba(0, 188, 212, 0.9); }
.category-badge.temple { background: rgba(255, 152, 0, 0.9); }
.category-badge.beach { background: rgba(76, 175, 80, 0.9); }
.category-badge.nature { background: rgba(76, 175, 80, 0.9); }
.category-badge.sunset { background: rgba(255, 87, 34, 0.9); }
.category-badge.volcano { background: rgba(244, 67, 54, 0.9); }
.category-badge.lake { background: rgba(33, 150, 243, 0.9); }

.rating-badge {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
}

.rating-badge i {
  color: #FFB100;
  font-size: 12px;
}

.rating-badge span {
  font-weight: 700;
  font-size: 12px;
  color: #333;
}

/* Always Visible Info Section */
.topdes-slider-info {
  padding: 20px;
  background: white;
  height: 40%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.topdes-slider-name {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 8px 0;
  color: #002F6D;
  transition: all 0.3s ease;
}

.topdes-slider-card:hover .topdes-slider-name {
  color: #006cfa;
}

.location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  margin-bottom: 12px;
  color: #666;
}

.location i {
  color: #007CE3;
  font-size: 14px;
}

/* Highlights */
.highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.highlights span {
  background: #f0f7ff;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #002F6D;
  border: 1px solid rgba(0, 108, 250, 0.1);
}

.highlights span i {
  font-size: 10px;
  color: #006cfa;
}

/* Visit Info */
.visit-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  margin-top: auto;
}

.duration,
.popularity {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: #555;
}

.duration i,
.popularity i {
  color: #006cfa;
  font-size: 11px;
}

/* View More Button */
.topdes-slider-view-more {
  text-align: center;
  margin-top: 50px;
  position: relative;
  z-index: 2;
}

.topdes-slider-btn {
  background: linear-gradient(135deg, #002F6D, #007CE3);
  color: white;
  padding: 12px 30px;
  border-radius: 30px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 5px 15px rgba(0, 47, 109, 0.2);
}

.topdes-slider-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 47, 109, 0.3);
  color: white;
}

.topdes-slider-btn i {
  transition: transform 0.3s ease;
}

.topdes-slider-btn:hover i {
  transform: translateX(5px);
}

/* Enhanced Animation */
@keyframes topdesSlide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Gradient Fade Effect */
.topdes-slider-container::before,
.topdes-slider-container::after {
  content: '';
  position: absolute;
  top: 0;
  width: 80px;
  height: 100%;
  z-index: 10;
  pointer-events: none;
}

.topdes-slider-container::before {
  left: -15px;
  background: linear-gradient(to right, #f8f9fb, rgba(248, 249, 251, 0));
}

.topdes-slider-container::after {
  right: -15px;
  background: linear-gradient(to left, #f8f9fb, rgba(248, 249, 251, 0));
}

/* Enhanced Responsive Design */
@media (max-width: 992px) {
  .topdes-slider-title {
    font-size: 36px;
  }
  
  .topdes-slider-card {
    flex: 0 0 280px;
    height: 420px;
  }
  
  .topdes-slider-name {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .topdes-slider-section {
    padding: 60px 0;
  }
  
  .topdes-slider-title {
    font-size: 32px;
  }
  
  .topdes-slider-card {
    flex: 0 0 250px;
    height: 380px;
  }
  
  .topdes-slider-name {
    font-size: 18px;
  }
  
  .topdes-slider-track {
    animation: topdesSlide 25s linear infinite;
  }

  .highlights {
    gap: 4px;
  }

  .highlights span {
    font-size: 10px;
    padding: 3px 6px;
  }

  .visit-info {
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
  }
}

@media (max-width: 576px) {
  .topdes-slider-section {
    padding: 40px 0 150px;
  }
  
  .topdes-slider-title {
    font-size: 28px;
  }
  
  .topdes-slider-card {
    flex: 0 0 220px;
    height: 360px;
  }
  
  .topdes-slider-name {
    font-size: 16px;
  }
  
  .topdes-slider-container {
    margin: 0 -10px;
  }
  
  .topdes-slider-track {
    gap: 15px;
    animation: topdesSlide 20s linear infinite;
  }

  .highlights {
    flex-direction: column;
    gap: 3px;
  }

  .location {
    font-size: 12px;
  }

  .duration,
  .popularity {
    font-size: 10px;
  }

  .topdes-slider-info {
    padding: 15px;
  }
}



/*CARD BODY DESIGN*/
.card{
	transition: .2s ease;
	width: auto;
	height: auto;
}

.card > a > img{
	width: 100%;
	height: 300px;
}

.card:hover{
	box-shadow: 1px 1px 5px gray;
}

.card-body h3{
	border-bottom:solid 1px #6a6a6a;
	padding-bottom:10px;
	margin-bottom: 10px;
	color:#002F6D;
	font-size: 17px;
	font-weight: 700;
}

.card-body h5{
	font-size: 19px;
	font-weight: 600;
}

.card-body h4{
	font-size: 20px;
}

.card-body p{
	font-size: 14px;
	border-bottom: solid 1px #6a6a6a;
	padding-bottom: 9px;
}

.card-body h3 span{
	border-bottom:solid 3px #039AEE;
	padding-bottom: 9px;
}

.card-body a{
	text-decoration: none;
}

.card-price p{
	border-bottom: none;
	font-size: 25px;
	font-weight: 700;
	color: #002F6D;
}

.card-price p span{
	border-bottom: none;
	font-size: 12px;
	color: #000;
}

.card-price-btn{
	padding-top: 50px;
	padding-left: 30px;
}

.card-price-btn a{
	background-color: #002F6D;
	color: #fff;
	padding: 10px 20px;
	border-radius: 30px;
	transition: .3s;
	font-size: 15px;
}

.card-price-btn a:hover{
	border: 1px solid #000;
	background-color: transparent;
	color: #000;
}

.stars{
	color: #ff9600;
	padding-bottom: 5px;
	font-size: 13px;
}


.card-footer p{
	font-size: 15px;
	padding-top: 10px;
	margin-bottom: 10px;
}

.card-footer a{
	text-decoration: none;
	color: #fff;
	transition: .4s ease;
	background-color: #002F6D;
	padding: 10px 20px;
	border-radius: 30px;
}

.card-footer a:hover{
	color: #fff;
	background-color: #002F6D;
}

.box-profile img{
	width: 100%;
	height: auto;
}

.profile-title span{
	font-size: 30px;
	font-family: "Arial Black";
}


/* Footer */
.above-footer-text{
	top: 10%;
	right: 20%;
}

.above-footer-text h3{
	font-size: 10px;
}

.above-footer-text p{
	font-size: 13px;
}

.logo-footer img{
	max-width: 100%;
	margin-top: -10px;
	margin-left: -10px;
}

.servis-footer li{
	font-size: 15px;
}

.servis-kami-footer{
	margin-left: -50px;
}

.servis-kami-footer h3{
	font-size: 20px;
}

.support-footer{
	font-size: 20px;
}

.head-section-footer{
	font-size: 20px;
	color: #006cfa;
}


/*PACKAGE DETAILS*/

.btn-5d{
	width: 150px;
	height: 32px;
	background: transparent;
	border: 1px solid white;
	color: #fff;
	letter-spacing: 1px;
	font-weight: 600;
	transition: .5s ease;
	border-radius: 5px;
	cursor: pointer;	
	text-decoration: none;
	padding: 5px 30px;
}

.btn-5d:hover{
	background-color: #002F6D;
}

.tourdetail-title{
	border-bottom: 1px solid #01163416;
	margin-bottom: 2rem;
}

.tourdetail-title h3{
	font-size: 40px;
	font-weight: 700;
	text-transform: uppercase;
	color: #20bfeb;
}

.tourdetail-photos h3{
	font-size: 40px;
	font-weight: 700;
	text-transform: uppercase;
	color: #20bfeb;
}

.itinerary-foot{
	margin-top: 3.5rem;
	margin-left: 1rem;
	padding-bottom: 1.5rem;
	text-align: center;
}

.itinerary-foot p{
	font-weight: 600;
	margin-bottom: 20px;
	font-size: 20px;
}

.itinerary-foot a{
	text-decoration: none;
	background-color: #002F6D;
	color: rgb(255, 255, 255);
	padding: 10px 20px;
	font-weight: 500;
	border-radius: 5px;
	transition: all .3s ease;
}

.itinerary-foot a:hover{
	background-color: #002F6D;
	color: white;
}

.imgpack-detail{
	transition: all 200ms ease;
}

.parentimgpack{
	overflow: hidden;
	border-radius: 10px;
}

.parentimgpack:hover .imgpack-detail{
	transform: scale(1.03);
	filter: brightness(80%);
}



/*CONTACT DESIGN*/
.contact-info{
	text-align: center;
}

.contact-info a{
	text-decoration: none;
	transition: 1s;
	color: white;
}

.contact-info h3{
	font-family: "Arial Black";
	transition: .9s;
	color: white;
}

.contact-info p{
	transition: .9s;
	color: white;
}


.contact-info a :hover{
	color: #002f6d;
}

.contact-info h4{
	padding-top: 15px;
	font-size: 18px;
	margin-bottom: -10px;
	color: #fff;
	letter-spacing: 4px;
}

.contact-us-item{
		width:700px;
		position: absolute;
		top:120px;
		left:260px;
		padding: 10px;
}

.contact-us-item h1{
	text-transform: uppercase;
	font-weight: 800;
	text-align: center;
	font-size: 50px;
	color:#FFFFFF;
	text-shadow: 1px 1px 2px #6a6a6a;
	margin-bottom: 15px;
	border: 2px solid #fff;
}

.contact-us-item a{
	left: 200px;
}

.detail-contact-item{
	text-align: center;
	align-items: center;
}

.detail-contact-item h3{
	font-size: 20px;
}

.detail-contact-item h4{
	font-size: 15px;
}

.contact-icon{
	overflow: hidden;
    margin: 0 auto;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    cursor: pointer;
	margin-bottom: 10px;
	margin-top: 10px;
}

.contact-icon img{
	display: block;
    width: 100%;
}

.contact-page{
	margin-top: 50px;
	text-align: left;
}

.contact-page h2{
	font-size: 75px;
}

.contact-page p{
	font-size: 17px;
}

.form{
	margin-top: 90px;
	margin-bottom: 30px;
}

.contact-box{
	background-color: #fff;
	height: 100%;
	padding: 50px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}


/*TOUR DESIGN*/
.tour-item{
	background-color: #E7E7E7;
	margin-bottom: 30px;
	text-align: center;
}

.tour-item h3{
	padding: 10px;	
}


.tour-item p{
	padding: 0px 10px 10px 10px;
}

.tour-item a{
	padding: 10px;
	background-color: #6AB3FB;
	color: #F1F1F1;
	text-decoration: none;
	display: inline-block;
	margin: 10px;
	transition: .4s;
	border-radius: 5px; 
}

.tour-item a:hover{
	background-color: #007CE3
}


/* Tour packages page design */
/* Leisure Tour Styling */

/* Hero Container */
.hero-container {
  position: relative;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
  color: #fff;
  margin-bottom: 0;
}

/* Hero Background */
.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(0,30,60,0.9) 0%, rgba(0,30,60,0.6) 50%, rgba(0,30,60,0.4) 100%);
  z-index: 2;
}

.hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero-video-container video,
.hero-fallback-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero Content */
.hero-content-container {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-text-content {
  position: relative;
  padding: 20px 0;
  max-width: 600px;
}

.hero-badge {
  position: absolute;
  top: -30px;
  right: 20px;
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, #006cfa, #00c3ff);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: 0 10px 30px rgba(0,108,250,0.3);
  transform: rotate(10deg);
  z-index: 10;
}

.hero-badge-years {
  font-size: 30px;
  font-weight: 800;
  width: 100%;
  text-align: center;
  line-height: 1;
  margin-top: 12px;
}

.hero-badge-text {
  font-size: 12px;
  line-height: 1.2;
  width: 100%;
  text-align: center;
  font-weight: 500;
}

.hero-tag {
  display: inline-block;
  padding: 8px 16px;
  background-color: rgba(255,255,255,0.15);
  backdrop-filter: blur(5px);
  border-radius: 30px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 20px;
  animation: fadeInUp 1s ease;
}

.hero-title {
  font-size: 56px;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 20px;
  animation: fadeInUp 1s ease 0.2s both;
  position: relative;
}

.hero-and {
  font-style: italic;
  color: #00c3ff;
}

.hero-highlight {
  color: #00c3ff;
  display: inline-block;
  position: relative;
}

.hero-highlight:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 100%;
  height: 10px;
  background-color: rgba(0,195,255,0.2);
  z-index: -1;
}

.hero-description {
  font-size: 17px;
  color: rgba(255,255,255,0.85);
  line-height: 1.7;
  margin-bottom: 30px;
  animation: fadeInUp 1s ease 0.4s both;
}

.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
  animation: fadeInUp 1s ease 0.6s both;
}

.hero-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: rgba(255,255,255,0.1);
  backdrop-filter: blur(5px);
  padding: 10px 15px;
  border-radius: 30px;
  font-size: 14px;
}

.hero-feature-item i {
  font-size: 16px;
  color: #00c3ff;
}

.hero-cta {
  display: flex;
  gap: 15px;
  animation: fadeInUp 1s ease 0.8s both;
}

.btn-primary {
  background: linear-gradient(135deg, #006cfa, #00c3ff);
  color: white;
  border: none;
  padding: 15px 30px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(0,108,250,0.3);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0,108,250,0.4);
  color: white;
}

.btn-outline {
  background-color: transparent;
  color: white;
  border: 2px solid rgba(255,255,255,0.3);
  padding: 14px 30px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s ease;
  text-decoration: none;
}

.btn-outline:hover {
  background-color: rgba(255,255,255,0.1);
  border-color: #fff;
  transform: translateY(-3px);
  color: white;
}

/* Hero Image Showcase */
.hero-image-showcase {
  position: relative;
  padding-left: 20px;
  animation: fadeIn 1.2s ease both;
}

.hero-image-main {
  position: relative;
  margin-bottom: 15px;
}

.hero-image-decoration {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 80%;
  height: 90%;
  border: 4px solid rgba(0,195,255,0.3);
  border-radius: 10px;
  z-index: -1;
}

.hero-image-main img {
  width: 100%;
  height: 450px;
  object-fit: cover;
  border-radius: 10px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  transition: all 0.5s ease;
}

.hero-image-thumbs {
  display: flex;
  gap: 15px;
  justify-content: center;
}

.hero-thumb {
  width: 100px;
  position: relative;
  cursor: pointer;
  border-radius: 8px;
  overflow: hidden;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.hero-thumb.active {
  opacity: 1;
  transform: translateY(-5px);
}

.hero-thumb img {
  width: 100%;
  height: 70px;
  object-fit: cover;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.hero-thumb span {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: white;
  font-size: 12px;
  padding: 15px 0 5px;
  text-align: center;
}

.hero-thumb:hover {
  opacity: 1;
}

/* Shapes and decorations */
.hero-shape-1 {
  position: absolute;
  top: -50px;
  left: -50px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,108,250,0.1), rgba(0,195,255,0.05));
  z-index: 1;
}

.hero-shape-2 {
  position: absolute;
  bottom: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0,108,250,0.1), rgba(0,195,255,0.05));
  z-index: 1;
}

/* Scroll indicator */
.hero-scroll-indicator {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.hero-scroll-indicator:hover {
  opacity: 1;
}

.mouse {
  width: 30px;
  height: 50px;
  border: 2px solid #fff;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  padding-top: 10px;
}

.wheel {
  width: 4px;
  height: 8px;
  background-color: #fff;
  border-radius: 2px;
  animation: scroll 2s infinite;
}

.scroll-arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 10px;
}

.scroll-arrows span {
  display: block;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin: -6px 0;
  animation: scrollArrow 2s infinite;
}

.scroll-arrows span:nth-child(2) {
  animation-delay: 0.2s;
}

.scroll-arrows span:nth-child(3) {
  animation-delay: 0.4s;
}

/* Tour Overview Section */
.tour-overview-section {
  background-color: #f8f9fb;
  padding: 80px 0 60px;
  position: relative;
}

.section-title {
  font-size: 50px;
  font-weight: 900;
  color: #002F6D;
  text-align: center;
  margin-bottom: 40px;
}

.section-title span {
  border-bottom: 3px solid #006cfa;
  padding-bottom: 5px;
}


.section-title-tourpak {
  font-size: 50px;
  font-weight: 900;
  color: #002F6D;
  text-align: center;
  margin-bottom: 40px;
}

.section-title-tourpak span {
  border-bottom: 3px solid #006cfa;
  padding-bottom: 5px;
}


.overview-hook-tourpak {
  text-align: center;
  color: #006cfa;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  position: relative;
  z-index: 1;
}


.overview-text {
  max-width: 900px;
  margin: 0 auto 50px;
  text-align: center;
  color: #555;
  font-size: 17px;
  line-height: 1.8;
}

.overview-text p {
  margin-bottom: 20px;
}

.overview-highlights {
  display: flex;
  gap: 30px;
  justify-content: center;
  flex-wrap: wrap;
}

.highlight-card {
  background-color: white;
  border-radius: 15px;
  padding: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  flex: 1;
  min-width: 250px;
  max-width: 350px;
  text-align: center;
  transition: all 0.3s ease;
}

.highlight-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.highlight-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #006cfa, #00c3ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.highlight-icon i {
  color: white;
  font-size: 30px;
}

.highlight-card h3 {
  color: #002F6D;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 10px;
}

.highlight-card p {
  color: #666;
  font-size: 15px;
  line-height: 1.5;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scroll {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(10px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

@keyframes scrollArrow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
  .hero-title {
    font-size: 46px;
  }
  
  .hero-image-main img {
    height: 400px;
  }
}

@media (max-width: 992px) {
  .hero-container {
    height: auto;
    min-height: auto;
    padding: 100px 0 50px;
  }
  
  .hero-text-content {
    max-width: 100%;
    text-align: center;
    margin-bottom: 50px;
  }
  
  .hero-badge {
    position: relative;
    top: auto;
    right: auto;
    margin: 0 auto 20px;
  }
  
  .hero-features {
    justify-content: center;
  }
  
  .hero-cta {
    justify-content: center;
  }
  
  .hero-scroll-indicator {
    display: none;
  }
  
  .hero-image-showcase {
    padding-left: 0;
    max-width: 600px;
    margin: 0 auto;
  }
  
  .overview-highlights {
    gap: 20px;
  }
  
  .highlight-card {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .hero-title {
    font-size: 36px;
  }
  
  .hero-description {
    font-size: 16px;
  }
  
  .hero-image-main img {
    height: 350px;
  }
  
  .hero-thumb {
    width: 80px;
  }
  
  .hero-thumb img {
    height: 60px;
  }
  
  .btn-primary, .btn-outline {
    padding: 12px 20px;
    font-size: 15px;
  }
  
  .highlight-card {
    padding: 20px;
  }
  
  .highlight-icon {
    width: 60px;
    height: 60px;
  }
  
  .highlight-icon i {
    font-size: 24px;
  }
}

@media (max-width: 576px) {
  .hero-container {
    padding: 80px 0 40px;
  }
  
  .hero-title {
    font-size: 32px;
  }
  
  .hero-badge {
    width: 80px;
    height: 80px;
  }
  
  .hero-badge-years {
    font-size: 26px;
  }
  
  .hero-image-main img {
    height: 300px;
  }
  
  .hero-cta {
    flex-direction: column;
  }
  
  .btn-primary, .btn-outline {
    width: 100%;
    justify-content: center;
  }
  
  .tour-overview-section {
    padding: 60px 0 40px;
  }
  
  .overview-highlights {
    flex-direction: column;
    max-width: 350px;
    margin: 0 auto;
  }
}



/*ITINERARY DESIGN BOX*/
.box-itinerary{
	background-color: #fff;
	height: 100%;
	display: flex;
	justify-content:flex-start;
	align-items:flex-start;
	box-shadow: 3px 5px 5px 2px #515050;
	border-radius: 5px;
	padding-top: 35px;
	padding-bottom: 50px;
	padding-right: 50px;
	padding-left: 50px;
}



/*DESTINATION DESIGN*/
.caption-img{
	width:50%;
	padding:5px 10px;
	background-color:rgba(255,196,0,.9);
	color:#fff;
	position:absolute;
	bottom:10px;
	right:10px;
	text-shadow: 1px 1px 2px #6a6a6a;
	text-align: right;
}

.image-package{
	position: relative;
	display: block;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0px 4px 7px #888888;
}
.image-package img{
	transition: all 400ms;
}

.image-package:hover img{
	transform: scale(1.05)
}

.box-destination{
	background-color: #fff;
	height: 100%;
	padding: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.box-destination-text h3{
	/* font-family: 'Open sans' sans-serif; */
	/* font-family: "Playfair Display", serif; */
	font-weight: 800;
	color: #002F6D;
	border-bottom: solid 1px #484545;
	padding-bottom: 10px;
	margin-bottom: 20px;
	padding-top: 0px;
	text-transform: uppercase;
	font-size: 30px;
}

.box-destination-text h3 a:hover{
	color: #002F6D;
}

.box-destination-text h3 a{
	text-decoration: none;
	color: #4c4cff;
	transition: all .3s ease;
}

.box-destination-text h4{
	font-size: 20px;
	font-style: italic;
}

.detail-itinerary p{
	font-family: 'Open Sans', sans-serif;
}

.box-destination-text h3 a:hover{
	background-color:transparent;
	
}

.box-destination-text a{
	text-decoration: none;
}

.box-destination > a{
	padding: 10px;
	background-color: #6a6a6a;
	/*background: linear-gradient(to bottom, #20a9f0 0%, #fff 100%);*/
	color: #F1F1F1;
	text-decoration: none;
	display: inline-block;
	margin: 10px 0px;
	transition: .4s;
	border-radius: 5px; 
}

.box-destination a:hover{
	background-color: #007CE3
}

.section-destination{
	margin-bottom: 90px;
}

.section-destination h5{
	font-size: 50px;
	font-family: sans-serif;
	text-transform: uppercase;
	font-weight: 1000;
	letter-spacing: 2px;
}

.section-destination a{
	background-color: #ffffff42;
	outline: white;
	border-radius: 15px;
	text-decoration: none;
	color: white;
	padding: 5px 35px;
	transition: 0.9s;
}

.section-destination a:hover{
	background-color: #ffffff;
	color: #002F6D;
}

/* Destination design (temporary) Leisure Tour */
.destination-title {
  font-size: 38px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 15px;
  color: #002F6D;
  text-transform: uppercase;
}

.destination-title span {
  border-bottom: 3px solid #006cfa;
  padding-bottom: 5px;
}

.destination-subtitle {
  font-size: 16px;
  color: #666;
  margin-bottom: 50px;
}

.destination-timeline {
  position: relative;
  padding-left: 35px;
  margin-left: 15px;
}

.destination-timeline:before {
  content: '';
  position: absolute;
  left: 15px;
  top: 10px;
  bottom: 10px;
  width: 3px;
  background: linear-gradient(to bottom, #006cfa, #00c3ff);
  border-radius: 3px;
}

.destination-card {
  position: relative;
  margin-bottom: 50px;
  padding-left: 45px;
}

.destination-number {
  position: absolute;
  left: -50px;
  top: 45px;
  width: 60px;
  height: 60px;
  background-color: #002F6D;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 550;
  font-size: 30px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 47, 109, 0.3);
  border: 2px solid #fff;
}

.destination-content {
  border: none;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-radius: 5px;
  transition: all 0.3s ease-in-out;
  max-height: none;
}

.destination-content:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.destination-image-container {
  position: relative;
  height: 350px;
  overflow: hidden;
}

.destination-image {
  width: 100%;
  height: 100%;
  transition: transform 0.8s ease;
}

.destination-content:hover .destination-image {
  transform: scale(1.02);
}

.destination-badge {
  position: absolute;
  bottom: 20px;
  right: 0;
  background-color: rgba(0, 47, 109, 0.9);
  color: white;
  padding: 8px 35px;
  font-size: 16px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.destination-details {
  padding: 20px;
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #fff;
}

.destination-name {
  font-size: 28px;
  font-weight: 700;
  color: #002F6D;
  margin-bottom: 10px;
}

.destination-divider {
  width: 300px;
  height: 3px;
  background-color: #006cfa;
  margin-bottom: 10px;
}

.destination-description {
  flex-grow: 1;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.destination-features {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 15px;
  font-size: 16px;
  color: #666;
}

.destination-features span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background-color: #f5f9ff;
  padding: 5px 10px;
  border-radius: 20px;
  font-weight: 500;
}

.destination-features i {
  color: #006cfa;
}

/* Perbaikan Responsive */
@media (max-width: 991px) {
  .destination-image-container {
    height: 200px;
  }

  .destination-content{
	max-height: 350px;
  }
}

@media (max-width: 768px) {
  /* Improve timeline positioning */
  .destination-timeline {
    padding-left: 15px;
    margin-left: 0;
  }
  
  .destination-timeline:before {
    left: 5px;
  }
  
  /* Fix destination card layout */
  .destination-card {
    padding-left: 20px;
    margin-bottom: 40px;
  }
  
  /* Adjust the number circle for mobile */
  .destination-number {
    left: -18px;
    top: 20px;
    width: 40px;
    height: 40px;
    font-size: 18px;
    z-index: 10;
  }
  
  /* Fix content height issues */
  .destination-content {
    max-height: none !important;
    height: auto !important;
    overflow: visible;
  }
  
  /* Fix card row layout for mobile */
  .destination-content .row {
    flex-direction: column;
  }
  
  .destination-content .col-md-6 {
    width: 100%;
    max-width: 100%;
  }
  
  /* Adjust image container for mobile */
  .destination-image-container {
    height: 200px;
    width: 100%;
  }
  
  /* Improve text details layout and spacing */
  .destination-details {
    padding: 15px;
  }
  
  .destination-name {
    font-size: 18px;
    margin-bottom: 8px;
  }
  
  .destination-divider {
    width: 100px;
    margin-bottom: 8px;
  }
  
  .destination-description {
    font-size: 14px;
    line-height: 1.5;
    -webkit-line-clamp: 6;
  }
  
  /* Make features stack nicely on mobile */
  .destination-features {
    flex-direction: column;
    gap: 8px;
    margin-top: 10px;
  }
  
  .destination-features span {
    font-size: 14px;
  }
}

@media (max-width: 576px) {
  .destination-title {
    font-size: 28px;
  }
  
  .destination-subtitle {
    font-size: 14px;
    margin-bottom: 30px;
  }
}



/* Inclusion and Faq (Temporary) */
.inclusion-faq-section {
  /* background: #002F6D;
  background: linear-gradient(40deg, rgba(0, 47, 109, 1) 14%, rgba(182, 209, 224, 1) 50%, rgba(0, 47, 109, 1) 83%); */
  background: url('../image/contact-top.jpg') no-repeat center center/cover;
  /* background-size: cover; */
}

.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #006cfa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-circle i {
  font-size: 24px;
}

.section-title h3 {
  color: #002F6D;
  font-weight: 700;
  font-size: 28px;
}

/* Inclusion Cards */
.inclusion-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.inclusion-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.inclusion-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.icon-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #006cfa, #00c3ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.icon-wrapper i {
  color: white;
  font-size: 26px;
}

.inclusion-card h5 {
  color: #002F6D;
  font-weight: 600;
  margin-bottom: 8px;
}

.inclusion-card p {
  color: #666;
  font-size: 14px;
  margin-bottom: 0;
}

/* FAQ Cards */
.faq-cards {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.faq-card {
  background-color: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  cursor: pointer;
  transition: all 0.3s ease;
}

.faq-card:hover {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-question h5 {
  color: #002F6D;
  font-weight: 600;
  margin-bottom: 0;
}

.faq-question i {
  color: #006cfa;
  transition: transform 0.3s ease;
}

.faq-card[aria-expanded="true"] .faq-question i {
  transform: rotate(180deg);
}

.faq-answer {
  padding-top: 15px;
  border-top: 1px solid #eee;
  margin-top: 15px;
}

.faq-answer p {
  color: #666;
  font-size: 14px;
  margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .inclusion-grid {
    grid-template-columns: 1fr;
  }
  
  .section-title h3 {
    font-size: 24px;
  }
}

@media (max-width: 576px) {
  .icon-wrapper {
    width: 50px;
    height: 50px;
  }
  
  .icon-wrapper i {
    font-size: 22px;
  }
  
  .section-title h3 {
    font-size: 20px;
  }
  
  .faq-question h5 {
    font-size: 16px;
  }
}

/* INclusion and faq pt2 */
.tour-info-tabs {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.tab-navigation {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab-button {
  flex: 1;
  background: none;
  border: none;
  padding: 20px;
  font-size: 25px;
  font-weight: 600;
  color: #666;
  position: relative;
  transition: all 0.3s ease;
}

.tab-button i {
  margin-right: 8px;
}

.tab-button.active {
  color: #002F6D;
}

.tab-button.active:after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #006cfa;
}

.tab-content-wrapper {
  position: relative;
  min-height: 400px;
}

.tab-content {
  padding: 30px;
  display: none;
  animation: fadeIn 0.5s ease;
}

.tab-content.active {
  display: block;
}

/* Inclusion Categories */
.inclusion-category {
  background-color: #f8faff;
  border-radius: 12px;
  padding: 25px;
  height: 100%;
  transition: all 0.3s ease;
}

.inclusion-category:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.category-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #006cfa, #00c3ff);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.category-icon i {
  color: white;
  font-size: 30px;
}

.inclusion-category h4 {
  color: #002F6D;
  font-weight: 600;
  margin-bottom: 15px;
  font-size: 20px;
}

.inclusion-category ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.inclusion-category li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  color: #555;
}

.inclusion-category li i {
  color: #006cfa;
  margin-right: 10px;
}

/* FAQ Styles */
.faq-search {
  margin-bottom: 20px;
}

.faq-search .form-control {
  height: 50px;
  border-radius: 25px;
}

.faq-categories {
  display: flex;
  gap: 10px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.faq-category {
  background: #f0f4f8;
  border: none;
  padding: 8px 16px;
  border-radius: 20px;
  color: #555;
  font-weight: 500;
  transition: all 0.3s ease;
}

.faq-category.active, .faq-category:hover {
  background: #002F6D;
  color: white;
}

.accordion-item {
  border: none;
  border-bottom: 1px solid #eee;
  margin-bottom: 5px;
}

.accordion-button {
  padding: 10px 0;
  padding-right: 30px;
  border: none;
  background: white;
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: #002F6D;
  background: white;
  box-shadow: none;
  
}

.accordion-button:focus {
  box-shadow: none;
}

.faq-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f0f4f8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;
  flex-shrink: 0;
}

.faq-icon i {
  color: #006cfa;
  font-size: 20px;
  margin-left: 15px;
}

.faq-title {
  font-weight: 600;
  color: #333;
  font-size: 25px;
  margin-bottom: 50px;
  margin-left: 15px;
}

.accordion-body {
  padding: 0 0 10px 35px;
  line-height: 1.4;
}

.accordion-body p {
	margin-bottom: 3rem;
	color: #555;
	font-size: 20px;
  padding-right: 2rem;
}

.faq-highlights {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 15px;
  margin-bottom: 30px;
}

.highlight-item {
  display: flex;
  align-items: center;
  background: #f0f4f8;
  padding: 15px 15px;
  border-radius: 8px;
  max-width: 450px;
}

.highlight-item span{
  font-weight: 600;
  color: #002F6D;
  font-size: 18px;
  margin-right: 10px;
}

.highlight-item i {
  color: #006cfa;
  font-size: 20px;
  margin-right: 10px;
}

.contact-options {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-right: 7rem;
  margin-bottom: 30px;
}

.contact-option {
  background: #f8f9fb;
  border-radius: 12px;
  display: flex;
  align-items: center;
  max-width: 370px;
  padding: 15px;
}

.contact-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #f0f4f8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  margin-left: 1rem;
}

.contact-icon i {
  color: #006cfa;
  font-size: 20px;
}

.contact-info h6 {
  margin-bottom: 2px;
  color: #666;
  font-size: 14px;
}

.contact-info p {
  margin-bottom: 0;
  margin-left: 2rem;
  font-weight: 600;
  font-size: 18px;
}


@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .contact-options {
    grid-template-columns: 1fr;
    gap: 15px;
  }
  
  .contact-option {
    max-width: 350px;
    height: 80px;
    padding: 15px;
    margin-left: -1.2rem;
  }

  .contact-icon {
    width: 40px;
    height: 40px;
    margin-right: -10px;
    margin-left: -5px;
  }

  .faq-highlights {
    grid-template-columns: 1fr;
  }
  
  .tab-button {
    font-size: 16px;
    padding: 15px 10px;
  }
  
  .tab-content {
    padding: 20px 15px;
  }
  
  .inclusion-category {
    margin-bottom: 20px;
  }

  .highlight-item{
    font-size: 13px;
    margin-right: 2rem;
    text-align: center;
  }

  .faq-icon{
    width: 40px;
    height: 40px;
  }

  .accordion-body p {
    font-size: 16px;
    text-align: justify;
    line-height: 1.6;
    text-justify: inter-word;
    padding-right: 2rem;
  }

  .faq-title {
    font-size: 18px;
  }
}

.section-header-split {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.62) 20%, rgba(255,255,255,0) 100%);
  border-radius: 12px;
  padding: 20px;
}

.header-icon {
  background: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.header-icon i {
  color: #002F6D;
  font-size: 30px;
}

.header-content h2 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}

.header-content p {
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
  font-size: 16px;
}


.section-header-split-spotdestination {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  background: linear-gradient(to right, rgb(30, 0, 118) 0%, rgba(255,255,255,0) 100%);
  border-radius: 12px;
  padding: 20px;
}

.header-icon-spotdestination {
  background: #fff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.header-icon-spotdestination i {
  color: #002F6D;
  font-size: 30px;
}

.header-content-spotdestination h2 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 5px;
}

.header-content-spotdestination p {
  color: #fff;
  margin-bottom: 0;
  font-size: 16px;
}

.interactive-header {
  padding: 15px 0;
  perspective: 1000px;
}

.card-3d {
  position: relative;
  border-radius: 16px;
  background: linear-gradient(145deg, #002f6d, #1a4b8a);
  padding: 30px;
  transform-style: preserve-3d;
  transform: rotateX(0) rotateY(0);
  transition: transform 0.3s ease;
  box-shadow: 0 25px 50px -12px rgba(0, 46, 109, 0.25);
  overflow: hidden;
}

.card-3d:hover {
  transform: rotateX(2deg) rotateY(-2deg);
}

.card-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

.header-left {
  margin-right: 30px;
}

.header-icon-3d {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 2px solid rgba(255, 255, 255, 0.1);
  transform: translateZ(20px);
}

.header-icon-3d i {
  font-size: 32px;
  color: white;
}

.pulse-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  animation: pulse-animation 2s infinite;
}

.header-right {
  transform: translateZ(10px);
}

.header-right h2 {
  color: white;
  margin: 0 0 8px 0;
  font-size: 32px;
  font-weight: 700;
}

.header-right p {
  color: rgba(255, 255, 255, 0.8);
  margin: 0 0 15px 0;
  font-size: 16px;
}

.destination-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: rgba(255, 255, 255, 0.15);
  padding: 5px 12px;
  border-radius: 30px;
  font-size: 12px;
  color: white;
  font-weight: 500;
  backdrop-filter: blur(5px);
  transform: translateZ(15px);
}

.card-3d-shine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.15) 0%,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0) 80%,
    rgba(255, 255, 255, 0.15) 100%
  );
  pointer-events: none;
  z-index: 1;
}

@keyframes pulse-animation {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

@media (max-width: 767px) {
  .card-content {
    flex-direction: column;
    text-align: center;
  }
  
  .header-left {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .header-right h2 {
    font-size: 26px;
  }
  
  .destination-tags {
    justify-content: center;
  }
}

/* =============================== */

.map-destination-header {
  position: relative;
  padding: 30px;
  border-radius: 15px;
  background-color: #f2f7fc;
  overflow: hidden;
  margin-bottom: 30px;
}

.map-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('assets/image/map-texture.png');
  background-size: cover;
  opacity: 0.08;
  z-index: 1;
}

.header-container {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-main {
  display: flex;
  align-items: center;
}

.location-marker {
  width: 60px;
  height: 60px;
  background: #002f6d;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  position: relative;
  box-shadow: 0 10px 20px rgba(0, 47, 109, 0.2);
}

.location-marker i {
  color: white;
  font-size: 24px;
  z-index: 2;
}

.marker-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: rgba(0, 47, 109, 0.5);
  animation: pulse-map 2s infinite;
}

.header-content {
  padding-right: 20px;
}

.overline {
  color: #0055cc;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  display: block;
  margin-bottom: 5px;
}

.header-content h2 {
  color: #002f6d;
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 10px 0;
}

.route-line {
  display: flex;
  align-items: center;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #d1dee9;
  margin-right: 5px;
  position: relative;
}

.dot::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 12px;
  height: 2px;
  width: 15px;
  background-color: #d1dee9;
  transform: translateY(-50%);
}

.dot:last-child::after {
  display: none;
}

.dot.active {
  background-color: #0055cc;
}

.location-info {
  display: flex;
  gap: 20px;
  padding: 12px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.location-detail {
  display: flex;
  align-items: center;
}

.location-detail i {
  color: #002f6d;
  margin-right: 5px;
  font-size: 14px;
}

.location-detail span {
  color: #4a4a4a;
  font-size: 14px;
  font-weight: 500;
}

@keyframes pulse-map {
  0% {
    transform: scale(0.8);
    opacity: 0.7;
  }
  70% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

@media (max-width: 991px) {
  .header-container {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .location-info {
    margin-top: 20px;
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 767px) {
  .header-main {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .location-marker {
    margin-right: 0;
    margin-bottom: 15px;
  }
  
  .location-info {
    flex-direction: column;
    gap: 10px;
  }
}

/* 4 Days 3 Nights Package */
/* Itinerary Modern Styling */
.itinerary-header-4d3n {
  position: relative;
}

.itinerary-badge-4d3n {
  display: inline-block;
  background-color: #f0f7ff;
  color: #006cfa;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 15px;
  border-radius: 30px;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.itinerary-title-4d3n {
  font-size: 42px;
  font-weight: 800;
  color: #002F6D;
  margin-bottom: 15px;
}

.itinerary-title-4d3n span {
  border-bottom: 3px solid #006cfa;
  padding-bottom: 5px;
}

.itinerary-subtitle-4d3n {
  max-width: 700px;
  margin: 0 auto;
  color: #666;
}

/* Tab Navigation */
.itinerary-tabs-4d3n {
  position: relative;
}

.itinerary-tab-nav-4d3n {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 30px;
}

.itinerary-tab-btn-4d3n {
  background: #f0f4f8;
  border: none;
  padding: 12px 24px;
  border-radius: 30px;
  color: #555;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  min-width: 120px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.itinerary-tab-btn-4d3n.active, 
.itinerary-tab-btn-4d3n:hover {
  background: linear-gradient(135deg, #002F6D, #006cfa);
  color: white;
  box-shadow: 0 5px 15px rgba(0, 47, 109, 0.2);
  transform: translateY(-2px);
}

/* Day Content */
.itinerary-day-content-4d3n {
  display: none;
  animation: fadeIn4d3n 0.5s ease forwards;
}

.itinerary-day-content-4d3n.active {
  display: block;
}

.day-content-wrapper-4d3n {
  background-color: #ffffff;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  padding: 25px;
}

.day-header-4d3n {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 15px;
}

.day-icon-4d3n {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #002F6D, #006cfa);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  flex-shrink: 0;
  box-shadow: 0 5px 15px rgba(0, 47, 109, 0.2);
}

.day-icon-4d3n i {
  color: white;
  font-size: 20px;
}

.day-title-4d3n {
  color: #002F6D;
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}

.day-highlights-grid-4d3n {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 25px;
}

.day-image-container-4d3n {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  height: 250px;
  flex: 1;
  min-width: 250px;
}

.day-img-4d3n {
  width: 100%;
  height: 100%;
  transition: transform 0.5s ease;
}

.day-image-container-4d3n:hover .day-img-4d3n {
  transform: scale(1.05);
}

.day-badge-overlay-4d3n {
  position: absolute;
  top: 20px;
  right: 0;
  background: linear-gradient(135deg, #002F6D, #006cfa);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 8px 20px;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  letter-spacing: 1px;
}

.highlights-container-4d3n {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 1;
  min-width: 250px;
  align-content: flex-start;
}

.highlight-item-4d3n {
  background: #f8f9fb;
  border-radius: 8px;
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  width: 100%;
}

.highlight-item-4d3n:hover {
  background: #f0f7ff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.highlight-item-4d3n i {
  color: #006cfa;
  font-size: 20px;
  display: block;
  width: 24px;
}

.highlight-item-4d3n span {
  color: #555;
  font-size: 15px;
  font-weight: 500;
}

.day-description-4d3n {
  background-color: #f8f9fb;
  border-radius: 12px;
  padding: 25px;
  margin-top: 20px;
  border-left: 4px solid #006cfa;
}

.day-description-4d3n p {
  color: #555;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 15px;
  text-align: justify;
}

.day-description-4d3n p:last-child {
  margin-bottom: 0;
}

/* CTA Section */
.itinerary-cta-container-4d3n {
  position: relative;
  background-color: #f0f7ff;
  border-radius: 15px;
  padding: 30px;
  margin-top: 50px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.itinerary-cta-container-4d3n:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('assets/image/pattern-light.png');
  opacity: 0.1;
  z-index: 1;
}

.itinerary-cta-content-4d3n {
  position: relative;
  z-index: 2;
}

.cta-icon-4d3n {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #002F6D, #006cfa);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 10px 20px rgba(0, 47, 109, 0.2);
}

.cta-icon-4d3n i {
  color: white;
  font-size: 30px;
}

.itinerary-cta-content-4d3n h4 {
  font-size: 28px;
  font-weight: 700;
  color: #002F6D;
  margin-bottom: 10px;
}

.itinerary-cta-content-4d3n p {
  color: #666;
  margin-bottom: 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons-4d3n {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.btn-cta-4d3n {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 25px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-cta-4d3n.primary {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

.btn-cta-4d3n.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
}

.btn-cta-4d3n.secondary {
  background: linear-gradient(135deg, #002F6D, #006cfa);
  color: white;
  box-shadow: 0 5px 15px rgba(0, 47, 109, 0.2);
}

.btn-cta-4d3n.secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 47, 109, 0.3);
}

/* Animation */
@keyframes fadeIn4d3n {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .itinerary-tab-btn-4d3n {
    font-size: 14px;
    padding: 10px 20px;
    min-width: 100px;
  }
  
  .day-title-4d3n {
    font-size: 22px;
  }
  
  .day-highlights-grid-4d3n {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .itinerary-tab-nav-4d3n {
    /* display: inline-flex; */
    /* justify-content: flex-start; */
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-x: visible;
    padding: 0;
    width: 100%;
  }

  .itinerary-tabs-4d3n {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* For smoother scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
    padding-bottom: 5px;
  }

  .itinerary-tabs-4d3n::-webkit-scrollbar {
    display: none; 
  }

  .itinerary-tab-btn-4d3n {
    width: 100%;
    min-width: 100%;
    text-align: center;
    white-space: normal;
  }

  .day-content-wrapper-4d3n {
    margin-top: 20px;
  }
  
  .day-image-container-4d3n {
    height: 220px;
    margin-bottom: 10px;
  }
  
  .highlights-container-4d3n {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  
  .highlight-item-4d3n {
    width: auto;
  }
  
  .cta-buttons-4d3n {
    flex-direction: column;
    align-items: center;
  }
  
  .day-description-4d3n {
    padding: 15px;
  }
  
  .day-description-4d3n p {
    font-size: 15px;
  }
}

@media (max-width: 576px) {
  .itinerary-title-4d3n {
    font-size: 32px;
  }
  
  .highlights-container-4d3n {
    grid-template-columns: 1fr;
  }
  
  .day-title-4d3n {
    font-size: 20px;
  }
  
  .itinerary-cta-content-4d3n h4 {
    font-size: 24px;
  }
}


/* 4d3n temporary */
.itinerary-header {
  position: relative;
}

.itinerary-badge {
  display: inline-block;
  background-color: #f0f7ff;
  color: #006cfa;
  font-weight: 600;
  font-size: 14px;
  padding: 6px 15px;
  border-radius: 30px;
  margin-bottom: 15px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.itinerary-title {
  font-size: 42px;
  font-weight: 800;
  color: #002F6D;
  margin-bottom: 15px;
}

.itinerary-title span {
  border-bottom: 3px solid #006cfa;
  padding-bottom: 5px;
}

.itinerary-subtitle {
  max-width: 700px;
  margin: 0 auto;
  color: #666;
}

/* Tab Navigation */
.itinerary-tabs {
  position: relative;
}

.itinerary-tab-nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
}

.itinerary-tab-btn {
  background: #f0f4f8;
  border: none;
  padding: 12px 24px;
  border-radius: 30px;
  color: #555;
  font-weight: 600;
  font-size: 16px;
  transition: all 0.3s ease;
  cursor: pointer;
  min-width: 120px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.itinerary-tab-btn.active, 
.itinerary-tab-btn:hover {
  background: linear-gradient(135deg, #002F6D, #006cfa);
  color: white;
  box-shadow: 0 5px 15px rgba(0, 47, 109, 0.2);
  transform: translateY(-2px);
}

/* Day Content */
.itinerary-day-content {
  display: none;
  animation: fadeIn 0.5s ease forwards;
}

.itinerary-day-content.active {
  display: block;
}

.itinerary-image-container {
  position: relative;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  height: 300px;
}

.itinerary-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.itinerary-image-container:hover .itinerary-img {
  transform: scale(1.05);
}

.itinerary-badge-overlay {
  position: absolute;
  top: 20px;
  right: 0;
  background: linear-gradient(135deg, #002F6D, #006cfa);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 8px 20px;
  color: white;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.day-badge {
  letter-spacing: 1px;
}

.itinerary-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.highlight-item {
  background: #f8f9fb;
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.highlight-item:hover {
  background: #f0f7ff;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

.highlight-item i {
  color: #006cfa;
  font-size: 20px;
  margin-bottom: 5px;
  display: block;
}

.highlight-item span {
  display: block;
  color: #555;
  font-size: 14px;
  font-weight: 500;
}

.day-title {
  color: #002F6D;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

/* Timeline Style */
.itinerary-timeline {
  position: relative;
  padding-left: 30px;
}

.itinerary-timeline:before {
  content: '';
  position: absolute;
  left: 15px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(to bottom, #006cfa, #00c3ff);
  border-radius: 2px;
}

.timeline-item {
  position: relative;
  margin-bottom: 20px;
}

.timeline-point {
  position: absolute;
  left: -30px;
  top: 0;
  width: 30px;
  height: 30px;
  background-color: #006cfa;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 108, 250, 0.3);
}

.timeline-content {
  padding-bottom: 10px;
  padding-right: 20px;
}

.timeline-content h5 {
  font-size: 18px;
  font-weight: 600;
  color: #002F6D;
  margin-bottom: 5px;
}

.timeline-content p {
  font-size: 16px;
  color: #666;
  margin: 0;
}

/* CTA Section */
.itinerary-cta-container {
  position: relative;
  background-color: #f0f7ff;
  border-radius: 15px;
  padding: 30px;
  margin-top: 50px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.itinerary-cta-container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('assets/image/pattern-light.png');
  opacity: 0.1;
  z-index: 1;
}

.itinerary-cta-content {
  position: relative;
  z-index: 2;
}

.cta-icon {
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: linear-gradient(135deg, #002F6D, #006cfa);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  box-shadow: 0 10px 20px rgba(0, 47, 109, 0.2);
}

.cta-icon i {
  color: white;
  font-size: 30px;
}

.itinerary-cta-content h4 {
  font-size: 28px;
  font-weight: 700;
  color: #002F6D;
  margin-bottom: 10px;
}

.itinerary-cta-content p {
  color: #666;
  margin-bottom: 20px;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 25px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-cta.primary {
  background: linear-gradient(135deg, #25D366, #128C7E);
  color: white;
  box-shadow: 0 5px 15px rgba(37, 211, 102, 0.3);
}

.btn-cta.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(37, 211, 102, 0.4);
}

.btn-cta.secondary {
  background: linear-gradient(135deg, #002F6D, #006cfa);
  color: white;
  box-shadow: 0 5px 15px rgba(0, 47, 109, 0.2);
}

.btn-cta.secondary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 47, 109, 0.3);
}

/* Animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Responsive Adjustments */
@media (max-width: 991px) {
  .itinerary-tab-btn {
    font-size: 14px;
    padding: 10px 20px;
    min-width: 100px;
  }
  
  .day-title {
    font-size: 24px;
  }
}

@media (max-width: 768px) {
  .itinerary-tab-nav {
    overflow-x: auto;
    padding-bottom: 10px;
    justify-content: flex-start;
  }
  
  .itinerary-image-container {
    height: 220px;
    margin-bottom: 20px;
  }
  
  .itinerary-highlights {
    margin-bottom: 30px;
  }
  
  .timeline-point {
    width: 25px;
    height: 25px;
    font-size: 12px;
  }
  
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 576px) {
  .itinerary-title {
    font-size: 32px;
  }
  
  .itinerary-highlights {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .day-title {
    font-size: 22px;
  }
  
  .itinerary-cta-content h4 {
    font-size: 24px;
  }
}


















/* 3 days 2 night package */
/* Modern Destination Section */
.modern-destination-section {
  padding: 80px 0;
  background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 50%, #f0f7ff 100%);
  position: relative;
  overflow: hidden;
}

.modern-destination-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><g fill="%23002F6D" fill-opacity="0.02"><circle cx="30" cy="30" r="2"/></g></svg>');
  z-index: 1;
}

.modern-destination-section .container-fluid {
  position: relative;
  z-index: 2;
}

/* Section Header */
.destination-section-header {
  margin-bottom: 60px;
}

.destination-badge-3d2n {
  display: inline-block;
  background: linear-gradient(135deg, #006cfa, #00c3ff);
  color: white;
  font-weight: 600;
  font-size: 14px;
  padding: 8px 20px;
  border-radius: 30px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 20px;
  box-shadow: 0 4px 15px rgba(0, 108, 250, 0.3);
}

.destination-main-title {
  font-size: 42px;
  font-weight: 800;
  color: #002F6D;
  margin-bottom: 20px;
  line-height: 1.2;
}

.highlight-text {
  position: relative;
  color: #006cfa;
}

.highlight-text::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #006cfa, #00c3ff);
  border-radius: 2px;
}

.destination-intro {
  max-width: 700px;
  margin: 0 auto;
  color: #666;
  font-size: 16px;
  line-height: 1.6;
}

/* Destinations Grid */
.destinations-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Modern Destination Card (For 3d2n) */
.destination-card-modern {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.destination-card-modern:hover {
  transform: translateY(-2px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Card Image Container */
.card-image-container {
  position: relative;
  height: 280px;
  overflow: hidden;
}

.destination-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.destination-card-modern:hover .destination-img {
  transform: scale(1.1);
}

/* Card Overlay */
.card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1) 0%,
    rgba(0, 0, 0, 0.3) 60%,
    rgba(0, 0, 0, 0.7) 100%
  );
  opacity: 0;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.destination-card-modern:hover .card-overlay {
  opacity: 1;
}

/* Destination Tags */
.destination-tag-modern {
  background: linear-gradient(135deg, #002F6D, #006cfa);
  color: white;
  font-weight: 600;
  font-size: 12px;
  padding: 8px 15px;
  border-radius: 25px;
  display: inline-block;
  width: fit-content;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0, 47, 109, 0.3);
}

.destination-tag-modern.bestseller {
  background: linear-gradient(135deg, #ff6b35, #ff8e53);
}

.destination-tag-modern.luxury {
  background: linear-gradient(135deg, #8e44ad, #9b59b6);
}

.destination-tag-modern.sunset {
  background: linear-gradient(135deg, #f39c12, #e67e22);
}

/* Card Overlay Content */
.card-overlay-content {
  color: white;
}

.destination-highlights-3d2n {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.highlight-item-3d2n {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  padding: 6px 25px 6px 25px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: 500;
}

.highlight-item-3d2n i {
  margin-right: 10px;
  font-size: 14px;
}

/* Card Content */
.card-content-modern {
  padding: 25px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.card-title-modern {
  font-size: 30px;
  font-weight: 800;
  color: #002F6D;
  margin: 0;
}

.rating-modern {
  display: flex;
  gap: 2px;
}

.rating-modern i {
  color: #ffc107;
  font-size: 14px;
}

.card-description-modern {
  color: #666;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

/* Card Features */
.card-features-modern {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
  padding: 15px 0;
  border-top: 1px solid #f0f0f0;
}

.feature-item {
  display: flex;
  align-items: center;
  color: #888;
  font-size: 18px;
}

.feature-item i {
  color: #006cfa;
  margin-right: 6px;
  font-size: 19px;
}

/* Explore Button */
.btn-explore-modern {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #002F6D, #006cfa);
  color: white;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  margin-top: auto;
}

.btn-explore-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.5s;
}

.btn-explore-modern:hover::before {
  left: 100%;
}

.btn-explore-modern:hover {
  transform: translateY(-0.2px);
  box-shadow: 0 8px 25px rgba(0, 47, 109, 0.3);
  color: white;
}

.btn-explore-modern i {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.btn-explore-modern:hover i {
  transform: translateX(3px);
}

/* Responsive Design */
@media (max-width: 992px) {
  .destinations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  
  .destination-main-title {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .modern-destination-section {
    padding: 60px 0;
  }
  
  .destinations-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 15px;
  }
  
  .destination-main-title {
    font-size: 30px;
  }
  
  .card-image-container {
    height: 240px;
  }
  
  .destination-highlights {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 576px) {
  .destination-main-title {
    font-size: 26px;
  }
  
  .card-content-modern {
    padding: 20px;
  }
  
  .card-features-modern {
    flex-direction: column;
    gap: 10px;
  }
}


/* Tour Gallery2 */
/* Tour Gallery - Modern Masonry Layout */
.tour-gallery-header {
text-align: center;
margin-bottom: 40px;
}

.gallery-title {
font-size: 38px;
font-weight: 700;
color: #002F6D;
margin-bottom: 15px;
}

.gallery-title span {
border-bottom: 3px solid #006cfa;
padding-bottom: 5px;
}

.gallery-subtitle {
font-size: 16px;
color: #666;
max-width: 700px;
margin: 0 auto;
}

.masonry-gallery {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 250px;
grid-gap: 15px;
margin-bottom: 25px;
}

.gallery-item {
position: relative;
overflow: hidden;
border-radius: 12px;
box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}

.gallery-item:hover {
transform: translateY(-5px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.gallery-item.featured {
grid-column: span 2;
grid-row: span 2;
}

.gallery-item.wide {
grid-column: span 2;
}

.gallery-item.tall {
grid-row: span 2;
}

.gallery-image {
height: 100%;
width: 100%;
position: relative;
}

.gallery-image img {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
}

.gallery-item:hover .gallery-image img {
transform: scale(1.05);
}

.image-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0) 100%);
padding: 20px;
color: white;
opacity: 0;
transform: translateY(20px);
transition: all 0.3s ease;
}

.gallery-item:hover .image-overlay {
opacity: 1;
transform: translateY(0);
}

.overlay-content h4 {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}

.overlay-content p {
font-size: 14px;
opacity: 0.9;
margin: 0;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}

.location-badge {
position: absolute;
top: 15px;
right: 15px;
background-color: rgba(0, 47, 109, 0.9);
color: white;
padding: 5px 10px;
border-radius: 20px;
font-size: 12px;
font-weight: 600;
display: flex;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
z-index: 2;
}

.location-badge i {
margin-right: 5px;
animation: pulse 1.5s infinite;
}

.gallery-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 30px;
gap: 10px;
}

.filter-btn {
background: #f0f4f8;
border: none;
padding: 8px 16px;
border-radius: 20px;
color: #555;
font-weight: 500;
transition: all 0.3s ease;
cursor: pointer;
}

.filter-btn.active, .filter-btn:hover {
background: #002F6D;
color: white;
}

.tour-destinations {
  
text-align: center;
}

.tour-destinations p {
font-size: 16px;
color: #555;
}

.view-all-btn {
display: inline-flex;
align-items: center;
color: #006cfa;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}

.view-all-btn i {
margin-left: 5px;
transition: transform 0.3s ease;
}

.view-all-btn:hover {
color: #002F6D;
}

.view-all-btn:hover i {
transform: translateX(3px);
}

@keyframes pulse {
0% {
	opacity: 1;
}
50% {
	opacity: 0.6;
}
100% {
	opacity: 1;
}
}

/* Responsive adjustments */
@media (max-width: 992px) {
.masonry-gallery {
	grid-template-columns: repeat(3, 1fr);
}
}

@media (max-width: 768px) {
.masonry-gallery {
	grid-template-columns: repeat(2, 1fr);
}

.gallery-item.featured {
	grid-column: span 2;
	grid-row: span 1;
}

.gallery-item.wide {
	grid-column: span 2;
}

.gallery-item.tall {
	grid-row: span 1;
}
}

@media (max-width: 576px) {
.masonry-gallery {
	grid-template-columns: 1fr;
	grid-auto-rows: 200px;
}

.gallery-item, .gallery-item.featured, .gallery-item.wide, .gallery-item.tall {
	grid-column: span 1;
	grid-row: span 1;
}

.tour-destinations {
	flex-direction: column;
	align-items: flex-start;
	gap: 15px;
}
}




/*Service*/
.services-parent{
	transition: 0.2s ease;
}

.services-parent h3{
    font-size: 35px;
    font-weight: 700;
    margin-bottom: 30px;
	color: #000;
	align-items: center;
	text-align: center;
}
.service-1{
	padding-left: 90px;
}

.service-2{
	padding-left: 50px;
}


.services img{
	width: 500px;
	height: 400px;
	transition: .3s ease;
	border-radius: 5px;
}

.services img:hover{
	transform: scale(1.02);
	box-shadow: 5px 5px 10px gray;
}

.pak-feature h5{
	font-size: 20px;
	font-weight: 600;
	color: #002F6D;
	margin-bottom: 5px;
	margin-top: 15px;
}

.pak-feature p{
	font-size: 15px;
	color: #000;
	margin-bottom: 20px;
}

.pak-feature-title{
	text-align: center;
	padding: 0px 80px 0px 80px;
	margin-bottom: 15px;
}

.pak-feature-title h2{
	font-size: 45px;
	font-weight: 700;
	color: #002F6D;
	margin-bottom: 5px;
}

.pak-feature-item{
	display: inline-block;
	align-self: center;
	padding: 20px;
	border: 1px solid #eee;
	border-radius: 10px;
	text-align: center;
}

.pak-feature-item img{
	max-width: 100%;
	border-radius: 10px;
	display: block;
	margin: 0 auto;
}

.pak-feature-item h5{
	margin-top: 10px;
	text-align: center;
}

.pak-feature-item p{
	margin-top: 5px;
	text-align: center;
}

/* =============================== */

.tour-feature-section {
  /* background: linear-gradient(to bottom, #f8f9fb 0%, #ffffff 100%); */
  /* background-color: #002f6d; */
  background: #ffffff;
background: linear-gradient(1deg, rgba(255, 255, 255, 1) 7%, rgba(86, 134, 196, 1) 37%, rgba(0, 47, 109, 1) 79%);
  padding: 80px 0;
}

.feature-subtitle {
  color: #006cfa;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 14px;
  background-color: #ffff;
  padding: 8px 30px 8px 30px;
  margin-bottom: 10px;
  border-radius: 20px;
}

.feature-title {
  font-size: 42px;
  font-weight: 800;
  color: #ffff;
  margin-bottom: 25px;
  margin-top: 1rem;
}

.feature-title span {
  position: relative;
}

.feature-title span::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(to right, #006cfa, #00c3ff);
  border-radius: 2px;
}

.feature-description {
  max-width: 650px;
  margin: 0 auto;
  color: #ffff;
}

.tour-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 25px;
  margin-top: 30px;
}

.feature-card {
  position: relative;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: all 0.5s ease;
  height: 100%;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 47, 109, 0.15);
}

.feature-card-inner {
  padding: 35px 25px;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.feature-card-inner::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: linear-gradient(135deg, rgba(0, 108, 250, 0.1), rgba(0, 195, 255, 0.05));
  border-radius: 50%;
  transform: translate(30%, -30%);
  z-index: -1;
}

.feature-icon-wrapper {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-icon-bg {
  position: absolute;
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, #006cfa, #00c3ff);
  border-radius: 12px;
  transform: rotate(-10deg);
  opacity: 0.1;
  transition: all 0.3s ease;
}

.feature-card:hover .feature-icon-bg {
  transform: rotate(0deg) scale(1.2);
  opacity: 0.2;
}

.feature-icon-wrapper i {
  font-size: 36px;
  color: #006cfa;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

.feature-card:hover .feature-icon-wrapper i {
  transform: scale(1.1);
  color: #002F6D;
}

.feature-card h3 {
  color: #002F6D;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.feature-card p {
  color: #6c757d;
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 20px;
  flex-grow: 1;
}

.feature-detail {
  background: #f0f7ff;
  padding: 10px 15px;
  border-radius: 8px;
  display: inline-block;
}

.feature-detail span {
  color: #002F6D;
  font-weight: 500;
  font-size: 14px;
}

/* Specific colors for each feature */
.feature-card[data-feature="pickup"] .feature-icon-bg {
  background: linear-gradient(135deg, #5e7bf2, #9d8bea);
}

.feature-card[data-feature="guide"] .feature-icon-bg {
  background: linear-gradient(135deg, #00b8d9, #00e0eb);
}

.feature-card[data-feature="duration"] .feature-icon-bg {
  background: linear-gradient(135deg, #ff8f00, #ffc400);
}

.feature-card[data-feature="group"] .feature-icon-bg {
  background: linear-gradient(135deg, #36b37e, #79f2c0);
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .tour-features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .tour-features {
    grid-template-columns: 1fr;
  }
  
  .feature-title {
    font-size: 32px;
  }
  
  .feature-card-inner {
    padding: 25px 20px;
  }
}


/*About Us*/

.box-about{
	background-color: #fff;
	height: 100%;
	padding: 50px;
	/* align-items: center;
	justify-content: center;
	display: flex;
	flex-wrap: wrap; */
}

.box-about h1{
	width: 100%;
	font-size: 34px;
	font-weight: 800;
	color: #002F6D;
}

.box-about h3{
	width: 100%;
	font-size: 34px;
	font-weight: 800;
	color: #002F6D;
}

.box-about h5{
	font-size: 18px;
	margin-bottom: 20px;
	background-color: #002F6D;
	color: #fff;
	padding: 10px 10px;
}

.about-desc h3{
	background-color: #002F6D;
	color: #fff;
	padding: 10px 10px;
	margin-bottom: 30px;
	margin-top: -20px;
}

.profile-page{
	background-color: #fff;
	height: 100%;
	padding: 20px;
}

.profile-page img{
	width: 200px;
	height: auto;
	border-radius: 10%;
	display: block;
	margin: 0 auto;
	transition: all 0.5s ease-in-out;
}

.profile-title{
	font-size: 30px;
	font-weight: 700;
	color: #002F6D;
	margin-bottom: 20px;
	text-align: center;
	margin-top: 20px;
}

.profile-title h3{
	font-family: "Playfair Display", serif;
	font-weight: 700;
	font-size: 30px;
}

.profile-title h4{
	font-size: 18px;
}

.profile-row{
	margin-top: 4rem;
}

.team-box{
	background-color: #fff;
	height: 100%;
	padding: 50px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1);
	border-radius: 10px;
}

.profile-introduction{
	padding: 0 2rem 0 2rem;
	text-align: center;
	margin-top: -2rem;
}


/*GAGAL PAGE DESIGN*/
.box-gagal{
	background-color: #fff;
	height: 100%;
	padding: 50px;
	padding-bottom: 90px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.box-gagal h1{
	width: 100%;
	font-size: 34px;
	font-family: "Helvetica";
	font-style: oblique;
	margin-bottom: 15px;
}

/*BEST SELLER IMAGE DESIGN*/
.best-seller{
	width:99px;
	height:97px;
	position:absolute;
	top:-5px;
	left:-5px;
}

.card-footer small{
  color: blue;
}

/*TESTIMONIAL DESIGN*/

.testimonial-box{
	background-color: #002F6D;
	width: 100%
}

.testimonial img{
	width:100px;
	background-color:#fff;
	padding:10px;
	border-radius:50%;
}

.testimonial-info{
	margin-top: 5.5rem;
	margin-right: 2rem;
}

.testimonial-info h3{
	font-size: 38px;
	font-weight: 700;
}

.testimonial-info h6 span{
	color: #fff;
  background-color: #002F6D;
  border-radius: 20px;
  padding: 8px 20px 8px 20px;
}

.testimonial-info h6{
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .testimonial-info{
    text-align: center;
    margin-left: 30px;
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .testimonial-info h3{
    font-size: 30px;
  }
}


/*FOOTER DESIGN*/
.footer{
	background-color:#282828;
	padding: 30px 0px;
	width: 100%;
}

.box-footer img{
	width:120px;
	background-color:#fff;
	padding:10px;
	border-radius:50%;
	border:solid 5px #002f6d;
	margin-bottom: 15px;
}

.footer strong{
	color: rgb(0, 111, 171);
}

.footer h2{
	color:#ff8400;
}

.footer p{
	color:rgba(226,225,225,1.00);
}

.above-footer{
	position: relative;
}

.above-footer img{
	width: 100%;
	height: 690px;
}

.above-footer-text{
	position: absolute;
	top: 17%;
	left: 20%;
	color: #002f6d;
	text-align: center;
}

.above-footer-text h3{
	font-size: 40px;
	font-weight: 600;
}

.above-footer-text p{
	font-size: 16px;
	margin-bottom: 35px;
}

.above-footer-text a{
	color: white;
	text-decoration: none;
	border-radius: 20px;
	background-color: #006cfa;
	padding: 10px 20px;
	transition: 300ms ease-in-out;
}

.above-footer-text a:hover{
	background-color: #002f6d;
}

footer{
	background-color:#00132d;
	padding: 30px 0px;
	width: 100%;
}

.logo-socialmed{
	border-bottom: solid 0.5px white;
}

.logo-footer img{
	width: 350px;
	margin-top:  5px;
	margin-left: -65px;
}

.logo-footer h2{
	color: white;
	font-size: 20px;
}

.detail-footer{
	color: white;
	padding-bottom: 30px;
	border-bottom: solid 0.5px white;
}

.servis-footer li{
	margin-left: -30px;
}

.servis-footer li a{
	color: white;
	text-decoration: none;
	transition: all 200ms ease-in;
}

.servis-kami-footer{
	padding-left: 65px;
}

.support-footer{
	padding-left: 50px;
}

.servis-footer li a:hover{
	color: #006cfa;
}

.copyright-footer{
	color: white;
	margin-top: 20px;
}


.menu-list ul {
	margin: 10px 0 20px 0;
}

.menu-list ul li a {
	color: #c6c6c7;
	transition: .5s;
	text-decoration: none;
}

.menu-list ul li a:hover,
.menu-list ul li a:active{
	color: #002f6d;
}
.copyright {
	text-align: center;
	padding: 10px;
	color: #555;
	background-color: #202020;
}

.tripadvisor-rating{
	margin-left: -25rem;
}




/* Floating Button */
.btn-floating{
	/* position: fixed;
	right: 5em;
	overflow: hidden;
	width: 50px;
	height: 50px;
	bottom: -125px;
	border-radius: 100px;
	border: 0;
	z-index: 9999;
	color: white;
	transition: .2s; */

	justify-content: center;
	box-shadow: 0 0 5px #ccc;
	position: fixed;
	padding: 10px;
	width: 180px;
	height: 120px;
	bottom: -125px;
	right: 5px;
	transition: .5s ease;
}

.optiontour-heading h3{
	font-size: 35px;
	font-weight:700;
}

.optiontour-heading{
	margin-bottom: 30px;
}

/* WHATSAPP BUTTON*/
.wa-box {
	justify-content: center;
	box-shadow: 0 0 5px #ccc;
	position: fixed;
	z-index: 9999;
	padding: 10px;
	width: 180px;
	height: 120px;
	bottom: -125px;
	right: 5px;
	transition: .5s ease;
}

.wa-box .title {
	padding: 5px 26px 36px 20px;
	min-width: 50px;
	min-height: 20px;
	background: #5df473;
	color: #fff;
	font-weight: 700;
	cursor: pointer;
	position: absolute;
	top: -37px;
	right: 10px;
	font-size: 15px;
	transition: .5s ease;
}

.wa-box .title:hover{
	background-color: #47c65a;
}


/*TOUR PACKAGES SLIDER*/
.images{
	display: flex;
	transition: 2s;
}

.wrapper{
	width: 1140px;
	margin: auto;
	border-radius: 5px;
	overflow: hidden;
	position: relative;

}

#slide-1:target ~ .images{
	margin-left: 0px;
}

#slide-2:target ~ .images{
	margin-left: -100%;
}

#slide-3:target ~ .images{
	margin-left: -200%;
}

.navigation a{
	display: inline-block;
	height: 25px;
	width: 25px;
	background-color: #dedede;
	font-size: 0px;
	border-radius: 50%;
	margin: 3px;
	transition: 1s;
}

.navigation a:hover {
	background-color: #002f6d;
}

.navigation {
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	text-align: center;
	margin-top: -55px;
}



@media screen and (max-width: 768px){
	#carouselExampleFade .carousel-item img {
		height: 300px !important;
		object-fit: cover;
	}

	/* Adjust carousel caption to fit the image */
	.carousel-caption {
		top: 30%;
		left: 10%;
		right: 15%;
		text-align: center;
		padding: 5px;
		bottom: 10%;
	}

	/* Make the title more prominent but smaller for mobile */
	.carousel-caption > .carousel-title{
		font-size: 35px;
		margin-bottom: 10px;
	}

	/* Ensure paragraph text fits on mobile screens */
	.carousel-caption p {
		font-size: 40px;
		padding-right: 0;
		margin-bottom: 15px;
	}

	/* Show the explore button on mobile */
	.carousel-caption a {
		display: inline-block;
		padding: 8px 16px;
		font-size: 14px;
	}
	
	.testi-info a{
		margin-left: 50px;
	}

	.header {
		padding: 10px 0;
		position: relative;
		z-index: 1000;
		background-color: white;
	}

	.col {
        flex: 0 0 100%;
        max-width: 100%;
		max-height: 100%
    }

	.col-testi{
		max-height: 300px;
	}

	.wrapper {
		width: 90%;
	}

	.title-with-link *:first-child {
		margin-bottom: 15px;
		text-align: center;
	}

	.title-with-link *:last-child {
		margin-bottom: 5px;
		align-items: center;
	}
	
	.col-sm-6{	
		flex: 0 0 auto;
		width: 50%;
	}
	
	.card-body{
		height: 250px;
	}

	.card-body h3 span{
		border-bottom: none;
	}
	

	.card-footer{
		padding-top: 5px;
	}

	.feature-desc{
		display: block;
		top: 35px;
		left: 2px;
		width: 100%;
	}

	.feature-desc h2{
		font-size: 30px;
	}

	.feature-desc h4{
		font-size: 15px;
	}

	.feature-desc p{
		font-size: 10px;
	}

	.feature-desc a{
		display: none;
	}

	.card-footer a{
		font-size: 14px;
		padding: 10px 20px;
	}


	.kutatour-book h3{
		font-size: 35px;
	}

	.kutatour-book a{
		font-size: 15px;
	}

	.contactbook{
		font-size: 15px;
	}

	.program-title{
		margin-left: 5px;
	}

	.img-top img{
		height:200px;
	}

	.beyond-hero{
		margin-top: 0;
	}

	.beyond-hero-img{
		padding-left: 0;
		margin-top: 2rem;
	}

	.desti{
		display: none;
	}

	/* Footer */
	.above-footer-text{
		top: 15%;
		left: 0;
		right: 0;
		padding: 0 15px;
		color: white;
		text-shadow: 3px 1px 8px #00132d;
	}

	.above-footer-text h3{
		font-size: 35px;
	}

	.above-footer-text p{
		font-size: 13px;
	}


	.logo-footer img{
		max-width: 100%;
		margin: 0 auto;
		padding-left: 0;
		display: block;
	}

	.social-media{
		display: flex;
		justify-content: center;
		padding: 0;
	}

	.servis-kami-footer,
	.support-footer {
	margin-left: 0;
	margin-top: 20px;
	}

	.detail-footer h3 {
	margin-top: 15px;
	}

	.head-footer-paragraf{
		font-size: 14px;
	}

	.servis-footer li{
		font-size: 14px;
	}

	.servis-kami-footer{
		margin-left: -50px;
	}

	.servis-kami-footer h3{
		font-size: 20px;
	}

	.support-footer{
		font-size: 20px;
		margin-left: -2rem;
	}

	.head-section-footer{
		font-size: 20px;
		color: #006cfa;
	}

	
	.img-top img{
		height: 250px;
	}

	.program-detail2{
		margin-left: 3px;
	}

	.img-hero {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-bottom: 30px;
		width: 100%;
	}


	.img-hero img {
		max-width: 300px;
		height: auto;
		display: block;
		/* margin: 0 10px 0 100px; */
		margin: 0 auto;
		border-radius: 8px;
	}

	.img-hero p{
		/* display: none; */
		position: absolute;
		top: 15px;
		left: 50%;
		transform: translateX(-50%);
		background-color: rgba(0, 47, 109, 0.8);
		color: white;
		padding: 5px 15px;
		border-radius: 20px;
		font-size: 14px;
		font-weight: 500;
		margin: 0;
		white-space: nowrap;
		z-index: 2;
	}

	.hero-feature{
		text-align: center;
		width: 100%;
		/* padding-left: 70px;
		margin-left: 0.1rem; */
		padding-left: 15px;
		padding-right: 20px;
		margin-left: auto;
		margin-right: auto;
	}

	.hero-feature h1 {
		font-size: 30px;
		margin-bottom: 10px;
	}


	.hero-feature p {
		font-size: 12px;
	}

	.hero-feature h5 span {
		font-size: 15px;
	}

	.hero-feature h3 mark{
		font-size: 14px;
		display: inline-block;
		padding: 3px 8px;
	}

	/* Main container adjustments */
	.value .container {
		padding: 0 10px;
	}

	/* Section title */
	.value-text h2 {
		font-size:  40px;
		text-align: center;
		margin-bottom: 20px;
	}

	.value-content .row {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	/* Make each value card take full width on mobile */
	.value-content .col {
		width: 310px;
		max-width: 100%;
		flex: 0 0 100%;
		margin-bottom: 15px;
		padding: 15px;
		margin-left: 2.8rem;
	}

	/* Adjust image size */
	.value-img img {
		width: 100px;
		height: auto;
	}

	/* Adjust text size */
	.value-content h4 {
		font-size: 18px;
		margin-top: 10px;
		margin-bottom: -5px;
	}

	.value-content p {
		font-size: 11px;
		line-height: 1.4;
	}

	.option-tour-img img{
		margin-left: 5px;
		width: 320px;
		height: 200px; 
	}
	
	.optiontour-heading{
		margin-right: 2rem;
	}

	/* Tour section container adjustments */
	.leisure .container {
	padding: 0 10px;
	}

	/* Title adjustment */
	.title-info {
	font-size: 20px;
	text-align: center;
	margin-bottom: 15px;
	}

	/* Card row adjustments */
	.leisure .row-cols-2 {
	margin: 0 -5px;
	}

	/* Card column sizing for proper grid */
	.leisure .col {
	padding: 5px;
	}

	.leisure .card-body {
	height: auto !important;
	min-height: 200px;
	padding: 12px;
	display: flex;
	flex-direction: column;
	}

	/* Card title adjustments */
	.leisure .card-title {
	font-size: 19px;
	margin-bottom: 5px;
	}

	.leisure .card-text {
	font-size: 15px;
	line-height: 1.4;
	margin-bottom: 8px;
	}

	/* Star rating size adjustment */
	.leisure .stars {
	font-size: 14px;
	margin-bottom: 5px;
  margin-top: 5px;
	}

	/* Card footer adjustments */
	.leisure .card-footer {
	padding: 8px 12px;
	}

	.leisure .card-footer p {
	margin-bottom: 10px;
	}

	.leisure .card-footer a {
	font-size: 16px;
	}

	.leisure .card-footer small {
	font-size: 15px;
	}

	/* Best seller ribbon adjustment */
	.best-seller img {
	width: 100%;
	height: auto;
	}

	/* Tour section adjustments */
	.tour-content {
		display: flex;
		flex-direction: column;
		gap: 5px;
	}

	.tour-content .box {
		width: 100%;
		margin-bottom: 20px;
	}

	.tour-content .box img {
		height: auto;
	}

	.tour-content .box h4 {
		font-size: 20px;
		margin-bottom: 5rem;
		margin-left: 10px;
	}

	.tour-content .box h6 {
		font-size: 15px;
		margin-bottom: 5.1rem;
		margin-left: 10px;
	}

	.tour-content .box p {
		font-size: 12px;
		margin-right: 6rem;
		margin-left: 10px;
		margin-bottom: 3rem;
	}

	.center-btn {
		margin-top: 10px;
		margin-bottom: 20px;
	}

	/* Gallery adjustments */
	.photo-list {
	overflow: hidden;
	}

	.wrapper-photo img {
	width: 100px;
	height: 100px;
	}

	/* Title adjustments for sections */
	.title-info {
	font-size: 20px;
	text-align: center;
	margin-bottom: 15px;
	}


	.title-info span {
	padding: 0 10px;
	}

	.imgpack-detail img{
		margin-top: 2rem;
	}

	.testi-slider{
		margin-top: 2rem;
	}
}


@media (max-width:599px){
	/* .img-hero img {
		max-width: 300px;
	} */

	.hero-feature h1 {
		font-size: 30px !important;
	}

	.hero-feature h3 mark {
		font-size: 15px !important;
	}

	/* .hero-feature p {
		font-size: 13px;
	}

	.img-top img{
		height: 550px;
	} */

	.card-body{
		height: 250px;
	}

	.carousel-caption h5{
		font-size: 30px;
	}

	.carousel-caption p{
		font-size: 10px;
	}

	.carousel-caption a{
		display: none;
	}

	.big-button{
		padding: 15px 40px;
		font-size: 22px;
	}

	.price-program{
		gap: 50px;
	}

	.price-program a{
		margin-left: 140px;
	}

	.price-program-child a{
		margin-left: 110px;
	}

	.place-visit-parent{
		padding-left: 60px;
	}

	.place-visit-parent h4{
		font-size: 30px;
		padding-right: 65px;
	}

	.btn-detail-program{
		padding: 15px 35px;
	}

	.feature-desc{
		top: 15px;
		width: 100%;
	}

	.nuspen-img{
		height: 200px;
	}

	.feature-desc h2{
		font-size: 30px;
		margin-bottom: 5px;
	}

	.feature-desc p{
		margin-bottom: 10px;
	}

	.feature-desc small{
		font-size: 13px;
	}

	.hero-section p{
		font-size: 13px;
	}

	.box-destination-text p{
		font-size: 14px;
	}

	.title-info{
		font-size: 30px;
	}

	.title-info span{
		border-bottom: none;
	}

	.card{
		height: 600px;
	}

	.card-text p{
		font-size: 12px;
	}

	/* .value-text h2{
		font-size: 35px;
	}

	.value-content h4{
		font-size: 15px;
	}

	.value-img{
		width: 90px;
		height: 90px;
	} */


	.services-parent h3{
		font-size: 30px;
	}

	.timeline-image img{
		margin-left: 0;
	}

	.before-header{
		display: none;
	}

	.testi-info h3{
		font-size: 40px;
		font-weight: 600;
		text-align: center;
	}

	.testi-info p{
		font-size: 13px;
		text-align: center;
	}

	.testi-info{
		padding-bottom: 50px;
		padding-right: 30px;
		padding-left: 25px;
	}	
	.testi-info a{
		padding: 10px 20px;
		margin-left: 8.5rem;
	}

	.title-info{
		padding-bottom: 12px;
		margin-bottom: 30px;
		font-size: 24px;
		padding-top: 20px;
		text-transform: uppercase;
		text-align: center;
		font-weight: 610;
	}

	.service-1{
		padding-left: 50px;
	}
	
	.service-2{
		padding-left: 50px;
	}

	.services img{
		width: 400px;
		height: 250px;
	}

	.btn-package-small{
		padding: 7px 20px;
		font-size: 12px;
	}
}

@media(max-width:400px){
	.feature-desc{
		width: 100%;
	}

	.feature-desc h2{
		font-size: 20px;
	}

	.feature-desc small{
		font-size: 10px;
	}

	.feature-desc p{
		font-size: 8px;
	}

	.card-body{
		height: 290px;
	}

	.carousel-caption{
		top: 10px;
	}

	.carousel-caption h5{
		font-size: 20px;
	}

	.carousel-caption p{
		font-size: 8px;
	}

	.carousel-caption a{
		display: none;
	}

	.card-text p{
		font-size: 15px;
	}

	.timeline-image img{
		margin-left: 0;
	}

	.before-header{
		display: none;
	}
	
	.program-detail2{
		margin-left: -10px;
	}

	.testi-info h3{
		font-size: 30px;
		font-weight: 600;
		text-align: center;
	}

	.testi-info p{
		font-size: 13px;
		text-align: center;
	}

	.testi-info{
		padding-bottom: 50px;
		padding-right: 30px;
		padding-left: 30px;
	}	
	.testi-info a{
		padding: 10px 20px;
		margin-left: 60px;
	}

	.service-1{
		padding-left: 50px;
	}
	
	.service-2{
		padding-left: 50px;
	}

	.services img{
		width: 400px;
		height: 250px;
	}
}

@media(min-width:768px)
{
	.logo{display: block;}
	
	.feature-desc{
		display: block;
	}

	.hero-section{
	text-align: center;
	padding: 30px 150px;/*atas dan bawah 30px kanan dan kiri 150px*/ }

	.wa-box{
		display: block;
	}
}