/*---------------------------------------
  Global Reset and Base Setup
---------------------------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  background-color: #fff;
  color: #222;
}

/*---------------------------------------
  Container & Section Padding
---------------------------------------*/
.container,
.container-fluid {
  padding-left: 15px;
  padding-right: 15px;
}

.section {
  padding: 60px 0;
  margin-bottom: 20px;
}

.section-sm {
  padding: 30px 0;
}

.section-lg {
  padding: 100px 0;
}

/*---------------------------------------
  Typography Helpers
---------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  line-height: 1.2;
}

.text-center {
  text-align: center !important;
}

.text-white {
  color: #fff !important;
}

.text-muted {
  color: #6c757d !important;
}
/*---------------------------------------
  Form controls
---------------------------------------*/
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
textarea,
select {
  border: 1px solid #ccc;        /* Dim border */
  padding: 3px 8px;              /* 3px vertical, 8px horizontal */
  border-radius: 4px;
  font-size: 0.95rem;
  width: 100%;
  transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #999;
  outline: none;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
}

textarea {
  resize: vertical;
  min-height: 100px;
}
/*---------------------------------------
  Reusable Buttons
---------------------------------------*/
.btn-primary {
  background-color: #0062cc;
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 6px;
  transition: 0.3s;
}

.btn-primary:hover {
  background-color: #004c9c;
}

.btn-outline {
  background-color: transparent;
  border: 2px solid #0062cc;
  color: #0062cc;
}

.btn-outline:hover {
  background-color: #0062cc;
  color: #fff;
}

/*---------------------------------------
  Cards
---------------------------------------*/
.card-custom {
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border-radius: 12px;
  overflow: hidden;
}

.card-custom img {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  width: 100%;
}

.card-body {
  padding: 20px;
}

