/* Remembering tribute section */
.remembering-section {
    position: relative;
}

/* Outer hero background (sky) */
.remembering-hero {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 50px 0;
}

/* Inner card with family image and text */
.remembering-card {
    position: relative;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    max-width: 100%;
}


/* Use the promo image as the background on larger screens */
.remembering-card.has-image {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* Slight overlay so text is always readable */
.remembering-card.has-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.4));
    pointer-events: none;
}

.remembering-card h3,
.remembering-card p,
.remembering-card a {
    position: relative;
    z-index: 1;
}

/* Mobile tweaks */
@media (max-width: 575.98px) {
    .remembering-hero {
        padding-bottom: 120px;
    }

    .remembering-card {
        padding: 20px;
        border-radius: 6px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        margin-top: 20px;
    }

    .remembering-card-inner {
        flex-direction: column;
    }

    .remembering-card-photo {
        flex: 0 0 auto;
    }

    .remembering-card-photo img {
        height: auto;
        max-height: 260px;
        object-fit: cover;
    }

    .remembering-card h3 {
        font-size: 1.4rem;
        margin-top: 10px;
    }

    .remembering-card p {
        margin-bottom: 1rem;
        font-size: 0.95rem;
        word-wrap: break-word;
    }
}

/* Desktop spacing so the card sits nicely over the image */
@media (min-width: 992px) {
    .remembering-hero {
        padding: 70px 0 80px;
    }

    .remembering-card {
        margin-top: 20px;
    }
}

    .scrolling-wrapper {
    display: flex;
    overflow-x: scroll;
    gap: 10px;
    padding: 8px 0;
}
.small-text-slogan {
    color: #fff;
    font-size: 1rem;
    font-style: italic;
}
.scrollable-tour-list {
    -webkit-overflow-scrolling: touch; /* iOS smooth scroll */
    touch-action: pan-y; /* Allow vertical scroll on touch */
    overscroll-behavior: contain; /* Prevent parent scroll from kicking in */
}

.time-text {
    color: #fff;
}
    .tour-dates-list::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    .tour-dates-list::-webkit-scrollbar-thumb {
        background-color: #aaa;
        border-radius: 10px;
    }
    .tour-dates-list::-webkit-scrollbar-track {
        background-color: transparent;
    }

#parallax-2 {
    position: relative;
    background: url({{$appearance->advert_banner_image}}) no-repeat;
    background-size: 100% auto; /* Ensure the image maintains its aspect ratio and doesn't zoom */
    background-position: center center; /* Keep the image centered */
    background-attachment: fixed; /* Apply parallax effect */
    height: 50vh;
    animation: moveBackground 160s linear infinite; /* Slow movement */
}

/* Define the animation for the background movement */
@keyframes moveBackground {
    0% {
        background-position: 0 0; /* Starting position */
    }
    50% {
        background-position: 100% 0; /* Move left */
    }
    100% {
        background-position: 0 0; /* Move back to original position */
    }
}

.parallax {
	padding: 0;
	margin: 0;
	background-attachment: fixed;
	position: relative;

}
.parallax.fixed {
	background-attachment: fixed;
}
.parallax.fixed-desktop {
	background-attachment: fixed!important;
}
.donate-btn {
    background: linear-gradient(135deg, #ffcc00, #ff6600);
    color: #fff;
    min-width: 160px; /* Ensures consistent size */
    border: none;
    padding: 10px 10px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap; /* Prevents text wrapping */
    overflow: hidden; /* Prevents extra spacing */
    box-shadow: 0 4px 10px rgba(255, 102, 0, 0.4);
    position: relative;
    z-index: 1;
    animation: pulse 3s infinite;
}
.donate-btn span {
    display: inline-block;
    text-align: center;
    width: 120px; /* Adjust this to the longest text width */
    transition: opacity 0.6s ease-in-out;
}

  /* Subtle Glow Effect */
  .donate-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff6600, #ff3300);
    border-radius: 5px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .donate-btn:hover::before {
    opacity: 1;
  }

  .donate-btn i {
    margin-right: 8px;
  }

  /* Animation - Button Gently Pulses */
  @keyframes pulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 10px rgba(255, 102, 0, 0.7);
    }
    25% {
      transform: scale(1.05);
      box-shadow: 0 0 20px rgba(255, 102, 0, 1);
    }
    50% {
      transform: scale(1);
      box-shadow: 0 0 10px rgba(255, 102, 0, 0.7);
    }
  }

  /* Fade Animation for Text */
   .donate-text {
    display: inline-block;
    text-align: center;
    transition: opacity 0.6s ease-in-out;
    white-space: nowrap; /* Prevents text wrapping */
}
.scrolling-wrapper .blog-block {
    min-width: 300px; /* Adjust this as needed */
}

