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

html, body {
  width: 100%;
  margin: 0 auto;
  overflow-x: hidden; 
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

}

body {
  padding-top: 0;
  background-color: #F8F9FA; /* Slider bilkul top se start hoga */
  font-family: 'Outfit', sans-serif;
  overflow-y: hidden;
}
body.modal-open {
    padding-right: 0 !important;
    overflow-y: hidden !important;
}
.site-icon {
    height: 2px;
    /* Purple elements ko dark shade dene ke liye */
    filter: hue-rotate(260deg) brightness(0.7) contrast(1.2);
}

.top-bar-fixed .container,
.top-bar-fixed .container-fluid,
.footer-container,
.footer-wrapper {
    max-width: 1920px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}
/* Top Bar Full Width Fixed */
/* ==========================================================================
   1. Top Bar Fixed Styling
   ========================================================================== */
/* ==========================================================================
   1. Top Bar Fixed (Ab Yeh Normal Scroll Hogi)
   ========================================================================== */
/* ==========================================================================
   1. TOP BAR STYLING & RESPONSIVE FIXES
   ========================================================================== */
.top-bar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1050;
  width: 100%;
  background-color: #ffffff;
  font-size: 14px;
}

.bg-dark-blue {
  background-color: #ffffff;
}

.shadow-all-sides {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 8px rgba(0, 0, 0, 0.04) !important;
}

/* Logo Responsive Size */
.site-logo-img {
  width: 220px;
  height: 70px;
  object-fit: contain;
}

/* Blog Link Styling */
.blog-link-text {
  font-size: 17px;
  color: #6C3FB5;
}

/* Outlined Buy Now Button */
.btn-custom-outline {
  display: inline-block;
  padding: 8px 24px;
  color: #ffffff;
  border: 2px solid #f56822;
  background-color: #f56822;
  border-radius: 5px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.btn-custom-outline:hover {
  background-color: #6C3FB5;
  color: #FA5400;
  border-color: #6C3FB5;
}


/* ==========================================================================
   2. MAIN HEADER & NAVBAR STYLING
   ========================================================================== */
.top-bar-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1050 !important;
  background-color: #ffffff !important;
}

.site-header-area {
  position: relative; 
  width: 100%;
  max-width: 1800px;
margin: 85px auto 0 auto !important;
  height: auto;
  z-index: 1040;
  padding: 0 70px;
  background: #6C3FB5; 
}

.site-header-area .navbar {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  display: flex;
  align-items: center !important;
}

/* Jab JS se sticky class add hogi tab yeh chalega */
.site-header-area.sticky {
  position: fixed !important;
  top: 85px !important; /* Top bar ke theek neeche fix ho jayega */
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  margin: 0 auto !important;
  width: 100% !important;
  max-width: 1800px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  background-color: #6C3FB5 !important;
  z-index: 1040 !important;
}

.site-header-area.sticky .navbar {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
}

/* Navbar Menu Alignment */
.custom-nav-menu .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.custom-nav-menu .nav-item {
  position: relative;
  flex: 1 !important;
  text-align: center !important;
}

.custom-nav-menu .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  font-weight: 500;
  color: #fff !important;
  white-space: nowrap !important;
  padding: 8px 0 !important;
  font-family: Arial, Helvetica, sans-serif;
}

.custom-nav-menu .nav-link:focus,
.custom-nav-menu .nav-link:active,
.custom-nav-menu .nav-link.active,
.custom-nav-menu .dropdown-toggle.show,
.custom-nav-menu .show > .nav-link {
  font-weight: 500 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Hover Underline Effect (Fixed thickness and smooth rendering) */
.custom-nav-menu .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 5px; 
  width: 0;
  height: 2px; /* 1px se badhakar 2px kiya taaki proper visibility rahe */
  background-color: #fff; 
  transition: width 0.3s ease-in-out;
  will-change: width; /* Transition ko flicker ya mota hone se rokne ke liye */
}

.custom-nav-menu .nav-link:hover::after,
.custom-nav-menu .dropdown-toggle.show::after,
.custom-nav-menu .nav-link.active::after {
  width: 100%;
}

.dropdown-toggle.no-arrow::after {
  display: none !important;
}


/* ==========================================
   MULTI-COLUMN MEGA MENU STYLING (Desktop)
   ========================================== */
.site-header-area .custom-nav-menu .dropdown {
  position: static !important;
}

.site-header-area .dropdown-menu {
  border: none !important;
  border-radius: 0px !important;
  border-top: 2px solid #6C3FB5 !important;
  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.12) !important;
  padding: 25px 30px !important;
  background-color: #ffffff !important;
  margin-top: 0px !important; 
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 90% !important;
  max-width: 600px !important;
  display: none !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 15px 30px !important;
  max-height: 480px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

@media (min-width: 992px) {
  .site-header-area .custom-nav-menu .dropdown:hover .dropdown-menu,
  .site-header-area .dropdown-menu.show {
    display: grid !important;
    margin-top: 0px !important;
  }
}

.site-header-area .dropdown-menu .dropdown-item {
  padding: 8px 0 !important;
  color: #64748b !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out;
  white-space: normal !important;
  background: transparent !important;
}

.site-header-area .dropdown-menu .dropdown-item:hover {
  background-color: transparent !important;
  color: #FA5400 !important;
  padding-left: 5px !important;
}

.site-header-area .dropdown-menu .dropdown-header-title {
  grid-column: span 3;
  font-size: 18px;
  font-weight: 700;
  color: #6C3FB5;
  padding-bottom: 10px;
  border-bottom: 1px solid #eaeaea;
  margin-bottom: 10px;
}

/* Custom Scrollbar */
.site-header-area .dropdown-menu::-webkit-scrollbar {
  width: 6px;
}
.site-header-area .dropdown-menu::-webkit-scrollbar-thumb {
  background: #6C3FB5;
  border-radius: 4px;
}


/* ==========================================================================
   3. RESPONSIVE MEDIA QUERIES (All Screens Adaptation)
   ========================================================================== */

/* Tablets & Small Laptops (Max-width: 991px) */
/* Mobile & Tablet Devices (Max-width: 991px) - Ab yeh 768px se upar 991px tak sabhi screens par kaam karega */
@media (max-width: 992px) {
  /* Aapka baaki saara code wahi rahega */
  .site-logo-img {
    width: 150px;
    height: 48px;
  }
  
  .top-bar-fixed {
    font-size: 12px;
  }

  .site-header-area {
    margin-top: 63px !important; 
    z-index: 10000 !important;
    padding: 0 15px !important;
    padding-top: 2px !important;
    padding-bottom: 4px !important;
  }

  .site-header-area.sticky {
    top: 60px !important; 
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    z-index: 100 !important;
  }

  .blog-link-text {
    font-size: 14px;
    margin-right: 10px !important;
  }

  .btn-custom-outline {
    padding: 6px 14px;
    font-size: 13px;
  }

  .site-header-area .navbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .custom-nav-menu .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .custom-nav-menu .nav-item {
    width: 100% !important;
    flex: unset !important;
    text-align: left !important;
  }

  .custom-nav-menu .nav-link {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }

  .site-header-area .dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-shadow: none !important;
    grid-template-columns: 1fr !important;
    display: none !important;
  }

  .site-header-area .dropdown-menu.show {
    display: block !important;
  }
}
/* Mobile Devices (Max-width: 768px) */
@media (max-width: 768px) {
  .site-logo-img {
    width: 150px;
    height: 48px;
  }
    .top-bar-fixed {
    font-size: 12px;
  }

  .site-header-area {
    margin-top: 105px !important; /* Chote mobile ke liye exact margin */
        z-index: 100 !important;
  }

  .site-header-area.sticky {
    top: 105px !important; /* Sticky hone par top bar ke niche perfect fit */
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    z-index: 100 !important;
  }


  .blog-link-text {
    font-size: 14px;
    margin-right: 10px !important;
  }

  .btn-custom-outline {
    padding: 6px 14px;
    font-size: 13px;
  }
}

