@import url("https://fonts.googleapis.com/css2?family=Merienda:wght@300..900&display=swap");
* {
  margin: 0;
  padding: 0;
  box-shadow: none;
  box-sizing: border-box;
  /*font-family: 'Times New Roman', Times, serif;*/
}
html {
  scroll-behavior: smooth;
}

.custom-header {
  min-height: 80px; /* Changed from height: 70px */
  height: auto;
  background-color: white;
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

.col-logo img {
  height: 90px; /* Keep your 80px preference */
  width: auto;
  float: none; /* Let Bootstrap Grid handle the alignment */
}

/* Update the circle to Pink */

.header-red-circle {
  background-color: #ffffff !important;
  width: 90px; /* Perfectly fits your 80px logo */
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important; /* Perfect Circle */

  /* 1. PINK BORDER: Matches your Nav pink exactly */
  border: 3.5px solid #eb62ad !important;

  padding: 12px;
  box-shadow: 0 4px 15px rgba(235, 98, 173, 0.2); /* Soft Pink Shadow */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  margin: 5px auto; /* Centers the logo */
}

/* Ensure the 80px logo sits inside the 90px circle nicely */
.header-red-circle img {
  max-height: 65px !important; /* Scaled for visibility */
  width: auto;
  display: block;
  object-fit: contain;
}

/* 2. HOVER EFFECT: Glows Pink to match your Navbar */
.header-red-circle:hover {
  transform: scale(1.08); /* Gentle "pop" effect */
  border-color: #eb62ad !important;
  box-shadow: 0 0 25px rgba(235, 98, 173, 0.6); /* Vibrant Pink Glow */
}

.header-contact {
  margin-top: 0 !important;
  line-height: 1.2;
}

.header-red-circle {
  margin: 5px 0;
  /* ... keep your existing pink border and shadow code here ... */
}
.col-contus {
  display: block;
  float: right;
  list-style: none;
  background-color: white;
  text-align: center;
  height: 50px;
  margin-top: 10px;
}

.col-contus a {
  text-decoration: none;
  text-align: left;
  font-size: 15px;
  color: black;
  font-weight: bold;
  font-family: "Times New Roman", Times, serif;
}

.col-loginp a {
  height: 60px;
  background-color: white;
  text-align: center;
  display: block;
  float: right;
  padding-top: 7px;
  padding-left: 20px;
}

.col-loginp li {
  height: 10px;
  font-size: 15px;
  font-weight: bold;
  list-style: none;
  display: inline;
  word-spacing: 0;
  padding: 10px;
}

.col-loginp li a {
  color: black;
  text-decoration: none;
  font-size: 15px;
  font-weight: bolder;
  font-family: "Times New Roman", Times, serif;
}
.navbar {
  margin-left: -15px; /* Offset .container-fluid padding */
  margin-right: -15px;
  width: auto; /* Allow it to stretch */
  z-index: 1050 !important;
}

/* 1. Force the Navy Background and Pink Border */
.custom-nav,
.navbar.custom-nav {
  background-color: #102a43 !important; /* Deep Navy */
  border-top: none !important;
  background-image: none !important; /* Removes any default gradients */
}

/* 2. Fix the Nav Links (Ensure no red on hover) */
.custom-nav .nav-link {
  color: #ffffff !important;
}

.custom-nav .nav-link:hover,
.custom-nav .nav-link.active {
  color: #eb62ad !important; /* Changes to Pink, NOT Red */
  background-color: transparent !important;
}

/* Change the 3-line 'hamburger' icon to white */
.navbar-toggler-icon {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* Optional: Change the border color of the toggle button to match your pink */
.navbar-toggler {
  border-color: rgba(235, 98, 173, 0.5) !important;
}

/* Sidebar Container */

/* --- 1. MAIN SIDEBAR CONTAINER --- */
/* --- 1. MAIN SIDEBAR CONTAINER --- */
/* --- 1. MAIN SIDEBAR CONTAINER --- */
.dropdown-item {
  background: #ffffff;
  padding: 10px;
  width: 150px; /* Fixed width for consistent cascading */
  display: block;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  position: relative; /* Base for cascading */
}

/* --- 2. CENTERED PURPLE HEADER --- */
.all-categories {
  display: flex !important;
  justify-content: center; /* Centers text horizontally */
  align-items: center; /* Centers text vertically */
  padding: 12px 10px;
  margin-bottom: 12px !important;
  background-color: #d0c5e6;
  color: white !important;
  border-radius: 8px;
  font-weight: 700 !important;
  font-size: 15px;
  text-decoration: none;
  line-height: 1.2;
  text-align: center;
}

/* --- 3. MENU ITEMS (Centered Text + Absolute Arrows) --- */
.dropdown-item ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.dropdown-item ul li {
  position: relative; /* Anchor for the next level */
  margin-bottom: 4px;
}

.dropdown-item ul li a {
  text-decoration: none;
  color: #444;
  display: flex;
  justify-content: center; /* AS REQUESTED: Centered text */
  align-items: center;
  padding: 10px 25px; /* Side padding for the absolute arrow */
  font-weight: 500;
  font-size: 15px;
  border-radius: 8px;
  line-height: 1.2;
  white-space: normal;
  text-align: center;
  transition: all 0.2s ease;
  position: relative;
}

/* Purple Hover State for ALL levels */
.dropdown-item ul li:hover > a {
  background-color: #6f42c1;
  color: white !important;
}

/* --- 4. THE ARROWS (Pinned to Right) --- */
.dropdown-item ul li:has(.sub-dropdown-item) > a::after,
.sub-dropdown-item ul li:has(.subsub-dropdown-item) > a::after {
  content: "\203A";
  position: absolute; /* Keeps arrow right while text stays centered */
  right: 12px;
  font-weight: bold;
  font-size: 1.2rem;
}

/* --- 5. CASCADING LOGIC (White Background) --- */
.sub-dropdown-item,
.subsub-dropdown-item {
  position: absolute;
  padding-top: 20px;
  top: 0;
  left: 100%; /* CASCADE: Pops to the right of parent */
  display: none;
  min-width: 130px;
  padding-left: 0px; /* 'Bridge' to keep menu open while moving mouse */
  z-index: 1000;
}

/* Sub-menu box styling */
.sub-dropdown-item ul,
.subsub-dropdown-item ul {
  background: #ffffff; /* Clean White Background */
  border-radius: 12px;
  box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.1);
  padding: 8px;
  border: 1px solid #f0f0f0;
}

/* --- 6. THE FADE-IN ANIMATION --- */
.dropdown-item ul li:hover > .sub-dropdown-item,
.sub-dropdown-item ul li:hover > .subsub-dropdown-item {
  display: block;
  /* Triggers the smooth fade and slide effect */
  animation: smoothFade 0.25s ease-out;
}

@keyframes smoothFade {
  from {
    opacity: 0;
    transform: translateX(10px); /* Slides in slightly from the right */
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Rounds the entire card */
.luxury-card {
  border-radius: 20px !important; /* Adjust 20px to your preference */
  overflow: hidden; /* This clips the image to the rounded corners */
}

/* Rounds only the top corners of the image container */
.image-viewport {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  overflow: hidden;
}

/* Optional: Round the 'Book Now' button */
.btn-luxury {
  border-radius: 50px !important; /* Makes it a pill-shaped button */
}

#wrapper {
  border: white;
}

/* Brreadcrumb Start ----*/
/* 1. Main Banner Container */

.breadcrumb-hero,
#mediaSlider {
  margin-top: 0 !important; /* Let the header push it down naturally */
}
.breadcrumb-hero {
  width: 100%;
  height: 250px; /* Adjusted height for better balance */
  background-image: url("../images/s1.jpg"); 
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Parallax effect */
  position: relative;

  /* FIX: Pushes the entire banner BELOW the navbar */
  /* Adjust 130px to match the total height of your Logo + Nav rows */
  margin-top: 100px;

  display: block;
  overflow: hidden;
}

/* 2. Dark Overlay & Text Centering */
.breadcrumb-overlay {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5); /* slightly darker for better readability */

  /* This centers your "Home / Contact" text vertically and horizontally */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* 3. Text & Separator Styling */
.breadcrumb-item a {
  color: #ffffff !important;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.2rem;
}

.breadcrumb-item.active {
  color: #eb62ad !important; /* Using your pink brand color for the active page */
  font-size: 1.2rem;
}

/* White Separator (/) */
.breadcrumb-item + .breadcrumb-item::before {
  color: white !important;
  font-size: 1.2rem;
  padding: 0 10px;
}

/* Breadcrumb End--*/

.fcontact {
  width: 50%;
  background-color: rgb(228, 208, 208);
  height: 400px;
  text-align: left;
  float: inline;
  padding-left: 0px;
}

.card-img-top {
  width: 250px;
  height: 250px;
}

.containter-1 {
  height: 400px;
  margin-left: 30px;
  margin-right: 0px;
  margin-top: 40px;
}

/*----Flight----*/

.card-img-top {
  width: 350px;
  height: 200px;
  align-items: center;
  margin-top: 10px;
  border-radius: 10px;
}

.main-display-container {
  width: 98%;
  height: 4500px;
  margin-left: 10px;
  margin-top: 60px;
}
.container1 {
  width: 70%;
  height: 2500px;
  margin-left: 50px;
}

.card-img {
  width: 95%;
  height: 600px;
  margin-top: 10px;
  border-radius: 10px;
  margin-left: 30px;
}

.container2 {
  width: 100%;
  height: 700px;
}

.main-container {
  height: 400px;
  width: 100%;
}

/*contact Page*/

.con-map {
  height: 700px;
  width: 80%;
  background-color: white;
  border-radius: 20px;
  margin-top: 100px;
  margin-left: 200px;
  margin-bottom: 200px;
}

#map {
  height: 500px;
  width: 80%;
  background-color: gray;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow-y: auto;
  height: 400px;
  border: 2px solid #ccc;
  padding: 10px;
  background-color: thistle;
}