.scrolling-wrapper::-webkit-scrollbar {
    display: none; /* Hide scrollbar for Webkit browsers */
}

.scrolling-wrapper {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
 .live-dot {
        display: inline-block;
        width: 14px;
        height: 14px;
        background-color: red;
        border-radius: 50%;
        margin-right: 5px;
        box-shadow: 0 0 0 rgba(255, 0, 0, 0.8);
        animation: pulse 1.5s infinite;
    }

    @keyframes pulse {
        0% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.8);
        }
        50% {
            transform: scale(1.3);
            box-shadow: 0 0 10px 3px rgba(255, 0, 0, 0.5);
        }
        100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.8);
        }
    }
    @media (min-width: 768px) and (max-width: 1024px) {
    .image-column {
        margin: 0 auto; /* Centers the section */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .inner-column {
        width: 100%;
        max-width: 100%; /* Adjust width to fit the tablet screen */
    }

    .image-box {
        margin: 0 auto;
    }
}

/* Schedule Container */
.schedule-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    align-items: stretch;
    max-width: 100%;
}

/* Featured Show Styling */
.featured-show {
    display: flex;
    flex-direction: column; /* Stack image and overlay */
    align-items: center;
    width: 100%;
    min-width: 600px;
    max-width: 600px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    cursor: pointer;
}

.featured-show img {
    width: 100%;
    height: auto;
    max-height: 300px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
}

/* Make sure the overlay is below the image */
.featured-overlay {
    width: 100%;
    background: rgba(110, 187, 246, 0.95);
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Hover effect - Darken image */
.featured-show:hover img {
    filter: brightness(70%);
    transform: scale(1.02); /* Slight zoom effect */
}

/* Hover effect - Add shadow */
.featured-show:hover {
    box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.3);
}

/* Adjust text size */
.featured-overlay h2 {
    margin-bottom: 5px;
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
    font-family: 'Roboto';
}

.live-text {
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
    font-family: 'Roboto';
}

.featured-overlay p {
    font-size: 18px;
    color: #ffffff;
    font-weight: 400;
}
.show-image-container {
    position: relative;
    display: inline-block;
    width: 100%;
}
.list-box .inner {
  padding: 10px;
  text-align: center;
}
.list-box img {
  max-width: 100%;
  height: auto;
}

.description-overlay {
    position: absolute;
    top: 10px; /* Adjusts description position */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    width: 90%;
    border-radius: 5px;
}
.rating .fa {
  font-size: 1.2rem; /* Adjust size as needed */
  color: #f5c518; /* Star colour */
  margin: 0 2px;
  
}
.rating {
  font-size: 1.2rem; /* Adjust size as needed */
  color: #f5c518; /* Star colour */
  margin: 0 2px;
}
.fa-star::before {
    content: "\f005";
    font-size: 1.2rem; /* Adjust size as needed */
    color: red; /* Star colour */
    margin-left: 12px;
}
@media (max-width: 575.98px) {
  .rating .fa {
    font-size: 1rem; /* Slightly smaller on mobile */
    margin: 0 1px;
  }
}

.show-image-container:hover .description-overlay {
    opacity: 1;
}

    /* Background image and Styling */
/* Background image styling with 50vh height */
.custom-top-banner {
    position: relative;
    height: 50vh;
    width: 100%;
    background-size: cover;
    background-position: center;
}

/* Custom Text Styling - Centered */
.custom-about-service {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%; /* Adjusted for more flexibility */
    z-index: 2; /* Ensure the text stays above the image */
}

/* Title Styling */
.custom-title {
    font-family: 'Dancing Script', cursive;  /* Apply the fancy font */
    font-size: 54px;
    font-weight: bold;
    color: #fff;
    margin-top: 25px;
    margin-bottom: 15px;
    text-shadow: 
        0px 0px 4px rgba(0, 0, 0, 0.8),  /* Outline shadow */
        0px 0px 10px rgba(0, 0, 0, 0.8);  /* Glowing effect */
}

/* Caption Styling */
.custom-caption {
    font-size: 20px;
    color: #fff;
    margin-bottom: 10px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Drop shadow for caption */
}

/* Button Styling */
.custom-btn-booking {
    font-size: 16px;
    background-color: #ffe005;
    color: #54528f;
    padding: 3px 20px;
    text-transform: uppercase;
    border-radius: 14px;
    transition: background-color 0.3s ease;
    display: inline-block;
    margin-top: 16px;
}

.custom-btn-booking:hover {
    background-color: #54528f;
    color: #fff;
}

/* Button Wrapper (Ensuring proper spacing) */
.custom-button-wrapper {
    margin-top: 30px;
    text-align: center;
    z-index: 3;
}

/* Wrapper for text */
.custom-text-wrapper {
    width: 100%;
}