/* Very Small Phones (Max-width: 480px) */
@media (max-width: 480px) {
  .site-logo-img {
    width: 130px;
    height: 42px;
  }

  .top-bar-fixed {
    font-size: 12px;
  }

  .site-header-area {
    margin-top: 95px !important; /* Chote mobile ke liye exact margin */
  }

  .site-header-area.sticky {
    top: 97px !important; /* Sticky hone par top bar ke niche perfect fit */
    padding-top: 3px !important;
    padding-bottom: 3px !important;
    z-index: 100 !important;
  }

  .blog-link-text {
    font-size: 13px;
  }

  .btn-custom-outline {
    padding: 5px 10px;
    font-size: 12px;
  }
}
/* ==========================================================================
   4. Hero Section Styling
   ========================================================================== */
.hero-section-wrapper {
    position: relative;
    width: 100vw; 
    margin-left: calc(-50vw + 50%); 
    margin-right: calc(-50vw + 50%);
    max-width: 100vw;
    height: auto;
    min-height: 550px;
    display: flex;
    align-items: center;
    margin-top: -20px; 
    justify-content: flex-start;
    overflow: hidden; /* Slider ke bahar image na nikle */
}

/* Har slide ke liye background image setting */
.hero-slide-item {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex !important;
    align-items: center;
    min-height: 550px;
}

.hero-section-wrapper .hero-content-box {
    position: relative;
    z-index: 2;
    text-align: left; 
    padding-left: 45px; 
    padding-right: 20px;
}

.hero-main-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 3.6rem; 
    font-weight: 600;
    letter-spacing: -1.5px;
    line-height: 1.15;
    display: flex;
    flex-wrap: wrap; 
    perspective: 1000px;
    color: white;
    text-shadow: 1px 1px 0px #000, 2px 2px 0px #444;
}
.hero-main-title1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.2rem, 4vw, 3.6rem) !important; 
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.2;
    
    /* Flex ko poori tarah band karne ke liye */
    display: block !important;
    float: none !important;
    flex-wrap: nowrap !important;
    
    color: white;
    text-shadow: 1px 1px 0px #000, 2px 2px 0px #444;
    
    /* Word break rokne ke liye */
    word-break: normal !important;
    overflow-wrap: normal !important;
    white-space: normal !important;
    max-width: 100% !important;
}

/* Agar spans ki wajah se toot raha hai toh spans ko inline karein */
.hero-main-title1 span {
    display: inline !important;
}
/* --- Subtitle ki spacing set karein --- */
.hero-subtitle {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 400; 
    line-height: 1.6;
    max-width: 750px; 
    margin-top: 10px; /* Upar wale text se distance maintain karega */
    margin-bottom: 25px;
}

.hero-subtitle span {
   background: rgba(11, 28, 63, 0.615); /* Thoda aur solid dark background taaki text clear dikhe */
    color: #ffffff;
    padding: 12px 18px;
    border-radius: 8px;
    display: inline-block; /* Yeh zaroori hai taaki multi-line text theek se block banaye */
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    border-left: 4px solid #FA5400;
    backdrop-filter: blur(6px);
}
/* Desktop Search Bar Width */
.mobile-search-box {
    width: 420px; /* Isse desktop par box proper lamba rahega */
    max-width: 100%;
}

/* ==========================================
   SEARCH OVERLAY MODAL STYLING
   ========================================== */

.search-overlay-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

.search-overlay-container.show-modal,
.search-overlay-container.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Box Styling */
.search-modal-box {
    background: #ffffff;
    width: 100%;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    transform: translateY(-20px);
    transition: transform 0.3s ease-in-out;
}

.search-overlay-container.show-modal .search-modal-box,
.search-overlay-container.active .search-modal-box {
    transform: translateY(0);
}

/* Modal Header Input */
.search-modal-header {
    display: flex;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid #eaeaea;
}

.search-modal-header i {
    font-size: 16px;
    margin-right: 12px;
}

.search-modal-header input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 16px;
    color: #333;
    background: transparent;
}

/* Modal Body & List */
.search-modal-body {
    max-height: 380px;
    overflow-y: auto;
    padding: 15px 20px;
}

.search-section-title {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    margin-top: 10px;
}

.search-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    text-decoration: none;
    color: #333;
    border-radius: 8px;
    transition: background 0.2s;
    margin-bottom: 4px;
}

.search-item:hover {
    background-color: #e8ecf5;
}

.search-item i {
    font-size: 14px;
    color: #f56822;
    margin-right: 15px;
    background: #e8ecf5;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.search-item .item-title {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #222;
}

.search-item .item-sub {
    display: block;
    font-size: 12px;
    color: #777;
}

/* Scrollbar design */
.search-modal-body::-webkit-scrollbar {
    width: 6px;
}
.search-modal-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