.image-item {
  flex: 1 1 calc(33.333% - 20px);
  box-sizing: border-box;
  text-align: center;
}

.product-gallery {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.main-image {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 8px;
}
.thumbnails {
  display: flex;
  gap: 10px;
}
.thumbnail {
  width: 80px;
  height: 80px;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid transparent;
}
.thumbnail:hover {
  border-color: #007bff;
}

/*----carousal---*/
/* This "props up" the carousel so you can see it */
/* Force Carousel Height so it's visible */

/*
.carousel-item {
  margin-top: 100px;
  height: 500px;
  background: #000;
}
.carousel-item img,
.carousel-item video {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  object-fit: cover;
}
*/
/* Ensure the slider starts exactly below the navbar */
#mediaSlider {
  margin-top: 100px; /* Adjust this to match your navbar height */
  width: 100%;
  overflow: hidden;
}

.carousel-item {
  height: 500px; /* Fixed height for desktop */
  background: #000;
}

.carousel-item img,
.carousel-item video {
  width: 100vw; /* 100% of the Viewport Width */
  height: 100%; /* Fills the 500px height */
  margin: 0;
  padding: 0;
  object-fit: cover; /* Stretches to fill 100% width and height */
  object-position: center; /* Keeps the middle of the image visible */
}




/* Responsive adjustment for Mobile */