/*---------------------------------------
  Navbar
---------------------------------------*/
.navbar-custom {background-color: #fff;  padding: 1rem;  border-bottom: 1px solid #eee;}

.navbar-custom .nav-link {  color: #333;  font-weight: 500;  margin-right: 20px;}

.navbar-custom .nav-link:hover {color: #0062cc;}
#snw {	position: sticky;	z-index: 999;	transition: top 0.3s;	top: -52px;}

#all-my-navs {	width: 100%;	z-index: 999;}

#nvd {	background: #C5752D !important;	position: fixed;	top: -50px;	left: 0px;	width: 100%;opacity: 0;	box-shadow: rgb(0 66 133 / 25%) 0px 4px 4px 0px;
}

#nvd .navbar .navbar-brand img {height: 48px !important;background: #fff;}

#nvd .bg-light {background: transparent !important;}

.nv-hvr {background: #870000 !important;}



/*---------------------------------------
  Hero Banner
---------------------------------------*/
.hero {
  background-size: cover;
  background-position: center;
  padding: 100px 0;
  color: white;
  position: relative;
  text-align: center;
}

.hero h1 {
  font-size: 2.5rem;
  font-weight: bold;
}

/*---------------------------------------
  Footer
---------------------------------------*/
.footer {
  background: #111;
  color: #ccc;
  padding: 40px 0;
}

.footer a {
  color: #ccc;
  text-decoration: none;
}

.footer a:hover {
  color: #fff;
}

/*---------------------------------------
  Activities, Destinations and region
---------------------------------------*/
.region {border: none;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);transition: transform 0.3s ease, box-shadow 0.3s ease;background-color: #fff;}
.region:hover {transform: translateY(-6px);box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);}
/* Image styling */
.region img {width: 100%;height: 220px;object-fit: cover;transition: transform 0.3s ease;}
.region:hover img {transform: scale(1.05);}
/* region body */
.region-body {padding: 15px 20px;}
/* Title and link styles */
.region-title h5 {font-size: 18px;font-weight: 600;margin: 0;}
.region-title h5 a {text-decoration: none;color: #190063;transition: color 0.3s ease;}
.region-title h5 a:hover {color: #4b0082; /* Slightly lighter shade for hover */}

/*---------------------------------------
  Packages
---------------------------------------*/

.package {background: #fff;border-radius: 10px;overflow: hidden;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);transition: transform 0.3s ease;position: relative;}
.package:hover {transform: translateY(-5px);}

.package-img {position: relative;}
.package-img img {width: 100%;height: auto;display: block;transition: 0.3s ease;}
.package-img .rev {position: absolute;top: 10px;left: 10px;background: #fff;color: #444;padding: 4px 10px;font-size: 0.75rem;border-radius: 4px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.package-img .rev i {color: #f39c12;margin-right: 2px;}

.package-info{display: flex; justify-content: space-between; padding: 10px;}
.package-img .price {background: #C5752D; padding:2px 5px; color: #F39C12;text-shadow: 0 1px 2px rgba(0,0,0,0.6);}
.package-img .price del {font-size: 0.8rem;margin-right: 5px;}
.package-img .price h2 {font-size: 1.25rem;margin: 0;font-weight: bold;}

.package-img .book {position: absolute;bottom: 10px;left: 10px;display: flex;flex-direction: column;gap: 6px;}
.package-img .book a {background: #190063;color: #fff;font-size: 0.8rem;padding: 6px 10px;text-decoration: none;border-radius: 4px;transition: 0.3s;}
.package-img .book a:hover {background: #870000;}
.package > h2 {font-size: 1.1rem;font-weight: 600;margin: 10px;}
.package > h2 a {text-decoration: none;color: #222;}
.package > h2 a:hover {color: #870000;}

.sm-only {display: none;}
.sm-price {font-size: 1rem;font-weight: bold;color: #190063;margin-bottom: 8px;}
.book-btn a {display: inline-block;background: #190063;color: #fff;padding: 8px 14px;font-size: 0.85rem;border-radius: 4px;text-decoration: none;transition: 0.3s;}
.book-btn a:hover {background: #290088;}

/* Container Styling */
.side-section {background-color: #f9f9f9;padding: 25px 20px;border: 1px solid #eee;border-radius: 8px;box-shadow: 0 1px 6px rgba(0,0,0,0.05);}

.side-section h2 {font-size: 1.4rem;margin-bottom: 20px;color: #fff;text-transform: uppercase;font-weight: 600;background-color: #870000;}

/* Form Section */
.down-section {font-size: 0.95rem;}

.form-control {border: 1px solid #ccc;border-radius: 5px;padding: 3px 10px;font-size: 0.95rem;width: 100%;transition: border-color 0.3s, box-shadow 0.3s;}

.form-control:focus {border-color: #999;outline: none;box-shadow: 0 0 3px rgba(0,0,0,0.1);}

textarea.form-control {min-height: 100px;resize: vertical;}

/* Error Message */
.error {font-size: 0.85rem;color: #d9534f;margin-bottom: 5px;}

/* Button */
.btn-primary {background-color: #190063;border: none;padding: 8px 16px;font-size: 1rem;color: #fff;border-radius: 4px;transition: background 0.3s;display: inline-block;margin-top: 10px;width: 100%;}

.btn-primary:hover {background-color: #2d0073;}

/* Phone & WhatsApp */
.side-section a {display: inline-block;margin-top: 10px;color: #190063;font-weight: 500;font-size: 0.95rem;text-decoration: none;}

.side-section a i {margin-right: 6px;color: #25D366;}




/*---------------------------------------
  trip page
---------------------------------------*/
.icon-all-top { margin-bottom: 40px;}
.icon-all-top h2 {font-size: 1.5rem; margin-bottom: 20px; color: #190063;}

.all-icon-detail { display: flex; flex-wrap: wrap; gap: 20px;}
.all-icon-detail li.content { flex: 1 1 200px; background: #f9f9f9; border-radius: 6px; padding: 10px 15px;
  display: flex;  align-items: center;  gap: 10px;  box-shadow: 0 1px 3px rgba(0,0,0,0.05);}
.all-icon-detail .label { font-size: 0.875rem;  color: #666;}
.all-icon-detail strong {  display: block;  font-weight: 600;  color: #222;}


/*---------------------------------------
  Posts
---------------------------------------*/

/*---------------------------------------
  Media Queries
---------------------------------------*/
@media (min-width: 576px) {
  .hero h1 {
    font-size: 2.8rem;
  }
}

@media (min-width: 768px) {
  .hero h1 {
    font-size: 3.2rem;
  }

  .section {
    padding: 80px 0;
  }
}

@media (min-width: 992px) {
  .hero h1 {
    font-size: 3.5rem;
  }

  .navbar-custom .nav-link {
    margin-right: 30px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}