/* Custom Slider Left & Right Buttons styling */
.custom-slider-arrow {
    width: 45px !important;
    height: 45px !important;
    background-color: #6c3fb5c9 !important; 
    border-radius: 50% !important;
    top: 85% !important; /* Thoda upar kiya hai taaki mobile/tablet mein cut na ho */
    transform: translateY(-50%) !important;
    position: absolute !important;
    z-index: 10 !important;
    opacity: 1 !important; 
    border: none !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.custom-slider-arrow:hover {
    background-color: #fd7734 !important; 
}

.custom-slider-arrow .carousel-control-prev-icon,
.custom-slider-arrow .carousel-control-next-icon {
    filter: invert(1) grayscale(100%) brightness(200%); 
    width: 18px;
    height: 18px;
}

.carousel-control-prev.custom-slider-arrow {
    left: 30px !important; /* Fixed positioning taaki screen ke hisaab se sahi jagah rahe */
}

.carousel-control-next.custom-slider-arrow {
    right: 30px !important;
}


/* ==========================================
   RESPONSIVE MEDIA QUERIES (ALL DEVICES)
   ========================================== */

@media (max-width: 1199px) {
    .hero-section-wrapper .hero-content-box {
        padding-left: 50px;
        padding-right: 50px; /* Right padding add kar di equal gap ke liye */
    }
    .hero-main-title,
    .hero-main-title1 {
        font-size: 3.2rem !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hero-section-wrapper {
        min-height: 500px;
    }
    .hero-slide-item {
        min-height: 500px;
    }
    .hero-section-wrapper .hero-content-box {
        padding-left: 35px;
        padding-right: 35px; /* Dono taraf equal gap (35px) */
    }
    .hero-main-title,
    .hero-main-title1 {
        font-size: 2.8rem !important;
        letter-spacing: -1px;
    }
    .hero-subtitle {
        font-size: 1.3rem;
        max-width: 650px;
    }
    .mobile-search-box {
        width: 380px !important;
    }
    /* Tablet screens ke liye arrows ki position aur size */
    .custom-slider-arrow {
        width: 42px !important;
        height: 42px !important;
        top: 88% !important;
    }
    .carousel-control-prev.custom-slider-arrow {
        left: 25px !important;
    }
    .carousel-control-next.custom-slider-arrow {
        right: 25px !important;
    }
}

@media (max-width: 767px) {
    .hero-section-wrapper {
        min-height: 450px;
    }
    .hero-slide-item {
        min-height: 450px;
    }
    .hero-section-wrapper .hero-content-box {
        padding-left: 20px;
        padding-right: 20px; /* Mobile par dono taraf equal 20px gap */
    }
    .hero-main-title,
    .hero-main-title1 {
        font-size: 2rem !important;
        letter-spacing: -1px;
    }
    .hero-subtitle {
        font-size: 1.1rem;
        margin-bottom: 20px !important;
    }
    .mobile-search-box {
        width: 100% !important;
        max-width: 320px;
    }
    /* Tablet/Mobile par arrows ko thoda chota aur side mein adjust kiya hai */
    .custom-slider-arrow {
        width: 38px !important;
        height: 38px !important;
        top: 90% !important;
    }
    .carousel-control-prev.custom-slider-arrow {
        left: 15px !important;
    }
    .carousel-control-next.custom-slider-arrow {
        right: 15px !important;
    }
    
    .search-overlay-container {
        padding-top: 40px;
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 480px) {
    .hero-section-wrapper .hero-content-box {
        padding-left: 15px;
        padding-right: 15px; /* Choti screens ke liye equal gap */
    }
    .hero-main-title,
    .hero-main-title1 {
        font-size: 1.7rem !important;
    }
    .hero-subtitle {
        font-size: 0.95rem;
    }
    .mobile-search-box {
        height: 45px !important;
        font-size: 13px !important;
        width: 100% !important;
    }
    .custom-slider-arrow {
        width: 34px !important;
        height: 34px !important;
    }
}

/* ==========================================================
   ALL PACKAGE BANNER DESIGN
   ========================================================== */
.main-site-header {
    position: relative;
    width: 100%;
    min-height: 450px;
    background: no-repeat center center/cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
}

.header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.281);
    z-index: 1;
}

.header-content-inner {
    position: relative;
    z-index: 10 !important;
    width: 100%;
    text-align: center;
    padding-top: 140px;
    margin-bottom: 130px;
    box-sizing: border-box;
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 992px) {
    .header-content-inner {
        padding-top: 100px;
        margin-bottom: 40px;
    }
}

@media (max-width: 576px) {
    .header-content-inner {
        padding-top: 80px;
        margin-bottom: 30px;
    }
}



.features-marquee-container {
    background: #f8fafc;
    padding: 12px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    overflow: hidden;
    width: 100%;
    position: relative;
    display: flex;
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: scrollMarquee 30s linear infinite;
}

/* Cursor (hover) par marquee ruk jayegi */
.features-marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.feature-item {
    /* Gap kam karne ke liye margin ko chhota kiya gaya hai */
    margin: 0 20px; 
    font-size: 14px;
    font-weight: 500;
    color: #334155;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.feature-item i {
    color: #f66b26;
    margin-right: 6px;
    font-size: 15px;
}

@keyframes scrollMarquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}



/* Overlapping Cards Section */
.dom-packages-section {
    max-width: 1920px;
    margin: 30px auto;
    padding: 24px;
    font-family: sans-serif;

}


.dom-section-desc {
    color: #6b7280;
    font-size: 15px;
    margin-top: 6px;
}
/* Slider View (Default) */
.dom-card-grid {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-bottom: 8px;
}

.dom-card-grid::-webkit-scrollbar {
    display: none;
}

/* Har card ki fixed width taaki 4 cards cleanly adjust ho sakein */
.dom-tour-card {
    position: relative;
    border-radius: 16px;
    filter: brightness(0.85);
    overflow: hidden;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    height: 320px;
    flex: 0 0 calc(25% - 18px); /* Screen par exactly 4 cards fit honge (gap adjust karke) */
    min-width: 260px;
    cursor: pointer;
    text-decoration: none; /* Link ki underline hatane ke liye */
    color: inherit;
}
.dom-tour-card:hover {
    text-decoration: none;
}
/* Grid View Active hone par (Jab View All click ho) */
.dom-card-grid.grid-active {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    overflow-x: visible;
}

.dom-card-grid.grid-active .dom-tour-card {
    width: 100%;
    flex: unset;
    min-width: auto;
}

@media (min-width: 640px) {
    .dom-card-grid.grid-active {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .dom-card-grid.grid-active {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .dom-card-grid.grid-active {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Initially sabhi cards slider mein visible rahenge, 'dom-hidden-card' sirf tab kaam karegi jab aap chahein */
.dom-tour-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

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

.dom-card-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background-color: #6C3FB5;
    color: white;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 9999px;
    font-weight: 500;
    z-index: 2;
}

.dom-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7), transparent, transparent);
    display: flex;
    align-items: flex-end;
    padding: 16px;
}

.dom-card-title {
    color: white;
    font-weight: 600;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.dom-card-title i {
    color: white;
}

/* Controls Layout */
.dom-controls-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
}

.dom-arrow-group {
    display: flex;
    gap: 8px;
}

.dom-circle-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #d1d5db;
    background: white;
    color: #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dom-circle-btn:hover {
    border-color: #6C3FB5;
    color: #6C3FB5;
}

.dom-view-all-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    color: #f66b26;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: color 0.2s;
}

.dom-view-all-btn:hover {
    color: #6C3FB5;
}
















/* customer-benefits-section Section Background */
.customer-benefits-section {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 60px;
    background-color: #fcfbf9;
}

/* Base Card Styling */
.benefit-card {
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Card Hover Effect */
.benefit-card:hover {
    transform: translateY(-8px);
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.08);
}

/* Soft Background Colors */
.card-bg-1 {
    background-color: #f4efec;
}

/* Card 2 - Bada aur Background mein mix hone wala */
.card-bg-2 {
    background-color: #ffffff;
    padding: 3rem 2rem !important; /* Isse card andar se bada (tall & wide) ho jayega */
    box-shadow: 0px 20px 40px rgba(0, 0, 0, 0.06); /* Shadow ko thoda soft aur bada kiya hai taaki background mein depth aaye */
    border: 1px solid rgba(0, 0, 0, 0.03); /* Ek halka border jo background ke sath seamlessly mix kare */
    transition: all 0.3s ease;
}

.card-bg-2:hover {
    transform: translateY(-8px);
    box-shadow: 0px 25px 50px rgba(0, 0, 0, 0.09);
}

.card-bg-3 {
    background-color: #eaf1ec;
}

/* Tracking utility */
.tracking-wider {
    letter-spacing: 2px;
}






/* Footer Wrapper ko Header ki alignment (max-width aur padding) ke barabar set karna */
.footer-wrapper {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding:0 40px; /* Header ke padding ke hisab se match karein (agar 20px hai toh 20px rakhein) */
    box-sizing: border-box;
}

/* Header Section Title Alignment */
.footer-top-heading {
    text-align: center;
    margin-bottom: 50px;
    width: 100%;
    box-sizing: border-box;
}

