/* header start */
 .hero-section {
     /* background-image: url('../../asstes/img/bannar/inne-banner-gallery.png'); */
     
   
     /* Replace with your image URL */
     background-size: cover;
     background-position: center;
     position: relative;
     height: 540px;
     /* Adjust as needed */
 }

 /* .diagonal-split {
     background: white;
    
     clip-path: polygon(0 0, 75% 0, 80% 100%, 0 100%);
 }

 .diagonal-split-red {
     background: linear-gradient(to left, #FF0000, #990000);
    
     clip-path: polygon(76% 0, 100% 0, 100% 100%, 81% 100%);
 } */

 .diagonal-split {
    background: white;
    clip-path: polygon(0 0, 75% 0, 80% 100%, 0 100%);
}

.diagonal-split-red {
    background: linear-gradient(to left, #FF0000, #990000);
    clip-path: polygon(76% 0, 100% 0, 100% 100%, 81% 100%);
}

/* 👇 Responsive for mobile & tablets */
@media (max-width: 1023px) {
    .diagonal-split {
        clip-path: polygon(0 0, 55% 0, 60% 100%, 0 100%);
    }

    .diagonal-split-red {
        clip-path: polygon(56% 0, 100% 0, 100% 100%, 61% 100%);
    }
}

/* header end */

/* home start here */
    /* Custom CSS for slide visibility and transitions */
        .slide {
            opacity: 0;
            visibility: hidden;
            position: absolute; /* Allows slides to stack */
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transition: opacity 0.7s ease-in-out, visibility 0.7s ease-in-out;
        }

        .slide.active {
            opacity: 1;
            visibility: visible;
            position: relative; /* Take up space when active for layout */
            z-index: 10; /* Ensure active slide is on top */
        }

        .slide-bg {
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .text-overlay {
            background: linear-gradient(to right, rgba(0,0,0,0.7) 40%, rgba(0,0,0,0));
        }

        /* Adjustments for better overlay positioning with absolute slides */
        .slider-content {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            padding: 2rem 4rem; /* Responsive padding */
        }

        /* Specific styles for the "Every Mile Of The Way" text */
        .bottom-right-text {
            position: absolute;
            bottom: 4rem; /* Adjust as needed */
            right: 4rem; /* Adjust as needed */
            font-size: 2rem; /* Example size */
            color: rgba(255, 255, 255, 0.9);
            z-index: 0; /* Behind main text overlay */
        }

        /* Ensure thumbnails are visible on top */
        .thumbnail-container {
            z-index: 20; /* Higher than slides */
        }
/* home end here */

 /* blog start  */



 /* For the "Adventure" badge */
 .adventure-badge {
     background-color: #EF4444;
     /* Red color, similar to Tailwind's red-500/600 */
 }

 .sidebar-fixed {
            position: -webkit-sticky; /* For Safari */
            position: sticky;
            top: 0; /* Adjust as needed for any header */
            height: calc(100vh - 0px); /* Full viewport height minus any header space */
            overflow-y: auto;
        }

 /* blog end  */

 /* booking start here */
  .form-background-container {
            background-image: url('../../asstes/img/booking/bg.png');
            background-size: 100% 100%; /* Stretch to fit the container */
            background-repeat: no-repeat;
            background-position: center center;
            min-height: 100vh; /* Ensure it takes full viewport height initially */
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            /* padding-bottom: 20px; Add some padding around the form */
        }

        /* Adjust background image size for smaller screens if needed to avoid cutting off */
        @media (max-width: 768px) {
            .form-background-container {
                background-image: none; /* or adjust as necessary */
                
            }
        }

 /* booking end here */

 /* tour dateils start here */
 /* Custom styles for Itinerary circle and line */
        .itinerary-item {
            position: relative;
            padding-left: 2rem; /* Space for the circle and line */
            margin-bottom: 1.5rem;
        }
        .itinerary-item::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.25rem; /* Adjust to align with text */
            width: 0.75rem;
            height: 0.75rem;
            border-radius: 50%;
            background-color: #ef4444; /* Red-500 */
            z-index: 10;
        }
        .itinerary-item:not(:last-child)::after {
            content: '';
            position: absolute;
            left: 0.3125rem; /* Half of circle width */
            top: 1.25rem; /* Below the circle */
            bottom: -0.75rem; /* Extend downwards */
            width: 2px;
            background-color: #fca5a5; /* Red-300 */
        }

        /* Active tab styling */
        .tab-btn.active {
            background-color: #ef4444; /* Red-500 */
            color: white;
        }
 /* tour dateils end here */

 /* contact start here */
 .bg-heading{
    background-image: url('../../asstes/img/contact/bg-background.png');
            background-size: 100% 100%; /* Stretch to fit the container */
            background-repeat: no-repeat;
            background-position: center center;
            position: relative;
        
 }
   @media (max-width: 768px) {
            .bg-heading {
                background-image: none; /* or adjust as necessary */
                
            }
        }
 /* contact end here */

 /* about start here */
 .bgAbout{
     background-image: url('../../asstes/img/about/imgbg.png');
     background-size: 100% 100%; /* Stretch to fit the container */
     background-repeat: no-repeat;
     background-position: center center;
     position: relative;
 }
 /* about end here */

 /* gallery start here */

  .bgGallery{
     background-image: url('../../asstes/img/gallery/hjnhj 1.png');
     background-size: 100% 100%; /* Stretch to fit the container */
     background-repeat: no-repeat;
     background-position: center center;
     position: relative;
 }

 /* gallery end here */

/* Our Recognitions home page */
 .slider-container {
     overflow: hidden;
     position: relative;
 }

 .slider-wrapper {
     display: flex;
     transition: transform 0.5s ease-in-out;
 }

 .slider-item {
     flex: 0 0 100%;
     /* Each item takes full width */
     min-width: 0;
     /* Ensures proper shrinking */
     display: flex;
     justify-content: center;
     align-items: center;
 }

 /* Custom styling for the cards */
 .card-container {
     border: 1px solid #e2e8f0;
     /* Tailwind's border-gray-300 */
     border-radius: 0.5rem;
     /* Tailwind's rounded-lg */
     padding: 1.5rem;
     /* Tailwind's p-6 */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     width: 100%;
     /* Ensure card takes full width of slider item */
     max-width: 300px;
     /* Limit card width */
 }

 .card-image {
     height: 120px;
     /* Adjust as needed */
     object-fit: contain;
     margin-bottom: 1rem;
 }

 .card-button {
     background-color: #ef4444;
     /* Red color */
     color: white;
     padding: 0.5rem 1rem;
     border-radius: 0.25rem;
     margin-top: 1rem;
 }

 .card-description {
     font-size: 0.875rem;
     /* sm text */
     color: #4a5568;
     /* gray-700 */
     margin-top: 0.5rem;
 }

 /* Adjust for smaller screens to show one item */
 @media (max-width: 767px) {
     .slider-item {
         flex: 0 0 100%;
     }
 }

 /* Adjust for medium screens to show two items */
 @media (min-width: 768px) and (max-width: 1023px) {
     .slider-item {
         flex: 0 0 50%;
     }

     .slider-wrapper {
         transform: translateX(calc(var(--current-slide, 0) * -50%));
     }
 }

 /* Adjust for large screens to show three items */
 @media (min-width: 1024px) {
     .slider-item {
         flex: 0 0 33.333333%;
     }

     .slider-wrapper {
         transform: translateX(calc(var(--current-slide, 0) * -33.333333%));
     }
 }

 /* Our Recognitions home page end */

 /* home tour category start here */
  /* Custom CSS for tour slider - optional, but helps with positioning arrows */
        .tour-slider-container {
            position: relative;
            overflow: hidden;
        }

        .tour-slider-wrapper {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .tour-slider-item {
            flex: 0 0 100%; /* Each item takes full width of its parent (for single item view) */
            min-width: 0; /* Ensures it shrinks correctly */
            box-sizing: border-box; /* Include padding/border in width */
            padding: 1rem; /* Adjust as needed for spacing between cards */
        }

        /* Responsive adjustments for showing multiple items */
        @media (min-width: 640px) { /* sm */
            .tour-slider-item {
                flex: 0 0 50%;
            }
        }

        @media (min-width: 1024px) { /* lg */
            .tour-slider-item {
                flex: 0 0 25%;
            }
        }

        /* Custom styles for the background elements */
  
        /* Styling for the navigation buttons container below the slider */
        .tour-slider-nav-dots-container {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 2rem; /* Space above the buttons */
            background-color: white;
            border-radius: 9999px; /* Fully rounded */
            padding: 0.5rem 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
            width: fit-content; /* Only take up necessary width */
            margin-left: auto;
            margin-right: auto;
        }

        .tour-slider-nav-btn-bottom {
            background: none;
            border: none;
            cursor: pointer;
            padding: 0.5rem;
            color: #4B5563; /* Gray-700 */
            transition: color 0.2s ease-in-out;
        }

        .tour-slider-nav-btn-bottom:hover {
            color: #EF4444; /* Red-500 */
        }

        .tour-slider-nav-separator {
            width: 1px;
            height: 24px; /* Matches SVG height */
            background-color: #E5E7EB; /* Gray-200 */
            margin: 0 0.5rem;
        }
 /* home tour category end here */

 /* home top destination start here */
  /* Custom styles for the oval shape and text overlay from previous response */
        .oval-card {
            border-radius: 50% / 30%; /* Adjust values for desired oval shape */
            /* overflow: hidden; */
            position: relative;
            aspect-ratio: 1 / 1.2; /* Maintain aspect ratio roughly for the cards */
            flex-shrink: 0; /* Important for flex layout */
             overflow: visible,
        }

        .oval-card .imgg {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
            border-radius: 50% / 20%;
            /* Ensures the top part of the image is visible */
        }

        .card-text-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(255, 0, 0, 0.7); /* Red with some transparency */
            color: white;
            text-align: center;
            padding: 0.5rem 0;
            font-weight: bold;
            border-bottom-left-radius: 50% 30%; /* Match parent's bottom curve */
            border-bottom-right-radius: 50% 30%; /* Match parent's bottom curve */
        }

        /* Responsive adjustments for oval shape */
        @media (min-width: 768px) {
            .oval-card {
                border-radius: 50% / 25%;
            }
            .card-text-overlay {
                border-bottom-left-radius: 50% 25%;
                border-bottom-right-radius: 50% 25%;
            }
        }

        @media (min-width: 1024px) {
            .oval-card {
                border-radius: 50% / 20%;
            }
            .card-text-overlay {
                border-bottom-left-radius: 50% 20%;
                border-bottom-right-radius: 50% 20%;
            }
        }
        
        
 /* home top destination end here */
 
 
 /* whatapp and phone call css style start*/
.fixed-buttons-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
    display: flex;
    flex-direction: column; 
    gap: 10px; 
}
/* whatapp and phone call css style end */