* {
  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;
}
.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)
   ========================================================================== */
.top-bar-fixed {
  position: relative; /* Fixed se relative kar diya taaki yeh page ke sath scroll ho */
  width: 100%;
  background-color: #012469;
  font-size: 14px;
  z-index: 1050;
}

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

/* Mobile View Overflow & Alignment Fix (< 991px) */
@media (max-width: 991px) {
  body, html {
    overflow-x: hidden !important;
  }

  .top-bar-fixed, .top-bar{ 
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 16px !important;
    padding-right: 20px !important;
    box-sizing: border-box;
  }

  .top-bar-fixed a, .top-bar span, .top-bar-fixed span {
    font-size: 11px !important;
    white-space: nowrap;
  }
}

/* ==========================================================================
   2. Header & Navbar Styling (Sticky Scroll Effect Added)
   ========================================================================== */
.site-header-area {
  position: relative; 
  width: 100%;
  max-width: 1800px;
  margin: 0 auto;
  height: auto;
  z-index: 1040;
  padding: 0 70px;
  background: white; 
}

/* Navbar ke andar ki default padding aur height ko control karne ke liye */
.site-header-area .navbar {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  display: flex;
  align-items: center !important;
}

/* Logo ki image ka size fix karne ke liye taaki wo extra space na le */
.site-header-area .navbar-brand img {
  height: 70px; 
  width: auto;
  display: block;
}

/* Jab user scroll karega tab yeh class JavaScript ke through add hogi */
.site-header-area.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%);
  margin: 0 !important;
  width: 100% !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  background-color: #ffffff !important;
  z-index: 1100;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

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

/* Navbar links ko barabar space dene aur failane ke liye */
.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;
}

/* Layout shift rokne ke liye aur text ko ek line mein rakhne ke liye */
.custom-nav-menu .nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px !important;
  font-weight: 500;
  color: #012469 !important;
  white-space: nowrap !important;
  padding: 8px 0 !important;
}

/* Click, Focus, Active ya Dropdown open hone par bhi font-weight aur layout stable rahe */
.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;
  color: #012469 !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Initially line ki width 0 rakhein taaki bina hover ke na dikhe */
.custom-nav-menu .nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px; 
  top: auto;    
  transform: none; 
  width: 0;
  height: 2px; 
  background-color: #012469; 
  transition: width 0.3s ease-in-out;
}

/* Jab mouse hover ho ya dropdown open ho toh line text ki width ke barabar ho jaye */
.custom-nav-menu .nav-link:hover::after,
.custom-nav-menu .dropdown-toggle.show::after,
.custom-nav-menu .nav-link.active::after {
  width: 100%;
}