/* Custom Section Styling (Ensures space between text and button) */

/* Responsive Adjustments */
@media (max-width: 768px) {
    .custom-top-banner {
        height: 30vh; /* Reduces banner height for smaller screens */
    }

    .custom-about-service {
        width: 90%; /* More flexible width on smaller screens */
        top: 40%; /* Adjust vertical position */
    }

    .custom-title {
        font-size: 28px;
        margin-top: -570px;
    }

    .custom-caption {
        font-size: 16px; /* Reduce caption size */
    }

    .custom-btn-booking {
        font-size: 16px; /* Adjust button size */
        padding: 4px 25px; /* Adjust button padding */
        margin-top: -20px;
    }
    .custom-text-wrapper {
    width: 100%;
    margin-top: 220px;
}
}


  /* End Background image and Styling */
  
/* Mobile View: Stack Items & Resize */
@media (max-width: 768px) {
    .schedule-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 0 10px;
    }

    .featured-show {
        width: 90%;
        min-width: unset;
        max-width: 100%;
    }

    .featured-overlay {
        padding: 10px;
        font-size: 18px;
    }

    .featured-overlay h2 {
        font-size: 20px;
        color: #ffffff;
        font-weight: 900;
    }

    .featured-overlay p {
        font-size: 18px;
        color: #ffffff;
        font-weight: 400;
        
    }
}
/* Mobile View: Stack Items & Resize */
@media (max-width: 768px) {
    
    .custom-top-banner {
        height: 30vh;
    }
    .schedule-container {
        flex-direction: column;
        align-items: center;
        gap: 10px;
        padding: 0 10px;
    }

    .featured-show {
        width: 90%;
        min-width: unset;
        max-width: 100%;
        display: flex;
        flex-direction: column; /* Stack image and overlay */
        align-items: center;
    }

    .show-image-container {
        width: 100%;
    }

    .featured-overlay {
        position: static; /* Remove absolute positioning */
        width: 100%;
        text-align: center;
        background: rgba(110, 187, 246, 0.95);
        border-radius: 10px;
        padding: 15px;
        margin-top: -5px; /* Adjust spacing between image and overlay */
    }

    .featured-overlay h2 {
        font-size: 20px;
        color: #ffffff;
        font-weight: 900;
    }

    .featured-overlay p {
        font-size: 18px;
        color: #ffffff;
        font-weight: 400;
    }
}
/* Default layout (for larger screens like desktops) */
@media (max-width: 1024px) {
    .about-section-five .content-column, 
    .about-section-five .image-column, 
    .about-section-five .timetable-block {
        width: 50%;
        display: inline-block;
        vertical-align: top;
    }

    .about-section-five .image-column {
        display: none; /* Hide the image section on tablets */
    }
}

.custom-top-banner {
        height: 30vh;
}
/* Tablet and smaller screen devices */
@media (max-width: 768px) {
    .about-section-five .content-column, 
    .about-section-five .timetable-block {
        width: 100%; /* Stack them vertically on smaller devices */
        display: block;
    }

    /* Optional: Hide About Image Section on small devices */
    .about-section-five .image-column {
        display: none;
    }
}

/* For mobile devices, you may want to stack everything vertically */
@media (max-width: 576px) {
    .about-section-five .content-column, 
    .about-section-five .timetable-block {
        width: 100%;
        display: block;
    }

    .about-section-five .image-column {
        display: none;
    }
    .custom-top-banner {
        height: 30vh;
    }
}

    .testimonial-section .testimonial-block {
  padding: 20px;
}
.packages-section-two .overflow-auto::-webkit-scrollbar {
    height: 6px;
}
.packages-section-two .overflow-auto::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 10px;
}
.equal-service-box {
  min-height: 360px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 0 10px rgba(0,0,0,0.05);
}

.service-carousel .package-block-two {
  height: 100%;
}

.description-text {
  color: #6E6E6E;
  font-family: "Cormorant";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px;
  margin-bottom: 15px;
}
.testimonial-section .inner-box {
  background: #ffffff;
  border-radius: 15px;
  padding: 25px;
  box-shadow: 10px 10px 10px rgba(0.1, 0.1, 0.1, 0.1);
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.testimonial-section .inner-box:hover {
  transform: translateY(-10px);
}

.testimonial-section .image-box {
  margin-bottom: 15px;
}

.testimonial-section .client-img {
  width: 80px !important;
  height: 80px !important;
  object-fit: cover;
  border-radius: 50%; /* Makes the image circular */
  margin: 0 auto;
  border: 3px solid #d6a4ff; /* Optional: Adds a border around the image */
}

.testimonial-section .info-box {
  margin-bottom: 15px;
}

.testimonial-section .name {
  font-size: 20px;
  font-weight: bold;
  color: #333;
  margin-top: 10px;
}

.testimonial-section .rating {
  margin: 10px 0;
}

.testimonial-section .rating .fa {
  color: #ffbc00; /* Star color */
  font-size: 18px;
}

.latest-item {
    padding: 15px;
    text-align: center;
    background: #f9f9f9;
    border-radius: 5px;
    transition: transform 0.3s ease-in-out;
}

.latest-item img {
    height: 203px;
    width: auto;
    object-fit: cover; 
    border-radius: 5px;
}

.latest-item h4 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
}