.footer-top-heading h2 {
    font-size: 35px;
    font-weight: bolder;
    color: #262626;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    margin-top: 50px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-top-heading h2 svg {
    width: 24px;
    height: 24px;
    fill: #1E1E1E;
}

.footer-top-heading p {
    color: #666666;
    font-size: 15px;
    font-weight: 500;
    padding: 0 10px;
}

/* Tours Grid ko wrapper ke andar perfectly fit karne ke liye */
.tours-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
    width: 100%;
    box-sizing: border-box;
}

.tour-column h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1E1E1E;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e2e8f0;
}

.tour-column ul {
    list-style: none;
    padding-left: 0;
}

.tour-column ul li {
    margin-bottom: 14px;
}

.tour-column ul li a {
    text-decoration: none;
    color: #475569;
    font-size: 16px;
    transition: color 0.2s ease;
}

.tour-column ul li a:hover {
    color: #1E1E1E;
}

/* Bottom Divider */
.divider {
    border: none;
    border-top: 1px solid #5d5e5f;
    width: 100%;
    box-sizing: border-box;
}
/* Responsive Design */
@media (max-width: 768px) {
    .footer-wrapper {
        padding: 0 19px; /* Phone screens ke liye thodi kam padding */
    }

    .footer-top-heading h2 {
        font-size: 26px; /* Phone screen ke mutabiq heading size chhota kiya gaya hai taaki cut na ho */
    }

    .tours-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}




.main-footer {
    padding-top: 20px;
    margin-top: 20px;
    background-color: white;
}

/* Proper container to match upper sections alignment */
.footer-container {
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
}

.footer-col h3 {
    font-size: 18px;
    font-weight: 700;
    color: #1E1E1E;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

/* Brand Column */
.logo-circle {
    display: flex;
    align-items: left;
    justify-content: left;
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 20px;
}

.brand-desc {
    font-size: 13.5px;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 25px;
}

.social-icons {
    display: flex;
    gap: 12px;
}

.social-icons a {
    width: 36px;
    height: 36px;
    background-color: #FA5400;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s;
}

.social-icons a:hover {
    background-color: #fb8449;
}

/* Need Help Column */
.help-col p {
    font-size: 14px;
    margin-bottom: 15px;
    color: #64748b;
}

.help-col a {
    color: #475569;
    text-decoration: none;
}

.help-col a:hover {
    color: #484747;
}

/* Important Links Column */
.links-col ul {
    list-style: none;
    padding-left: 0;
}

.links-col ul li {
    margin-bottom: 12px;
}

.links-col ul li a {
    text-decoration: none;
    color: #64748b;
    font-size: 16px;
    transition: color 0.2s;
}

.links-col ul li a:hover {
    color: #484747;
}

/* Newsletter Column */
.newsletter-text {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 15px;
    line-height: 1.4;
}

.newsletter-form input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-size: 14px;
    margin-bottom: 10px;
    outline: none;
}

.newsletter-form input:focus {
    border-color: #484747;
}

.newsletter-form button {
    background-color: #FA5400;
    color: #ffffff;
    border: none;
    padding: 12px 20px;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.newsletter-form button:hover {
    background-color: #f66b26;
}

/* Footer Bottom Bar - Full Width Edge-to-Edge */
.footer-bottom {
    width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-top: 50px;
    border-top: 1px solid #b7b7b8;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    text-align: center; /* Text ko center align karne ke liye */
}

/* Upar se white fade/whiting effect aur neeche transparent taaki image clear dikhe */
.footer-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bottom-flex, .footer-bottom p {
    position: relative;
    z-index: 2;
}

/* Copyright text ko center me rakhne ke liye */
.bottom-flex {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center; /* Center alignment */
    align-items: center;
    box-sizing: border-box;
    width: 100%;
}
.footer-bottom{
    background-color: #6C3FB5;

}

.footer-bottom p {
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
    margin: 0;
    text-align: center;
}

/* Purane banners ko hide karne ke liye */
.illustration-banner, .footer-bg-image, .travel-background {
    display: none;
}/* Responsive Design */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (max-width: 576px) {
    .footer-container {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 0 15px;
    }
}


























/* Hotels Section Container */
.hotels-section-wrapper {
    padding: 80px 20px;
}

/* Professional Top Heading Styling */
.section-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px auto;
}


/* Main Flex Container */
.main-section-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    gap: 60px;
    flex-wrap: wrap;
}

/* Orbit Container Styling */
.orbit-container {
    position: relative;
    width: 550px;
    height: 550px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Center Logo */
.center-logo {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    z-index: 10;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
}

.center-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Common Ring Styling */
.orbit-ring {
    position: absolute;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    border-radius: 50%;
}

.ring-1 {
    width: 230px;
    height: 230px;
    animation: rotateClockwise 20s linear infinite;
}

.ring-2 {
    position: relative;
    width: 390px;
    height: 390px;
    animation: rotateCounter 25s linear infinite;
}

.ring-2 .crypto-icon {
    top: 50%;
    left: 50%;
}
.ring-3 {
    width: 530px;
    height: 530px;
    animation: rotateClockwise 35s linear infinite;
}

/* Icons Size */
.crypto-icon {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.crypto-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ring Positions */
/* Ring-1 ke radius (115px) ke hisab se dono icons ki position */
.ring-1 .icon-1 { 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) rotate(0deg) translate(115px) rotate(0deg); /* Left/Right side ya 0 deg par */
}

.ring-1 .icon-1-b { 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%) rotate(180deg) translate(115px) rotate(-180deg); /* Bilkul opposite side (180 deg par) */
}
.ring-2 .icon-2 { transform: translate(-50%, -50%) rotate(0deg) translate(195px) rotate(0deg); }   /* Right */
.ring-2 .icon-3 { transform: translate(-50%, -50%) rotate(90deg) translate(195px) rotate(-90deg); } /* Bottom */
.ring-2 .icon-4 { transform: translate(-50%, -50%) rotate(180deg) translate(195px) rotate(-180deg); }/* Left */
.ring-2 .icon-5 { transform: translate(-50%, -50%) rotate(270deg) translate(195px) rotate(-270deg); }/* Top */

.ring-3 .icon-3-1 { top: 0%; left: 50%; transform: translate(-50%, -50%); }
.ring-3 .icon-3-2 { top: 25%; right: 6.7%; transform: translate(50%, -50%); }
.ring-3 .icon-3-3 { bottom: 25%; right: 6.7%; transform: translate(50%, 50%); }
.ring-3 .icon-3-4 { bottom: 0%; left: 50%; transform: translate(-50%, 50%); }
.ring-3 .icon-3-5 { bottom: 25%; left: 6.7%; transform: translate(-50%, 50%); }
.ring-3 .icon-3-6 { top: 25%; left: 6.7%; transform: translate(-50%, -50%); }

/* Animations */
@keyframes rotateClockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes rotateCounter {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}

/* --- RIGHT CONTENT SECTION STYLING --- */
.right-content-section {
    max-width: 600px;
}


.right-content-section p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 30px;
}

.right-content-section .shop-btn {
    display: inline-block;
    background-color: #FA5400; 
    color: #fff;
    padding: 14px 32px;
    border-radius: 0px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.3);
}

.right-content-section .shop-btn:hover {
    background-color: #f56822;
}