/*---contact page--->
/*updated on 21/03/2026*/
.contact-custom-style {
  height: 100px;
}

/*------Contact Page---*/

/* Premium Modern Styling */
.hero-section {
  background: linear-gradient(135deg, #ffffff 0%, #f1f4f9 100%);
  border-radius: 24px;
  border: 1px solid #e2e8f0;
}

/* Form Input Styling */
.contact-form input,
.contact-form textarea,
.contact-form select {
  width: 100%;
  padding: 12px 16px !important;
  background-color: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
  border-radius: 12px !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease-in-out;
}

.contact-form input:focus,
.contact-form textarea:focus {
  background-color: #ffffff !important;
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 4px rgba(13, 110, 253, 0.1) !important;
  outline: none;
}

/* Map Styling */
.map-container {
  border: 8px solid white;
  transition: transform 0.3s ease;
}

.icon-box {
  width: 45px;
  height: 45px;
  transition: all 0.3s ease;
}

.card:hover .icon-box {
  transform: scale(1.1);
}

/* style.css */

body {
  background-color: #f8f9fa; /* Modern off-white */
  /* background-color: #f0f4f8; /* Un-comment this line for a Sky Blue tint */
  margin: 0;
  padding: 0;
}

/* Ensure your cards remain white and stand out against the background */
.card {
  background-color: #ffffff !important;
  border: none;
}

/* Optional: Add a subtle transition if you change colors later */
body {
  transition: background-color 0.3s ease;
}
/** New */

/**trending Now*/

@import url("https://fonts.googleapis.com");

:root {
  --primary-cobalt: #1a4a8e;
  --accent-blue: #0091ea;
  --text-main: #333a40;
  --text-muted: #6c757d;
  --bg-light: #f8f9fa;
  --border-color: #dee2e6;
}

body {
  font-family: "Lato", sans-serif;
  color: var(--text-main);
  line-height: 1.6;
}

/* Enhanced Itinerary Card */
.itinerary-card {
  border: none;
  border-top: 4px solid var(--primary-cobalt);
  background: #ffffff;
  padding: 24px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease;
}

.itinerary-card:hover {
  transform: translateY(-2px);
}

/* Professional Badge */
.duration-badge {
  background: var(--bg-light);
  padding: 12px;
  border-radius: 4px;
  text-align: center;
  border: 1px solid var(--border-color);
  min-width: 110px;
  /* Optional: subtle arrow shape if desired */
}

/* Modern Typography for Headings */
h4.package-title {
  color: var(--primary-cobalt);
  font-weight: 700;
  letter-spacing: -0.5px;
  margin-bottom: 20px;
}

/* Clean Accommodation Table */
.table-hotel {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border-color);
}