/* Outlined Buy Now Button */
.btn-custom-outline {
    display: inline-block;
    padding: 8px 26px;
    color: #012469;
    border: 2px solid #012469;
    border-radius: 0px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

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

/* Bootstrap ka default dropdown arrow/line hide karne ke liye */
.dropdown-toggle.no-arrow::after {
    display: none !important;
}

/* ==========================================
   DROPDOWN MENU STYLING (Scrollable & Fixed)
   ========================================== */
.site-header-area .dropdown-menu {
  border: none !important;
  border-radius: 0px !important;
  border-top: 2px solid #012469 !important;
  box-shadow: 0px 10px 25px rgba(0, 0, 0, 0.1) !important;
  padding: 10px 0 !important;
  background-color: #ffffff !important;
  margin-top: 0px !important; 
  left: 50% !important;
  transform: translateX(-50%) !important;
  min-width: 210px !important;
  
  /* Lambe menu ke liye scrollable height */
  max-height: 380px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Desktop par hover karne par dropdown bina gayab hue khula rahe */
@media (min-width: 992px) {
    .site-header-area .custom-nav-menu .dropdown:hover .dropdown-menu {
        display: block !important;
        margin-top: 0px !important;
    }
}

.site-header-area .dropdown-menu .dropdown-item {
  padding: 10px 20px !important;
  color: #012469 !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease-in-out;
  white-space: normal !important;
}

.site-header-area .dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa !important;
  color: #FA5400 !important;
}

.site-header-area .dropdown-menu .sub-nav-label {
  display: block;
  font-size: 12px !important;
  color: #666666 !important;
  font-weight: 400 !important;
  margin-top: 2px;
}

/* Custom Scrollbar Styling */
.site-header-area .dropdown-menu::-webkit-scrollbar {
  width: 6px;
}

.site-header-area .dropdown-menu::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.site-header-area .dropdown-menu::-webkit-scrollbar-thumb {
  background: #012469;
}




@media (max-width: 991px) {
  /* Header area ka padding mobile par adjust karne ke liye */
  .site-header-area {
    padding: 0 15px !important;
  }

  /* Navbar ko flex row banakar logo ko left aur toggler ko right karne ke liye */
  .site-header-area .navbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Logo ko left mein fix rakhne ke liye size control */
  .site-header-area .navbar-brand {
    margin-right: 0 !important;
  }

  .site-header-area .navbar-brand img {
    height: 55px !important; /* Mobile ke liye logo size */
    width: auto !important;
  }

  /* Three-line toggle button (Hamburger icon) ki styling aur right alignment */
  .site-header-area .navbar-toggler {
    border: none !important;
    box-shadow: none !important;
    padding: 4px 8px !important;
    background-color: #012469 !important; /* Button background */
    border-radius: 4px !important;
  }
  
  .btn-custom-outline {
    display: inline-block;
    padding: 8px 26px;
    color: #ffffff;
    border: 2px solid #ffffff;
    border-radius: 0px;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
  }

  /* Toggle button ke andar ki three lines (icon) ko white karne ke liye */
  .site-header-area .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
  }

  /* Jab menu open ho (Dropdown box) toh uska design */
  #headerMenuContent {
    background-color: #012469 !important;
    padding: 20px !important;
    border-radius: 8px !important;
    margin-top: 10px !important;
    box-shadow: 0px 10px 25px rgba(0,0,0,0.3);
  }

  /* ==========================================
     MOBILE MENU LEFT ALIGN & CLICK FIX (ADDED)
     ========================================== */
  #headerMenuContent, 
  #headerMenuContent .navbar-nav, 
  #headerMenuContent .nav-item, 
  #headerMenuContent .nav-link {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }

  #headerMenuContent .navbar-nav {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  #headerMenuContent .nav-item {
    width: 100% !important;
  }

  /* Mobile menu ke links ka color white aur padding */
  .custom-nav-menu .nav-link {
    color: #ffffff !important;
    padding: 8px 0 !important;
    font-size: 16px !important;
    display: block !important;
    width: 100% !important;
  }

  /* Click ya active hone par background change hone se rokne ke liye */
  .custom-nav-menu .nav-link:hover,
  .custom-nav-menu .nav-link:focus,
  .custom-nav-menu .nav-link:active,
  .custom-nav-menu .dropdown-toggle.show,
  .custom-nav-menu .show > .nav-link {
    color: #ffffff !important;
    background-color: transparent !important;
  }

  /* Mobile menu ke andar hover line ka color */
  .custom-nav-menu .nav-link::after {
    background-color: #FA5400 !important;
  }
}/* ==========================================================================
   3. Main Site Header / Inner Content Styling
   ========================================================================== */
.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;
    }
}

/* ==========================================================================
   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: 600px;
    background: url('../image/banner/home.png') no-repeat center center/cover;
    display: flex;
    align-items: center;
    margin-top: -20px; 
    justify-content: center;
}

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

.hero-section-wrapper .hero-content-box {
    position: relative;
    z-index: 2;
    text-align: center;
}

.hero-main-title {
    font-family: 'Outfit', sans-serif;
    font-size: 7rem;
    font-weight: 700;
    letter-spacing: -1px;
    display: flex;
    perspective: 1000px;
    overflow: hidden;
}

.hero-main-title .letter {
    display: inline-block;
    opacity: 0;
    transform: rotateY(-90deg);
    transform-origin: left;
    transition: transform 0.8s ease, opacity 0.8s ease; 
}

.hero-main-title .letter.active {
    opacity: 1;
    transform: rotateY(0deg);
}

.hero-main-title .space {
    display: inline-block;
    width: 25px; 
}

.hero-subtitle {
    font-size: 1.50rem;
    font-weight: 400;
    letter-spacing: 0.3px;
    opacity: 0.9;
}

/* Orange CTA Button */
.btn-orange-primary {
    background-color: #FA5400;
    width: 260px;
    color: #ffffff;
    border: none;
    border-radius: 0px;
    font-size: 18px;
    transition: background-color 0.2s ease;
}