/* ==========================================================================
   Responsive Media Queries for Orbit & Content Section
   ========================================================================== */

/* 1. Large Screens & Laptops (1199px se niche) */


/* 2. Tablets and Medium Devices (991px se niche - Stack layout) */
@media (max-width: 991px) {
    .hotels-section-wrapper {
        padding: 50px 15px;
    }

    .main-section-wrapper {
        flex-direction: column; /* Upar orbit aur niche text aa jayega */
        text-align: center;
        gap: 50px;
    }

    .right-content-section {
        max-width: 100%;
        padding: 0 15px;
    }

    .right-content-section p {
        margin-left: auto;
        margin-right: auto;
    }
}

/* 3. Mobile Phones (767px se niche) */
@media (max-width: 767px) {
    .orbit-container {
        width: 350px;
        height: 350px;
    }

    .center-logo {
        width: 80px;
        height: 80px;
    }

    .crypto-icon {
        width: 50px; /* Mobile par icons ka size chota kiya hai taaki fit aaye */
        height: 50px;
    }

    /* Ring sizes & Radius for mobile */
    .ring-1 { width: 140px; height: 140px; }
    .ring-1 .icon-1 { transform: translate(-50%, -50%) rotate(0deg) translate(70px) rotate(0deg); }
    .ring-1 .icon-1-b { transform: translate(-50%, -50%) rotate(180deg) translate(70px) rotate(-180deg); }

    .ring-2 { width: 240px; height: 240px; }
    .ring-2 .icon-2 { transform: translate(-50%, -50%) rotate(0deg) translate(120px) rotate(0deg); }
    .ring-2 .icon-3 { transform: translate(-50%, -50%) rotate(90deg) translate(120px) rotate(-90deg); }
    .ring-2 .icon-4 { transform: translate(-50%, -50%) rotate(180deg) translate(120px) rotate(-180deg); }
    .ring-2 .icon-5 { transform: translate(-50%, -50%) rotate(270deg) translate(120px) rotate(-270deg); }

    .ring-3 { width: 330px; height: 330px; }
    
    /* Ring-3 ke icons ke liye mobile par adjust positions agar zaroorat ho */
}

/* 4. Small Mobile Devices (480px se niche) */
@media (max-width: 480px) {
    .orbit-container {
        width: 300px;
        height: 300px;
    }

    .ring-1 { width: 120px; height: 120px; }
    .ring-1 .icon-1 { transform: translate(-50%, -50%) rotate(0deg) translate(60px) rotate(0deg); }
    .ring-1 .icon-1-b { transform: translate(-50%, -50%) rotate(180deg) translate(60px) rotate(-180deg); }

    .ring-2 { width: 210px; height: 210px; }
    .ring-2 .icon-2 { transform: translate(-50%, -50%) rotate(0deg) translate(105px) rotate(0deg); }
    .ring-2 .icon-3 { transform: translate(-50%, -50%) rotate(90deg) translate(105px) rotate(-90deg); }
    .ring-2 .icon-4 { transform: translate(-50%, -50%) rotate(180deg) translate(105px) rotate(-180deg); }
    .ring-2 .icon-5 { transform: translate(-50%, -50%) rotate(270deg) translate(105px) rotate(-270deg); }

    .ring-3 { width: 280px; height: 280px; }
}