.latest-item p {
    font-size: 14px;
    color: #666;
    margin-top: 10px;
}

.latest-item .btn {
    margin-top: 15px;
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.header-gap {
  margin-top: 70px;
}
@media (min-width: 768px) {
  .header-gap {
    margin-top: 60px;
  }
}
@media (max-width: 576px) {
  .header-gap {
    margin-top: 1px; /* iPhones and smaller screens */
  }
}
.latest-item:hover {
    transform: scale(1.05);
}
    .custom-top-banner-wrapper {
        position: relative;
        height: 50vh;
        overflow: hidden;
        z-index: 1;
    }

    .custom-top-banner {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-position: center;
        background-size: cover;
        opacity: 0;
        transform: scale(1);
        transition: opacity 1s ease-in-out, transform 10s ease-in-out;
        z-index: 0;
    }

    .custom-top-banner.active {
        opacity: 1;
    }

    .custom-top-banner.zooming {
        transform: scale(1.2);
    }

    .custom-slide {
        position: relative;
        padding-bottom: 150px; /* creates space for the overlapping cards */
        z-index: 1;
    }

    .floating-cards-wrapper {
        position: absolute;
        bottom: -110px;
        left: 0;
        width: 100%;
        z-index: 10;
    }

    .card-box {
        background: #fff;
        padding: 5px;
        margin-top: 20px;
        text-align: center;
        border-radius: 10px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
        pointer-events: auto;
    }

    .card-box:hover {
        transform: translateY(-10px);
    }

.count-box {
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #f1c40f; /* or any background colour you like */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 10px auto;
  overflow: hidden;
}

.count-box .icon-bg {
  position: absolute;
  top: 18%; /* push it higher or lower */
  right: 16%; /* move it off to the side */
  font-size: 60px; /* bigger for background feel */
  color: rgba(0, 0, 0, 0.05);
  z-index: 1;
  pointer-events: none; /* avoid accidental hovers */
}


.count-box .count-text {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 26px;
  font-weight: 600;
}


    .card-box:hover {
        transform: translateY(-10px);
    }
@media (min-width: 768px) {
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
    
}
.circle-number {
  position: relative;
  width: 60px;
  height: 60px;
  background: #f3f3f3;
  border-radius: 50%;
  margin: 0 auto 15px;
  line-height: 60px;
  font-weight: bold;
  font-size: 18px;
  border: 1px solid #ddd;
  text-align: center;
  overflow: hidden;
}

.circle-number .icon-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 28px; /* adjust as needed */
  color: rgba(0, 0, 0, 0.1); /* faded for subtle look */
  transform: translate(-50%, -50%);
  z-index: 1;
}

.circle-number .count-text {
  position: relative;
  z-index: 2;
  color: #333;
}


    .card-box h5 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .card-box p {
        font-size: 14px;
        color: #666;
    }

    .score {
        display: block;
        margin-top: 10px;
        color: #c58f45;
        font-weight: 600;
    }

.tour-date-item:hover {
    background-color: #dfe6ea !important;
}
.live-show:hover,
.next-show:hover {
    background-color: #dfe6ea !important;
    cursor: pointer;
}
.circle-number {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: 0 auto 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: #f3f3f3;
    color: #444;
}

.live-icon {
    background: #ffe5e5;
    color: #d63031;
}

.tour-icon {
    background: #e5f3ff;
    color: #0984e3;
}

.latest-icon {
    background: #fdf1d8;
    color: #e67e22;
}

    @media (max-width: 767px) {
        .floating-cards-wrapper {
            position: static;
            margin-top: 30px;
        }

        .custom-slide {
            padding-bottom: 30px;
        }

        .card-box {
            margin-bottom: 30px;
        }
    }
    
/* Shared scrollable card lists */
.scrollable-live-list,
.scrollable-tour-list {
    max-height: 182px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;  /* smooth scrolling on iOS */
    overscroll-behavior-y: contain;     /* stop scroll bubbling to page */
    /* old Edge fallback */
    -ms-scroll-chaining: none;
}

/* Extra hint on tablets */
@media (min-width: 768px) and (max-width: 1024px) {
    .scrollable-live-list,
    .scrollable-tour-list {
        touch-action: pan-y;
    }
}