.btn-orange-primary:hover {
    background-color: #fd7734;
    color: #ffffff;
}

/* Responsive Media Query for Header Mobile view */
@media (max-width: 991px) {
    .hero-main-title {
        font-size: 3rem;
    }
    
    .site-header-area .container-fluid {
        margin-top: 10px;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #headerMenuContent {
        background-color: #FA5400;
        padding: 20px;
        border-radius: 8px;
        margin-top: 15px;
        box-shadow: 0px 10px 25px rgba(0,0,0,0.4);
    }
}

/* ==========================================================================
   5. Hero Main Title - Responsive Media Queries
   ========================================================================== */
@media (max-width: 1199px) {
    .hero-main-title {
        font-size: 5rem;
        justify-content: center; 
        text-align: center;
    }
    .hero-main-title .space {
        width: 18px;
    }
}

@media (max-width: 991px) {
    .hero-main-title {
        font-size: 3.8rem;
        flex-wrap: wrap;
        justify-content: center; 
        text-align: center;
    }
    .hero-main-title .space {
        width: 14px;
    }
}

@media (max-width: 767px) {
    .hero-main-title {
        font-size: 2.8rem;
        letter-spacing: 0px;
        justify-content: center; 
        text-align: center;
    }
    .hero-main-title .space {
        width: 10px;
    }
}

@media (max-width: 480px) {
    .hero-main-title {
        font-size: 2.2rem;
        justify-content: center; 
        text-align: center;
    }
    .hero-main-title .space {
        width: 8px;
    }
}


/* Smooth Scroll Enable */
html {
    scroll-behavior: smooth;
}

/* Down Arrow Animation & Styling */
.hero-scroll-arrow {
    position: absolute;
    left: 51%;
    margin-top: 500px;
    transform: translateX(-50%);
    z-index: 10;
}

.scroll-down-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease-in-out;
    animation: bounceArrow 2s infinite;
}

.scroll-down-icon:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: scale(1.1) translateX(-50%);
}

/* Tablets aur Mobile Screens ke liye media query */
@media (max-width: 768px) {
    .hero-scroll-arrow {
        top: 490px !important; /* Chote screens par niche se distance adjust kiya */
        left: 55% !important;
        transform: translateX(-50%) !important;
    }

    .scroll-down-icon {
        width: 38px !important;
        height: 38px !important;
    }
}

@media (max-width: 480px) {
    .hero-scroll-arrow {
        bottom: 25px !important;
    }
}

@keyframes bounceArrow {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0) translateX(-50%); }
    40% { transform: translateY(-8px) translateX(-50%); }
    60% { transform: translateY(-4px) translateX(-50%); }
}

/* Overlapping Cards Section */
/* ==========================================================================
   Overlap Cards Section - Responsive CSS
   ========================================================================== */

.overlap-cards-section {
    margin-top: 100px;
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    z-index: 20;
    padding: 0 75px 80px 75px; 
    scroll-margin-top: 150px;
}

/* Card Item Wrapper */
.card-item-wrapper {
    display: flex;
    flex-direction: column;
}