.travel-marquee-wrapper {
    background: #f8fafc;
    padding: 20px 0;
    overflow: hidden;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.marquee-row {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.marquee-image-group {
    display: flex;
    align-items: center;
    gap: 15px;
    width: max-content;
        filter: brightness(0.85);
    will-change: transform;
}

/* Top Row Animation (Right to Left) */
.top-row .marquee-image-group {
    animation: scrollLeft 50s linear infinite;
}

/* Bottom Row Animation (Left to Right) */
.bottom-row .marquee-image-group {
    animation: scrollRight 50s linear infinite;
}

@keyframes scrollLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@keyframes scrollRight {
    0% {
        transform: translateX(-50%);
    }
    100% {
        transform: translateX(0);
    }
}

/* Default Size (Desktop ke liye) */
.travel-image-card {
    width: 400px;
    height: 250px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
    background: #e2e8f0;
    display: inline-block;
}

.travel-image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- RESPONSIVE MEDIA QUERIES --- */

/* Tablet Screens (1024px ya usse chote) */
@media (max-width: 1024px) {
    .travel-image-card {
        width: 320px;
        height: 200px;
    }
}

/* Mobile Screens (768px ya usse chote) */
@media (max-width: 768px) {
    .travel-image-card {
        width: 250px;
        height: 160px;
        border-radius: 12px;
    }
    .travel-marquee-wrapper {
        padding: 15px 0;
        gap: 10px;
    }
    .marquee-image-group {
        gap: 10px; /* Mobile par cards ke beech ka gap thoda kam kar diya */
    }
}

/* Small Mobile Screens (480px ya usse chote) */
@media (max-width: 480px) {
    .travel-image-card {
        width: 200px;
        height: 130px;
    }
}





/* ==========================================
   MAIN LAYOUT & GRID (1920px with Balanced Spacing)
   ========================================== */
/* Ye poora final CSS copy kar lo. Isme width aur margins ko properly fix kar diya hai taaki right side se bilkul bhi cut na ho aur dono taraf barabar space mile. */


/* ==========================================
   PACKAGE DETAILS MAIN CONTAINER
   ========================================== */
.package-details-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 20px 0 !important;
    padding: 0 60px !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.breadcrumb {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.breadcrumb a {
    text-decoration: none;
    color: #64748b;
}

.breadcrumb .current {
    color: #6C3FB5;
    font-weight: 600;
}

.content-grid-wrapper {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 30px;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================
   GALLERY & SLIDER SECTION
   ========================================== */
.package-gallery-container {
    background: #fff;
    border-radius: 16px;
    padding: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
    min-width: 0;
}

.main-slider-image {
    position: relative;
    width: 100% !important;
    max-width: 100% !important;
    height: 480px;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}

.main-slider-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.badge-best-seller {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #111;
    color: #fff;
    padding: 6px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 20px;
    z-index: 2;
}

.save-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    z-index: 2;
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.9);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 2;
}

.prev-btn { left: 15px; }
.next-btn { right: 15px; }

/* --- Thumbnail Row --- */
.thumbnail-row {
    display: flex;
    gap: 10px;
    margin-top: 15px;
    overflow-x: auto;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-bottom: 8px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.thumbnail-row::-webkit-scrollbar {
    height: 4px;
}
.thumbnail-row::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.thumb-item {
    flex: 0 0 calc(20% - 8px);
    min-width: 70px;
    height: 80px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    box-sizing: border-box;
}

.thumb-item.active { 
    border-color: #0b1c3f; 
}

.thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.more-photos {
    background: #1e293b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.2;
}

/* ==========================================
   PACKAGE TITLE, TABS & OVERVIEW
   ========================================== */
.package-title-section {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    margin-top: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word;
    min-width: 0;
}

.package-title-section h2 {
    font-size: 1.8rem;
    color: #0f172a;
    margin-bottom: 12px;
    word-break: break-word;
}

.meta-info-row {
    display: flex;
    flex-wrap: wrap !important;
    gap: 15px 20px !important;
    font-size: 0.95rem;
    color: #475569;
    margin-bottom: 15px;
    width: 100%;
    box-sizing: border-box;
}

.meta-info-row span i { color: #0b1c3f; margin-right: 5px; }
.meta-info-row .difficulty { color: #9b62f8e1; font-weight: 600; }

.ratings-row {
    display: flex;
    flex-wrap: wrap !important;
    gap: 15px 20px !important;
    font-size: 0.9rem;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f1f5f9;
    width: 100%;
    box-sizing: border-box;
}

.stars { color: #f59e0b; }
.stars strong { color: #0f172a; }
.trusted { color: #0b1c3f; font-weight: 500; }

.package-desc {
    color: #475569;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 20px;
    word-break: break-word;
}

.highlights-badges {
    display: flex;
    flex-wrap: wrap !important;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
}

.h-badge {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 8px 14px;
    border-radius: 25px;
    font-size: 0.85rem;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: normal !important;
    word-break: break-word;
}

.h-badge i { color: #0b1c3f; }

/* --- Tabs Fix --- */
.package-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    background: #fff !important;
    border-radius: 12px !important;
    margin-top: 30px !important;
    padding: 8px !important;
    gap: 8px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    list-style: none !important;
    min-width: 0 !important;
}

.tab-item {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: none !important;
}

.tab-item.active {
    background: #f1f5f9 !important;
    color: #0b1c3f !important;
    font-weight: 600 !important;
}

/* --- Overview Box --- */
.package-overview-box {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    margin-top: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word;
    min-width: 0;
}

.package-overview-box > p {
    color: #475569;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 25px;
    word-break: break-word;
}

.package-overview-box h3 {
    font-size: 1.35rem;
    color: #0f172a;
    margin-bottom: 18px;
    font-weight: 700;
}

/* ==========================================
   RIGHT SIDEBAR & BOOKING CARD
   ========================================== */
.right-sidebar-area {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 100px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0;
}

.booking-card-box {
    background: #fff;
    border-radius: 16px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
    min-width: 0;
}

.price-header {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 15px;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

.price-header span {
    font-size: 0.85rem;
    color: #64748b;
}

.price-header h2 {
    font-size: 2rem;
    color: #0b1c3f;
    margin: 5px 0;
    word-break: break-word;
}

.price-header h2 span {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 400;
}

.price-header p {
    font-size: 0.75rem;
    color: #6C3FB5;
    font-weight: 600;
}

/* --- Form Fields & Inputs --- */
.date-select-box {
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
}

.date-select-box label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: #334155;
    margin-bottom: 8px;
}

.calendar-input-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.calendar-input-wrapper input[type="date"],
.booking-card-box input[type="text"],
.booking-card-box input[type="email"],
.booking-card-box input[type="tel"] {
    width: 100% !important;
    max-width: 100% !important;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 12px 15px;
    font-size: 0.95rem;
    color: #0f172a;
    outline: none;
    box-sizing: border-box;
}

.calendar-input-wrapper input[type="date"]:focus,
.booking-card-box input:focus {
    border-color: #0b1c3f;
    background: #fff;
}

/* --- Buttons --- */
.book-now-btn,
.download-itinerary-btn {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: 0.3s;
    white-space: nowrap;
    overflow: hidden;
}

.book-now-btn {
    background: #FA5400;
    color: #111;
    border: none;
    padding: 14px;
    margin-bottom: 12px;
}

.book-now-btn:hover { background: #f96b23; }

.download-itinerary-btn {
    background: #fff;
    color: #0b1c3f;
    border: 1px solid #cbd5e1;
    padding: 12px;
    font-weight: 600;
}

.download-itinerary-btn:hover {
    background: #f1f5f9;
}

/* --- Support Box --- */
.sidebar-support {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 25px;
    background: #f8fafc;
    padding: 18px;
    border-radius: 12px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-width: 0;
}

.support-icon {
    font-size: 1.4rem;
    color: #0b1c3f;
    background: #e2e8f0;
    min-width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.sidebar-support span {
    font-size: 0.75rem;
    color: #64748b;
    display: block;
}

.sidebar-support p {
    font-size: 0.8rem;
    color: #334155;
    margin: 2px 0;
}

.sidebar-support strong {
    font-size: 0.9rem;
    color: #0b1c3f;
}

/* ==========================================
   GALLERY MODAL
   ========================================== */
.gallery-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    overflow-y: auto;
    padding: 40px 20px;
    box-sizing: border-box;
    scrollbar-width: none;
}

.gallery-modal::-webkit-scrollbar {
    display: none;
}

.modal-content-wrapper {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    width: 100%;
}

.close-modal-btn {
    position: absolute;
    top: -40px;
    right: 0;
    color: #fff;
    font-size: 2.2rem;
    font-weight: 300;
    cursor: pointer;
    background: transparent;
    border: none;
}

.modal-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.modal-gallery-grid img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    border-radius: 12px;
}

/* ==========================================
   RESPONSIVE MEDIA QUERIES (All Screens)
   ========================================== */

@media (max-width: 1200px) {
    .package-details-main {
        padding: 0 30px !important;
    }

    .content-grid-wrapper {
        grid-template-columns: 1fr !important;
        gap: 25px;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .right-sidebar-area {
        position: static !important;
        margin-top: 20px;
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .menu-toggle-btn {
        display: flex;
    }

    .nav-wrapper {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        padding: 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        border-top: 1px solid #e2e8f0;
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        transition: clip-path 0.4s ease-in-out;
        pointer-events: none;
    }

    .nav-wrapper.active {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
        pointer-events: auto;
    }

    .main-nav {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    .main-nav a {
        font-size: 1.05rem;
        border-bottom: 1px solid #f1f5f9;
        padding-bottom: 8px;
        width: 100%;
        display: block;
    }

    .header-right {
        margin-top: 15px;
        width: 100%;
        padding-top: 10px;
        border-top: 1px solid #e2e8f0;
    }

    .site-header {
        padding: 15px 15px !important;
    }

    .package-details-main {
        padding-left: 15px !important;
        padding-right: 15px !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px auto !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .content-grid-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .main-slider-image {
        height: 260px !important;
    }

    .thumbnail-row {
        gap: 8px;
    }

    .thumb-item {
        flex: 0 0 60px !important;
        min-width: 60px !important;
        height: 60px !important;
    }

    .package-title-section, 
    .package-overview-box, 
    .booking-card-box, 
    .package-gallery-container,
    .package-tabs,
    .sidebar-support {
        padding: 18px !important;
        border-radius: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .package-title-section h2 {
        font-size: 1.4rem !important;
    }

    .modal-gallery-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 480px) {
    .package-details-main {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
        margin: 10px auto !important;
    }

    .package-title-section, 
    .package-overview-box, 
    .booking-card-box, 
    .package-gallery-container,
    .package-tabs,
    .sidebar-support {
        padding: 12px !important;
    }

    .main-slider-image {
        height: 210px !important;
    }
    
    .thumb-item {
        flex: 0 0 50px !important;
        min-width: 50px !important;
        height: 50px !important;
    }
}





/* Unique Stylesheet */
.dt-main-bg {
    margin: 0;
    padding: 40px 20px;
    font-family: 'Poppins', sans-serif;
    background-color: #ffffff; /* Image ke neeche clean white match karne ke liye */
    color: #111827;
}

/* Header Design */
.dt-header-box {
    text-align: center;
    max-width: 650px;
    margin: 50px auto 45px auto;
}

.dt-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 12px;
}

.dt-sub-text {
    color: #4b5563;
    font-size: 1rem;
    line-height: 1.6;
}

/* Grid Layout */
.dt-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    max-width: 1920px;
    margin: 0 auto;
}

@media (max-width: 992px) {
    .dt-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .dt-grid-container {
        grid-template-columns: 1fr;
    }
}





/* about.php css */
/* --- LAPTOP / DEFAULT VIEW (Aapka purana exact design) --- */
.about-images-container {
    flex: 1; 
    min-width: 320px; 
    position: relative; 
    height: 580px;
}

.primary-arch-img {
    position: absolute; 
    top: 0; 
    left: 10px; 
    width: 400px; 
    height: 500px; 
    border-radius: 200px 200px 0 0; 
    overflow: hidden; 
    box-shadow: 0 5px 5px rgba(0,0,0,0.15); 
    background: #eee;
}

.secondary-circle-img {
    position: absolute; 
    bottom: 10px; 
    left: 230px; 
    width: 320px; 
    height: 320px; 
    border-radius: 50%; 
    overflow: hidden; 
    border: 6px solid #ffffff; 
    box-shadow: 0 5px 5px rgba(0,0,0,0.2); 
    background: #eee; 
    z-index: 2;
}

/* --- MOBILE / RESPONSIVE VIEW (Screen 768px se choti hone par) --- */
@media (max-width: 768px) {
    .about-images-container {
        height: 440px; /* Mobile ke liye container ki height adjust ki hai */
        width: 100%;
        max-width: 350px;
        margin: 0 auto; /* Center align container */
    }

    .primary-arch-img {
        width: 260px;
        height: 340px;
        left: 50%;
        transform: translateX(-50%); /* Badi image mobile mein bilkul center ho jayegi */
        border-radius: 130px 130px 0 0;
    }

    .secondary-circle-img {
        width: 180px;
        height: 180px;
        bottom: 10px;
        left: 50%;
        transform: translateX(-50%); /* Circle image badi image ke bilkul center/neeche overlap karegi */
        border-width: 4px;
    }
}

.why-choose-us-section {
    background-color: #ffffff;
    width: 100%;
    max-width: 1920px;
    height: auto;
    margin: 0 auto;
    border-radius: 20px;
}
.feature-card {
    text-align: justify;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.feature-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08) !important;
}
.card-number {
    opacity: 0.25;
    font-weight: 800;
}




/* contact us page css */
/* ==========================================================
   1. DEFAULT (DESKTOP) STYLES
   ========================================================== */
.contact-form-wrapper {
    padding: 60px 60px 60px 80px;
    position: relative; /* Red stripe ke liye zaroori hai */
}

.red-stripe {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    background-color: #dc3545;
}

.contact-title {
    font-size: 50px;
    font-weight: 600;
}

.contact-desc {
    font-size: 0.95rem;
    width: 350px;
}

.custom-input {
    border-bottom: 2px solid #ccc !important;
}

.custom-textarea {
    resize: none;
}

.custom-submit-btn {
    letter-spacing: 1px;
    border: 2px solid black;
}

.form-control:focus {
    border-color: #dc3545 !important;
    box-shadow: none !important;
}


/* ==========================================================
   2. TABLET SCREENS (992px and below)
   ========================================================== */
@media (max-width: 992px) {
    .contact-form-wrapper {
        padding: 40px 40px 40px 55px;
    }

    .contact-title {
        font-size: 38px;
    }

    .contact-desc {
        width: 100%; /* Tablet par width full kar di hai taaki text constraint na ho */
    }

    .red-stripe {
        width: 22px;
    }
}


/* ==========================================================
   3. MOBILE SCREENS (768px and below)
   ========================================================== */
@media (max-width: 768px) {
    .contact-form-wrapper {
        padding: 30px 20px 30px 40px; /* Mobile par padding kam ki gayi hai */
    }

    .contact-title {
        font-size: 28px;
    }

    .contact-desc {
        font-size: 0.9rem;
        width: 100%;
    }

    .red-stripe {
        width: 15px; /* Mobile par red stripe patli kar di gayi hai */
    }
}











.packages-main-page {
    max-width: 1920px;
    margin: 0 auto;
}

.header-arrow {
    font-size: 24px;
    font-weight: bold;
    color: #0f172a;
}

/* Grid Layout */
.packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

/* Responsive ke liye */
@media (max-width: 992px) {
    .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .packages-grid {
        grid-template-columns: 1fr;
    }
}

/* Card Styling */
.package-card {
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.3s ease;
}

.package-card:hover {
    transform: translateY(-5px);
}

.card-image-container {
    position: relative;
    height: 180px;
    width: 100%;
}

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

.duration-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(15, 23, 42, 0.75);
    color: #ffffff;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    backdrop-filter: blur(4px);
}

.wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 18px;
    cursor: pointer;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.card-content h3 {
    font-size: 18px;
    color: #0f172a;
    margin: 0 0 10px 0;
}

.card-content p {
    font-size: 14px;
    color: #4b5563;
    margin: 0 0 20px 0;
    line-height: 1.5;
    flex-grow: 1;
}

.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #f3f4f6;
    padding-top: 15px;
    margin-top: auto;
}

.price {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.price span {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
}

.view-details-btn {
    background-color: #FA5400;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.2s;
}

.view-details-btn:hover {
    background-color: #fa8449;
}

/* Initially Hide Extra Cards - Fix applied here */
.packages-grid .extra-card {
    display: none !important;
}

/* Show Extra Cards when class is applied to grid */
.packages-grid.show-all .extra-card {
    display: flex !important;
}

/* Toggle Button Container */
.toggle-container {
    text-align: center;
}

.toggle-btn {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #0f172a;
    padding: 12px 28px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.02);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.toggle-btn:hover {
    background: #6C3FB5;
    color: #ffffff;
}

.btn-arrow {
    font-size: 16px;
    transition: transform 0.3s ease;
}
/* Shuru mein extra cards hide rahenge */
#baliPackagesGrid .extra-card {
    display: none;
}

/* Jab button click hoga aur 'show-all' class active hogi */
#baliPackagesGrid.show-all .extra-card {
    display: block; /* Agar aapka layout display: flex ya grid hai toh uske mutabiq adjust kar sakte hain */
}

/* Arrow smooth rotation animation */
.btn-arrow {
    transition: transform 0.3s ease;
    display: inline-block;
}















.weekend-trips-page {
    background-color: #f8fafc;
    min-height: 100vh;
}

.weekend-page-title {
    font-family: 'Outfit', sans-serif;
    color: #1e293b;
    font-size: 28px;
    font-weight: 700;
}

.weekend-trips-page .packages-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Exactly 3 cards in one row */
    gap: 24px;
}

/* Responsive adjustment for smaller screens */
@media (max-width: 992px) {
    .weekend-trips-page .packages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .weekend-trips-page .packages-grid {
        grid-template-columns: 1fr;
    }
}

.weekend-trips-page .package-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
}

.weekend-trips-page .card-image-container {
    position: relative;
    height: 220px;
}

.weekend-trips-page .card-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.weekend-trips-page .card-title-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    padding: 15px 15px 10px 15px;
}

.weekend-trips-page .card-title-overlay h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.weekend-trips-page .card-content {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.weekend-trips-page .card-meta-item {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.weekend-trips-page .card-meta-item i {
    color: #6C3FB5;
}

.weekend-trips-page .date-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.weekend-trips-page .date-chip {
    background: #a5c2fb31;
    color: #6C3FB5;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}

.weekend-trips-page .pricing-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}

.weekend-trips-page .original-price {
    text-decoration: line-through;
    color: #94a3b8;
    font-size: 13px;
}

.weekend-trips-page .save-badge {
    color: #6C3FB5;
    font-size: 12px;
    font-weight: 600;
    background: #a5c2fb31;
    padding: 2px 6px;
    border-radius: 4px;
}

.weekend-trips-page .final-price-row {
    margin-bottom: 16px;
}

.weekend-trips-page .price-text {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.weekend-trips-page .price-text span {
    font-size: 12px;
    color: #64748b;
    font-weight: normal;
}

.weekend-trips-page .card-action-buttons {
    display: flex;
    gap: 10px;
}

.weekend-trips-page .callback-btn {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    border-color: #cbd5e1;
    color: #334155;
    border-radius: 8px;
    padding: 8px;
}
.weekend-trips-page .callback-btn:hover {
    color: white;
    background-color: #6C3FB5;
}
.weekend-trips-page .callback-btn i {
    color: #FA5400;
    margin-right: 4px;
}
.weekend-trips-page .callback-btn i {
    color: #334155;
}

.weekend-trips-page .view-trip-btn {
    flex: 1;
    font-size: 13px;
    font-weight: 600;
    background-color: #FA5400;
    border: none;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    text-decoration: none;
    color: #fff;
}












/* /* Dark Backdrop Overlay (Screen ke beech me lane ke liye) */
.popup-overlay-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.65);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup-overlay-wrapper.active-popup {
    opacity: 1;
    visibility: visible;
}

/* Main Popup Box */
.popup-container-box {
    background: #ffffff;
    width: 100%;
    max-width: 700px;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    transform: scale(0.85);
    transition: transform 0.3s ease;
}

.popup-overlay-wrapper.active-popup .popup-container-box {
    transform: scale(1);
}

/* Close Button Style */
.popup-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    background: #ffffff;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    z-index: 10;
    transition: background 0.2s;
}

.popup-close-btn:hover {
    background: #fd7734;
    color: #fff;
}

/* Banner Image Size */
.popup-header-img {
    height: 160px;
    object-fit: cover;
}

/* Input Fields Customization */
.custom-input-field {
    border: 1px solid #ced4da !important;
    border-radius: 4px !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: #495057 !important;
    background-color: #fff !important;
}

.custom-input-field:focus {
    border-color: #6C3FB5 !important;
    box-shadow: 0 0 0 0.2rem rgba(212, 0, 255, 0.25) !important;
}

/* Cyan Submit Button (Jaise image mein hai) */
.btn-cyan-submit {
    background-color: #6C3FB5 !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    border-radius: 4px !important;
    box-shadow: 0 4px 10px rgba(212, 0, 255, 0.25);
    transition: background-color 0.2s ease;
}

.btn-cyan-submit:hover {
    background-color: #6C3FB5 !important;
}

/* ==========================================
   RESPONSIVE MEDIA QUERIES FOR POPUP
   ========================================== */

/* Tablets (Max-width: 768px) */
@media (max-width: 768px) {
    .popup-container-box {
        max-width: 90%;
        max-height: 92vh;
    }

    .popup-header-img {
        height: 130px;
    }
}

/* Mobile Phones (Max-width: 480px) */
/* Mobile Phones (Max-width: 480px) */
@media (max-width: 480px) {
    .popup-overlay-wrapper {
        padding: 10px;
    }

    .popup-container-box {
        max-width: 100%;
        max-height: 90vh;
        border-radius: 4px;
    }

    /* Chote mobile par bhi image hide rahegi */
    .popup-header-img {
        display: none !important;
    }

    .popup-close-btn {
        width: 28px;
        height: 28px;
        top: 8px;
        right: 8px;
        font-size: 16px;
    }

    .custom-input-field {
        padding: 9px 12px !important;
        font-size: 13px !important;
    }

    .btn-cyan-submit {
        font-size: 14px !important;
        padding: 10px !important;
    }
}





/* terms & condition page */

/* Main Container Card */
.terms-container {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid #eaeaea;
    margin: 30px auto 30px;
    
}

/* Page Title Styling */
.terms-title {
    text-align: center;
    color: #6C3FB5; /* Theme Purple */
    font-size: 2.2rem;
    margin-bottom: 30px;
    font-weight: 700;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 15px;
}

/* Section Headings */
.section-heading {
    color: #6C3FB5;
    font-size: 1.25rem;
    margin-top: 25px;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Paragraph Styles */
.terms-content p {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 15px;
    text-align: justify;
}

/* Highlight Box for Sikkim Note */
.note-box {
    background-color: #f3e5f5;
    border-left: 4px solid #6C3FB5;
    padding: 12px 15px;
    margin: 10px 0 15px 0;
    border-radius: 0 6px 6px 0;
    font-size: 0.92rem;
    color: #4a148c;
}

/* Footer Tagline */
.footer-tagline {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eaeaea;
    font-size: 1.1rem;
    font-weight: 600;
    color: #6C3FB5;
}

/* Responsive Design for Mobile Devices */
@media (max-width: 768px) {
    .terms-container {
        padding: 20px;
    }
    .terms-title {
        font-size: 1.8rem;
    }
    .section-heading {
        font-size: 1.1rem;
    }
}




/* blog page css */


/* Container - Sabhi screens ke liye */
.cards-row-container {
    display: flex;
    gap: 20px;
    max-width: 1230px;
    width: 100%;
    margin: 20px auto !important;
    padding: 0 15px;
    box-sizing: border-box;
}

.blog-post-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid #eaeaea;
    flex: 1;
    min-width: 0; /* Flexbox overflow rokne ke liye */
    position: relative;
}

.media-header {
    background: #000000;
    position: relative;
}

.status-pill {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: #6C3FB5;
    color: white;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    z-index: 10;
}

.yt-short-wrapper {
    position: relative;
    width: 100%;
    height: 340px !important;
    background: #000;
}

.yt-short-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 340px;
    border: none;
}

.content-area {
    padding: 20px;
    background: #ffffff;
}

.content-area h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
    color: #1f2937;
}

.content-area p {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
}

.meta-info {
    font-size: 13px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* ==========================================
   RESPONSIVE MEDIA QUERIES (Sabhi Devices ke liye)
   ========================================== */

/* Tablet Screens (992px ya usse kam) */
@media (max-width: 992px) {
    .cards-row-container {
        flex-wrap: wrap; /* Cards aage ki line me shift ho jayenge */
        justify-content: center;
    }
    .blog-post-card {
        flex: 0 0 calc(50% - 10px); /* Tablet par 2 cards ek row me rahenge */
        min-width: 280px;
    }
}

/* Mobile Screens (768px ya usse kam) */
@media (max-width: 768px) {
    .cards-row-container {
        flex-direction: column; /* Mobile par cards ek ke niche ek vertical ho jayenge */
        align-items: stretch;
        padding: 0 10px;
    }
    .blog-post-card {
        width: 100%;
        flex: none;
    }
}