.table-hotel thead {
  background-color: var(--bg-light);
  color: var(--primary-cobalt);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 1px;
}

.table-hotel td,
.table-hotel th {
  padding: 16px;
  border-bottom: 1px solid var(--border-color);
}

/* Container and Accordion Item */
.itinerary-accordion .accordion-item {
  border: 1px solid #56dbec !important; /* Very soft light blue border */
  margin-bottom: 12px !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(162, 168, 76, 0.1); /* Subtle sky blue shadow */
}

/* Header/Button with Baseline Alignment */
.itinerary-accordion .accordion-button {
  background-color: #586ba5 !important;
  display: flex !important;
  align-items: baseline !important; /* KEEPS DAY AND ACTIVITY ON SAME LEVEL */
  padding: 18px 20px;
  font-size: 15px !important;
  box-shadow: none !important;
}

/* Light Sky Blue Tint when Expanded (Matches your image's active look) */
.itinerary-accordion .accordion-button:not(.collapsed) {
  background-color: rgb(
    123,
    147,
    189
  ) !important; /* Extremely light cyan tint */
  border-bottom: 1px solid #d1f3f8;
}

/* DAY 01: Using your EXACT Color #90e0ef */
.day-label {
  color: white !important; /* Slightly darker version of #90e0ef for better readability */
  font-weight: 800 !important; /* Extra Bold for emphasis */
  margin-right: 12px; /* Tight gap as requested */
  white-space: nowrap;
  flex-shrink: 0;
}

/* ACTIVITY TITLE: Using a dark slate for maximum readability */
.day-title {
  color: white !important; /* Darker for contrast */
  font-weight: 700 !important;
  text-transform: uppercase; /* Bold uppercase as per image */
  line-height: 1.4;
}

/* Custom +/- Icon using your color #90e0ef */
.itinerary-accordion .accordion-button::after {
  background-image: none !important;
  content: "+";
  color: white !important; /* Using the more readable cyan */
  font-weight: bold;
  font-size: 20px;
}

.itinerary-accordion .accordion-button:not(.collapsed)::after {
  content: "−";
}

/* Inclusions & Exclusions Styling */
.inc-exc-container {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eee;
  overflow: hidden;
}

.inc-header {
  background-color: #e8f5e9; /* Light Green */
  color: #2e7d32;
  padding: 12px 20px;
  font-weight: bold;
  border-bottom: 2px solid #c8e6c9;
}

.exc-header {
  background-color: #ffebee; /* Light Red */
  color: #c62828;
  padding: 12px 20px;
  font-weight: bold;
  border-bottom: 2px solid #ffcdd2;
}

.list-item-custom {
  padding: 12px 20px;
  border-bottom: 1px solid #f8f9fa;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background 0.2s;
}

.list-item-custom:hover {
  background-color: #fcfcfc;
}

.list-item-custom:last-child {
  border-bottom: none;
}

.check-icon {
  color: #4caf50;
  font-size: 1.1rem;
}
.cross-icon {
  color: #f44336;
  font-size: 1.1rem;
}

/*package level Start */

/* Custom background colors based on package level */
.bg-standard {
  background-color: #6c757d !important;
}
.bg-deluxe {
  background-color: #4a90e2 !important;
}
.bg-premium {
  background-color: #1a4a8e !important;
}

/*package level end */

/* Hotel table start */

/* Table Styling */
.custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.custom-table thead th {
  background-color: #266bb0;
  color: #333;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.85rem;
  padding: 15px;
  border-bottom: 2px solid #dee2e6;
}

.custom-table tbody td {
  padding: 12px 15px;
  vertical-align: middle;
  border-bottom: 1px solid #eee;
  background-color: #fff;
}

/* Row Hover Effect */
.custom-table tbody tr:hover td {
  background-color: #fcfcfc;
}

/* Level Headers - Colorful Themes */
.level-header {
  padding: 12px 20px;
  font-weight: bold;
  color: white;
  border-radius: 8px 8px 0 0;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Dynamic Colors based on your 'grouper' name */
.bg-luxury {
  background: linear-gradient(45deg, #4b6cb7, #182848);
}
.bg-standard {
  background: linear-gradient(45deg, #11998e, #38ef7d);
}
.bg-budget {
  background: linear-gradient(45deg, #ff9966, #ff5e62);
}

/* Fallback for any other level name */
.level-header:not([class*="bg-"]) {
  background-color: #6c757d;
}

.meal-badge {
  font-weight: 500;
  border-radius: 20px;
  padding: 5px 12px !important;
  background-color: #f1f3f5;
  color: #495057;
  border: 1px solid #dee2e6;
}

/* Hotel table end */