/* Base Card Styling & Hover Lift Effect */
.preview-white-card {
    background: #ffffff;
    border-radius: 0px !important;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Explore More button ka background color change karne ke liye */
.preview-white-card .btn-dark {
    background-color: #FA5400 !important;
    border-color: #FA5400 !important;
    color: #ffffff !important; /* Button ka text white rahega */
}

/* Button par mouse le jane par (Hover) effect */
.preview-white-card .btn-dark:hover {
    background-color: #e04a00 !important; /* Thoda dark orange shade hover ke liye */
    border-color: #e04a00 !important;
}
/* Image Height & Object Fit */
.card-middle-image {
    height: 150px;
    object-fit: cover;
    border-radius: 0px !important;
}

/* Side Cards Height */
.side-card {
    min-height: 380px;
}

/* Middle Card Height */
.middle-card {
    min-height: 340px;
    margin-top: 0;
}

/* Hover Lift Effect */
.preview-white-card:hover {
    transform: translateY(-8px);
    box-shadow: 0px 18px 35px rgba(0, 0, 0, 0.12);
}

/* External Bottom Text Styling */
.external-bottom-text {
    width: 100%;
}

/* Bottom Title Text Styling */
.section-bottom-title {
    font-size: 2rem;
    letter-spacing: 0.5px;
}


/* ==========================================================================
   Responsive Media Queries (All Screen Sizes)
   ========================================================================== */

/* 1. Large Desktops & Above (1200px and up) */
@media (min-width: 1200px) {
    .mt-lg-n4 {
        margin-top: -25px !important; /* Beech wale card ko desktop par thoda upar shift karne ke liye */
    }
}

/* 2. Tablets and Medium Screens (768px to 1199px) */
@media (max-width: 1199px) {
    .overlap-cards-section {
        padding: 0 35px 60px 35px;
        margin-top: -80px;
    }
    
    .section-bottom-title {
        font-size: 1.75rem;
    }

    .side-card, .middle-card {
        min-height: auto; /* Tablets par content ke hisab se height auto ho jayegi */
    }
}

/* 3. Mobile Phones (767px and below) */
@media (max-width: 767px) {
    .overlap-cards-section {
        margin-top: -50px; /* Mobile par overlap kam rakha hai taaki design kharab na ho */
        padding: 0 15px 40px 15px; /* Mobile par side padding kam ki hai */
        scroll-margin-top: 80px;
    }

    .section-bottom-title {
        font-size: 1.4rem; /* Mobile par heading ka size chota kiya hai */
        text-align: center;
    }

    .external-bottom-text {
        text-align: center;
    }

    .preview-white-card {
        margin-bottom: 20px; /* Mobile par cards ke beech mein gap rahe */
    }

    .side-card, .middle-card {
        min-height: auto;
    }
    
    .mt-lg-n4 {
        margin-top: 0 !important; /* Mobile par negative margin hata diya hai */
    }
}

/* 4. Small Mobile Devices (480px and below) */
@media (max-width: 480px) {
    .overlap-cards-section {
        margin-top: -30px;
        padding: 0 10px 30px 10px;
    }
    
    .section-bottom-title {
        font-size: 1.2rem;
    }
}



/* 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;
}



/* card section start */


.custom-pkg-section {
    width: 100%;
    max-width: 1920px; /* Top navbar container width ke barabar */
    margin: 0 auto;
    position: relative;
    padding: 0 60px;
}

/* Header Container */
.custom-header-box {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 30px auto;
}


.custom-pkg-desc {
    color: #666666;
    font-size: 15px;
    font-weight: 500;
    padding: 0 10px;
}

/* Toggle Switcher Style */
.custom-toggle-wrap {
    display: inline-flex;
    align-items: center;
    background-color: #e2e8f0;
    padding: 6px;
    border-radius: 50px;
    border: 1px solid #FA5400;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

.custom-tab-btn {
    background: transparent;
    border: none;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.custom-tab-btn.active {
    background-color: #FA5400;
    color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* View More Section - Uper wale nav content se perfectly match karega */
.custom-more-wrap {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
    width: 100%;
    padding: 0 10px;
}

.custom-more-link {
    font-size: 14px;
    font-weight: 600;
    color: #1E1E1E;
    text-decoration: none;
    padding: 8px 10px 8px 10px;
    border-radius: 30px;
    border: 2px solid #262626;
    transition: color 0.2s ease;
}

.custom-more-link:hover {
    color: #ffffff;
    background-color: #FA5400;
    border: 2px solid #1E1E1E;
}

/* Slider Section & Cards - Top nav ke width ke sath equal align */
.custom-slider-wrap {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 20px; /* Left/Right arrows ke liye space */
}

.custom-section-hidden {
    display: none !important;
}

.custom-world-swiper, .custom-india-swiper {
    width: 100%;
    padding: 10px 0 30px 0;
}

/* Swiper Slide Card Fix */
.custom-card-item {
    height: auto;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid #f1f5f9;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.custom-card-item img {
    height: 170px;
    width: 100%;
    object-fit: cover;
}

.custom-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.custom-card-heading {
    font-size: 14px;
    font-weight: 700;
    color: #262626;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.custom-card-time {
    font-size: 12px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 10px;
}

.custom-card-bottom {
    background-color: #FA5400;
    color: #ffffff;
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.custom-price-tag {
    font-weight: 700;
    font-size: 13px;
}

/* Slider Navigation Buttons */
.custom-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 38px;
    height: 38px;
    background: #FA5400;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #334155;
    transition: all 0.2s ease;
}

.custom-nav-arrow:hover {
    background: rgb(250, 137, 7);
    color: #ffffff;
    border-color: rgb(250, 137, 7);
}

.custom-world-prev, .custom-india-prev {
    left: -5px;
}

.custom-world-next, .custom-india-next {
    right: -5px;
}

/* Responsive for Mobile */
@media (max-width: 768px) {
    .custom-slider-wrap {
        padding: 0 10px;
    }
    .custom-world-prev, .custom-india-prev {
        left: -2px;
    }
    .custom-world-next, .custom-india-next {
        right: -2px;
    }
}



/* card_header.php css */

/* Background Image Header Section */
/* ==========================================
   FIXED MAIN SITE HEADER (Poora header top par ruk jayega)
   ========================================== */
/* 1. Main header normal rahega (Image ke sath scroll hoga) */
/* ==========================================
   UPDATED NAVBAR CSS (NO SCROLLBAR & FULLY RESPONSIVE)
   ========================================== */



/* Main Section Wrapper */
.banner-display-area {
    position: relative;
    width: 100%;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    overflow: hidden; /* Mobile par extra width chupane ke liye */
}

/* Image Row Layout */
.banner-image-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 80px;
    width: 100%;
    max-width: 1200px;
    z-index: 3;
    margin-bottom: -120px;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Common Arch Shape & Initial State (Upar se aane ke liye) */
.custom-arch-shape {
    overflow: hidden;
    box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.1);
    background: #fff;
    opacity: 0;
    transform: translateY(-80px); /* Shuru me upar rahengi */
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
}

/* Jab JavaScript yeh class add karegi tab images apni original position par aayengi */
.custom-arch-shape.slide-active {
    opacity: 1;
    transform: translateY(0);
}

.custom-arch-shape img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Left Image (Upar shift ki hui) */
.small-left {
    width: 180px;
    height: 230px;
    border-top-left-radius: 150px;
    border-top-right-radius: 150px;
    border-bottom-left-radius: 150px;
    border-bottom-right-radius: 0px;
    margin-bottom: 160px;
    transition-delay: 0.1s;
}

/* Center Big Image */
.center-big {
    width: 450px;
    height: 600px;
    border-top-left-radius: 250px;
    border-top-right-radius: 250px;
    border-bottom-left-radius: 250px;
    border-bottom-right-radius: 250px;
    transition-delay: 0.3s;
}

/* Right Image (Upar shift ki hui) */
.small-right {
    width: 230px;
    height: 280px;
    border-top-left-radius: 150px;
    border-top-right-radius: 150px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 150px;
    margin-bottom: 270px;
    transition-delay: 0.5s;
}

/* Bottom Caption & Curved Shape Container (Initial State: Niche se aane ke liye) */
.banner-caption-box {
    position: relative;
    width: 100%;
    text-align: center;
    padding-top: 150px;
    padding-bottom: 60px;
    z-index: 2;
    opacity: 0;
    transform: translateY(80px); /* Shuru me niche rahega */
    transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 1.2s ease;
    box-sizing: border-box;
}

/* Jab JavaScript yeh class add karegi tab content niche se upar aa jayega */
.banner-caption-box.content-active {
    opacity: 1;
    transform: translateY(0);
}

/* Cream/Peach Curved Background */
.curved-bg-shape {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    height: 800px;
    background-color: #f8e9d8;
    border-top-left-radius: 50% 100%;
    border-top-right-radius: 50% 100%;
    z-index: -1;
}

/* Content Inner Wrapper */
.content-inner-wrapper {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Heading Typography */
.main-heading-title {
    font-family: 'Outfit', sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    color: #111;
    line-height: 1.25;
    margin-bottom: 20px;
}

/* Sub-text Typography */
.main-sub-text {
    font-family: 'Outfit', sans-serif;
    font-size: 1.3rem;
    color: #2f2f2f;
    line-height: 1.6;
}

/* Responsive adjustments for Tablets & Mobiles */
@media (max-width: 991px) {
    .banner-image-row {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 0;
    }
    
    .center-big {
        width: 280px;
        height: 380px;
        border-radius: 140px;
    }

    .small-left, .small-right {
        width: 200px;
        height: 200px;
        margin-bottom: 0;
        border-radius: 100px;
    }

    .banner-caption-box {
        padding-top: 80px;
        padding-bottom: 50px;
    }

    /* Mobile screen ke liye curved background ki width aur radius adjustment */
    .curved-bg-shape {
        width: 180%;
        height: 100%;
        border-top-left-radius: 50% 100%;
        border-top-right-radius: 50% 100%;
    }

    .main-heading-title {
        font-size: 2.1rem;
    }

    .main-sub-text {
        font-size: 1.1rem;
    }
}

@media (max-width: 480px) {
    .main-heading-title {
        font-size: 1.7rem;
    }
    
    .curved-bg-shape {
        width: 220%;
    }
}


/* 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;
    background-color: #F8F9FA;;
    margin-top: 20px;
}

/* 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: 25px;
    padding-bottom: 130px;
    background: url('../image/footer.png') center bottom / cover no-repeat !important;
    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%;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0) 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 p {
    font-size: 14px;
    color: #262626;
    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; }
}

















/* ==========================================
   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 {
    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: #1e3a8a;
    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: #16a34a; 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;
    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: #16a34a;
    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; /* Scroll chalu rahega */
    padding: 40px 20px;
    box-sizing: border-box;
    
    /* Scrollbar hide karne ke liye */
    scrollbar-width: none; /* Firefox ke liye */
}

/* Chrome, Edge aur Safari ke liye scrollbar hide karne ka tareeqa */
.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
   ========================================== */

@media (max-width: 1200px) {
    .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;
    }

    /* Safe margins and padding applied symmetrically on both left and right */
    .package-details-main {
        padding-left: 14px !important;
        padding-right: 14px !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: 240px !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: 15px !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.35rem !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: 200px !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;
    }
}

/* Card Styling */
.dt-single-card {
    position: relative;
    height: 250px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px;
    text-align: center;
    background-size: cover;
    background-position: center;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Header aur Banner Image ke dark/nature tones se match karta hua Linear Gradient */
.dt-card-shadow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(10, 15, 25, 0.88), rgba(30, 35, 50, 0.55), rgba(0, 0, 0, 0.25));
    z-index: 1;
}

.dt-card-content, 
.dt-action-box {
    position: relative;
    z-index: 2;
}

.dt-card-title {
    font-size: 2.6rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #ffffff;
    text-transform: capitalize;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.6);
}

.dt-rating-stars {
    font-size: 1.1rem;
    color: #facc15;
    letter-spacing: 2px;
}

.dt-star-off {
    color: #ffffff;
}

/* Button Customization */
.dt-action-box {
    display: flex;
    justify-content: center;
}

.dt-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 28px;
    border-radius: 40px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.dt-dots-style {
    margin-left: 6px;
    letter-spacing: 2px;
}

.dt-link-btn:hover {
    background: #ffffff;
    color: #111827;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.4);
}





/* 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 */
.contact-form-wrapper {
    padding: 60px 60px 60px 80px;
}

.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;
}












.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); /* Yeh ensure karega ki ek row me exactly 3 cards aayein */
    gap: 24px;
    margin-bottom: 40px;
}

/* Responsive ke liye (agar mobile screen par 1 ya 2 card dikhane hon) */
@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; /* Yeh line underline hata degi */
    display: inline-block;
    transition: background-color 0.2s;
}

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

/* Initially Hide Extra Cards */
.extra-card {
    display: none;
}

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

/* 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: #012469;
    color: #ffffff;
}

.btn-arrow {
    font-size: 16px;
    transition: transform 0.3s ease;
}