/* Shared carousel builder styles. */

/* democarousel_builder.php */
.service-detail__demo-carousel {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .service-detail__demo-carousel .demo-carousel-wrapper {
        max-width: 790px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 16px;
    }

    @media (max-width: 575px) {

    .service-detail__demo-carousel {
        max-width: 380px;
    }

    .service-detail__demo-carousel .demo-carousel-wrapper {
    max-width: 370px;

    }
}


    .demo-carousel-wrapper {
        box-sizing: border-box;
        margin: 0 auto;
    }

    .demo-carousel-wrapper .embla {
        overflow: visible;
        position: relative;
        width: 100%;
    }

    .demo-carousel-wrapper .embla__viewport {
        overflow: hidden;
        width: 100%;
    }

    .demo-carousel-wrapper .embla__container {
        display: flex;
        user-select: none;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: transparent;
    }

    .demo-carousel-wrapper .embla__controls {
        display: block;
        margin-top: 0;
    }
    .demo-carousel-wrapper .embla__buttons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 50%;
        left: 0;
        right: 0;
        transform: translateY(-50%);
        pointer-events: none;
        z-index: 2;
    }
    .demo-carousel-wrapper .embla__button {
        -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
        -webkit-appearance: none;
        appearance: none;
        background-color: white;
        touch-action: manipulation;
        display: inline-flex;
        text-decoration: none;
        cursor: pointer;
        border: 0;
        padding: 0;
        margin: 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 2.6rem;
        height: 2.6rem;
        z-index: 3;
        border-radius: 50%;
        color: var(--text-body);
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: auto;
    }
    .demo-carousel-wrapper .embla__button--prev {
        transform: translateX(-35%);
    }
    .demo-carousel-wrapper .embla__button--next {
        transform: translateX(35%);
    }
    .demo-carousel-wrapper .embla__button:disabled {
        color: var(--detail-high-contrast);
    }
    .demo-carousel-wrapper .embla__button__svg {
        width: 35%;
        height: 35%;
    }

    .demo-carousel-wrapper .gazcard {
        height: 340px;
        padding-top: 8px;
    }

    .demo-carousel-wrapper .avatar-container {
        width: 80px;
        height: 80px;
    }

    .demo-carousel-wrapper .gazcard .img img {
        width: 75px;
        height: 75px;
    }

    .demo-carousel-wrapper .artist-name {
        font-size: 1.05rem;
    }

    .demo-carousel-wrapper .artist-subheading {
        font-size: 0.95rem;
    }

    .demo-carousel-wrapper .gcvoicedesc {
        font-size: 0.82rem;
        max-height: 170px;
        min-height: 170px;
    }

/* videocarousel_builder.php */
.service-detail__video-carousel {
        max-width: 800px;
        margin-left: auto;
        margin-right: auto;
    }

    .service-detail__video-carousel .video-carousel-wrapper {
        max-width: 790px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 16px;
    }


@media (max-width: 575px) {

      .service-detail__video-carousel {
        max-width: 380px;
    }

    .service-detail__video-carousel .video-carousel-wrapper {
        max-width: 370px;
        border-radius: 10px;
    }

}

    .video-card iframe {
    pointer-events: auto; /* Allow interaction */
    user-select: none; /* Prevent text selection */
    -webkit-user-drag: none; /* Disable drag on Webkit browsers */
    touch-action: manipulation; /* Allow taps, prevent weird gestures */
}

    .video-carousel-wrapper {
    box-sizing: border-box;
    margin: 0 auto;
    }

    .video-carousel-wrapper .embla {
    overflow: visible;
    position: relative;
    width: 100%;
    }

    .video-carousel-wrapper .embla__viewport {
    overflow: hidden;
    width: 100%;
    }

    .video-carousel-wrapper .embla__container {
    display: flex;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    }

    .video-carousel-wrapper .embla__slide {
        flex: 0 0 300px;
        min-width: 0;
    margin-right: 10px;
    font-size: 0.8rem;
    }

    .video-carousel-wrapper .embla__controls {
    display: block;
    margin-top: 0;
    }
    .video-carousel-wrapper .embla__title {
        align-self: center;
        justify-self: end;
        text-align: right;
        color: #000;
        font-weight: 600;
        font-size: 1rem;
    }
    .video-carousel-wrapper .embla__buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    }

    .video-carousel-wrapper .embla__button {
    -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
    -webkit-appearance: none;
    appearance: none;
    background-color: #dedede;
    touch-action: manipulation;
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 2.6rem;
    height: 2.6rem;
    z-index: 3;
    border-radius: 50%;
    color: var(--text-body);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    }
    .video-carousel-wrapper .embla__button--prev {
    transform: translateX(-35%);
    }
    .video-carousel-wrapper .embla__button--next {
    transform: translateX(35%);
    }
    .video-carousel-wrapper > .recording-services-link {
    display: inline-flex;
    margin-top: 0.8rem;
    }
    .video-carousel-wrapper .embla__button:disabled {
    color: var(--detail-high-contrast);
    }
    .video-carousel-wrapper .embla__button__svg {
    width: 35%;
    height: 35%;
    }



   


    .embla__container .gazcard .img {
        position: relative;
        background: #539dff;
        height: 108px;
        width: 108px;
        border-radius: 50%;
        margin-bottom: 10px;
    }
    .embla__container .gazcardf .img {
        background: #ff5353;
    }


    .embla__container .img img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #fff;
    }
    .embla__container .gazcard h2 {
        font-weight: 500;
        font-size: 1.56rem;
        
    }
    .embla__container .gazcard span {
        color: #6A6D78;
        font-size: 1.1rem;
    }
  
    .gazvideocard {
        display: flex;
        flex-direction: column; /* Stack child elements vertically */
        justify-content: flex-start; /* Align items to the top */
        align-items: center; /* Center-align content horizontally */
        padding-top: 20px; /* Space between top of card and content */
        position: relative; /* To position elements inside the card */
        height: 480px;
    }

    .embla__container :where(.gazvideocard, .img) {
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .embla__container .gazvideocard .img {
    position: relative;
    cursor: pointer;
  
    &:before {
        position: absolute;
        filter: invert(100%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        content: "";
        background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-play-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m11.596%208.697-6.363%203.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01%201.233-.696l6.363%203.692a.802.802%200%200%201%200%201.393%22/%3E%3C/svg%3E');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;
        opacity: 0.6;
        text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
    }
    &:hover:before {
      color: #eee;
      opacity: 1;
   
    }
  }


    .gazvideocard .img {
        margin-top: 0; /* Reset margin if any exists */
        margin-bottom: 10px; /* Space below the image */
        position: relative; /* Default positioning for the image */
        top: 0; /* Align the image at the top of the card */
    }

    .gazvideocard .img img {
        display: block; /* Ensures the image behaves like a block */
        margin: 0 auto; /* Center the image horizontally */
        max-width: 100%; /* Prevent overflow */
        
    }


    .gazvideodesc {
        padding: 15px;
        font-size: 0.85rem;
        text-align: justify;
        line-height: 1.4;

        flex: 1 1 auto;         /* Let it grow/shrink to fill available vertical space */
        overflow-y: auto;       /* If the content exceeds the available space, scroll */
        max-height: 200px;      /* Or whichever max suits you */
        min-height: 200px;  /* So we will always be 200px */
        width: 100%;            /* Ensure it uses the full card width if desired */
        text-align: center;     /* or justify, up to you */
        margin-top: 10px;       /* Some breathing room above */
        /* rest of your existing styling */
    }



    /* General Card Styling */
    .gazvideocard {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 20px;
        position: relative;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }

 
    .gazvideocard .img img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #fff;
    }

    /* Name and Subheading */
    .gazvideocard .card-header {
        width: 100%;
        background: linear-gradient(to right, #88e6ff 80%, rgba(249, 249, 249, 0));
        margin-left: -31px;
        padding: 10px 0;
        text-align: center;
        margin-top: 10px;
    }

    .badges svg {
        margin-right: 8px;
    }

    .gazvideocard .card-footer {
        margin-top: auto;    /* Pin the footer to the bottom if there's extra space */
        display: flex;       /* existing layout rules */
        justify-content: center;
        align-items: center;
        margin-left: -32px;
        /* margin-right: +5px; */
        background: linear-gradient(to right, #e3e3e3 80%, rgb(255 255 255 / 0%));
        /* etc. */
    }




.video-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  /* Adjust the height as needed, or let content define it */
  height: 90%;
}



.video-card-content {
  position: relative;
  z-index: 1;
  color: #fff;  /* Ensure the text is legible */
}

/* Optionally adjust heading, text, and button styling */
.video-name {
    font-size: 1.5rem;
    margin-bottom: 15px;
    background-color: #00000057;
    padding: 15px;
    text-align: center;
}
.video-description {
    margin-bottom: 20px;
}
.video-link .btn {
  /* You can style the button further if required */
}

.youtube-consent-prompt {
  position: fixed;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  max-width: 360px;
  width: calc(100% - 40px);
  background: #111;
  color: #fff;
  padding: 1.25rem;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  z-index: 1060;
  display: none;
}

.youtube-consent-prompt.show {
  display: block;
}

.youtube-consent-prompt h5 {
  font-size: 1.1rem;
  margin-bottom: 0.25rem;
}

.youtube-consent-prompt p {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}

.youtube-consent-prompt .btn + .btn {
  margin-left: 0.5rem;
}

#videoModal .modal-content {
  position: relative;
}

#videoModal .btn-close {
  z-index: 2;
}

@media (min-width: 768px) {
  .youtube-consent-prompt {
    left: auto;
    right: 30px;
    transform: none;
  }
}

/* reviewcarousel_builder.php */
.star-rating-container {
    display: flex;
    gap: 4px;
    justify-content: center;
}
    .star-rating {
    width: 120px;  /* Adjust width for star count */
    height: 24px; 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="%23FFD700" stroke="%23FFD700" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13.7276 3.44418L15.4874 6.99288C15.7274 7.48687 16.3673 7.9607 16.9073 8.05143L20.0969 8.58575C22.1367 8.92853 22.6167 10.4206 21.1468 11.8925L18.6671 14.3927C18.2471 14.8161 18.0172 15.6327 18.1471 16.2175L18.8571 19.3125C19.417 21.7623 18.1271 22.71 15.9774 21.4296L12.9877 19.6452C12.4478 19.3226 11.5579 19.3226 11.0079 19.6452L8.01827 21.4296C5.8785 22.71 4.57865 21.7522 5.13859 19.3125L5.84851 16.2175C5.97849 15.6327 5.74852 14.8161 5.32856 14.3927L2.84884 11.8925C1.389 10.4206 1.85895 8.92853 3.89872 8.58575L7.08837 8.05143C7.61831 7.9607 8.25824 7.48687 8.49821 6.99288L10.258 3.44418C11.2179 1.51861 12.7777 1.51861 13.7276 3.44418Z"/></svg>');
    background-repeat: repeat-x;
    background-size: contain;
}


.review-text {
    max-height: 100px; /* Adjust as needed */
    overflow: auto;
    padding-right: 10px; /* Adds space to avoid text touching scrollbar */
}

/* Hide scrollbar but allow scrolling */
.review-text::-webkit-scrollbar {
    width: 5px; /* Small scrollbar */
}

.review-text::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2); /* Light scrollbar */
    border-radius: 10px;
}

.review-text::-webkit-scrollbar-track {
    background: transparent;
}


    .review-carousel-wrapper {
    box-sizing: border-box;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    }

    .review-carousel-wrapper--servicepage {
    display: block;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(26, 35, 52, 0.98) 0%, rgba(42, 58, 87, 0.94) 100%);
    border: 1px solid rgba(148, 163, 184, 0.28);
    border-radius: 1.5rem;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.18);
    color: #f8fafc;
    }

    .review-carousel-wrapper--servicepage .secheading {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    line-height: 1.25;
    font-weight: 700;
    text-align: left;
    color: #f8fafc;
    }

    .review-carousel-wrapper .embla {
    overflow: visible;
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    }

    .review-carousel-wrapper .embla__viewport {
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    }

    .review-carousel-wrapper .embla__container {
    display: flex;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    min-width: 0;
    }

    .review-carousel-wrapper .embla__slide {
        flex: 0 0 320px;
        min-width: 0;
    margin-right: 10px;
    min-height: 280px;
    font-size: 0.8rem;
    }

    .review-carousel-wrapper--servicepage .embla__slide {
    flex: 0 0 min(280px, calc(100% - 1rem));
    margin-right: 1rem;
    min-height: 240px;
    }

    .review-carousel-wrapper .embla__controls {
    display: block;
    margin-top: 0;
    }

    .review-carousel-wrapper--servicepage .embla__controls {
    margin-top: 0;
    }

    .review-carousel-wrapper__cta {
    color: black;
    text-decoration: none;
    font-weight: 600;
    }

    .review-carousel-wrapper__cta--servicepage {
    color: #f8fafc;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.7rem 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    }

    .review-carousel-wrapper__cta--servicepage:hover,
    .review-carousel-wrapper__cta--servicepage:focus {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    }

    .review-carousel-wrapper--servicepage .embla__button {
    background-color: rgba(255, 255, 255, 0.94);
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.35);
    color: #1e293b;
    }

    .review-carousel-wrapper--servicepage .embla__button:hover,
    .review-carousel-wrapper--servicepage .embla__button:focus {
    color: #0f172a;
    background-color: #ffffff;
    }

    .review-carousel-wrapper .embla__buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    }

    .review-carousel-wrapper .embla__button {
    -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
    touch-action: manipulation;
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 2.6rem;
    height: 2.6rem;
    z-index: 3;
    border-radius: 50%;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    }
    .review-carousel-wrapper .embla__button--prev {
    transform: translateX(-35%);
    }
    .review-carousel-wrapper .embla__button--next {
    transform: translateX(35%);
    }
    .review-carousel-wrapper > .review-carousel-wrapper__cta {
    display: inline-flex;
    margin-top: 0.8rem;
    }
    .review-carousel-wrapper .embla__button:disabled {
    color: var(--detail-high-contrast);
    }
    .review-carousel-wrapper .embla__button__svg {
    width: 35%;
    height: 35%;
    }



   


    .embla__container .gazcard .img {
        position: relative;
        background: #539dff;
        height: 108px;
        width: 108px;
        border-radius: 50%;
        margin-bottom: 10px;
    }
    .embla__container .gazcardf .img {
        background: #ff5353;
    }


    .embla__container .img img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #fff;
    }
    .embla__container .gazcard h2 {
        font-weight: 500;
        font-size: 1.56rem;
        
    }
    .embla__container .gazcard span {
        color: #6A6D78;
        font-size: 1.1rem;
    }
  
    .gazrecordingcard {
        display: flex;
        flex-direction: column; /* Stack child elements vertically */
        justify-content: flex-start; /* Align items to the top */
        align-items: center; /* Center-align content horizontally */
        padding-top: 20px; /* Space between top of card and content */
        position: relative; /* To position elements inside the card */
        height: 480px;
    }

    .embla__container :where(.gazrecordingcard, .img) {
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .embla__container .gazrecordingcard .img {
    position: relative;
    cursor: pointer;
  
    &:before {
        position: absolute;
        filter: invert(100%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        content: "";
        background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-play-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m11.596%208.697-6.363%203.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01%201.233-.696l6.363%203.692a.802.802%200%200%201%200%201.393%22/%3E%3C/svg%3E');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;
        opacity: 0.6;
        text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
    }
    &:hover:before {
      color: #eee;
      opacity: 1;
   
    }
  }


    .gazrecordingcard .img {
        margin-top: 0; /* Reset margin if any exists */
        margin-bottom: 10px; /* Space below the image */
        position: relative; /* Default positioning for the image */
        top: 0; /* Align the image at the top of the card */
    }

    .gazrecordingcard .img img {
        display: block; /* Ensures the image behaves like a block */
        margin: 0 auto; /* Center the image horizontally */
        max-width: 100%; /* Prevent overflow */
        
    }


    .gazrecordingdesc {
        padding: 15px;
        font-size: 0.85rem;
        text-align: justify;
        line-height: 1.4;

        flex: 1 1 auto;         /* Let it grow/shrink to fill available vertical space */
        overflow-y: auto;       /* If the content exceeds the available space, scroll */
        max-height: 200px;      /* Or whichever max suits you */
        min-height: 200px;  /* So we will always be 200px */
        width: 100%;            /* Ensure it uses the full card width if desired */
        text-align: center;     /* or justify, up to you */
        margin-top: 10px;       /* Some breathing room above */
        /* rest of your existing styling */
    }



    /* General Card Styling */
    .gazrecordingcard {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 20px;
        position: relative;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }

 
    .gazrecordingcard .img img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #fff;
    }

    /* Name and Subheading */
    .gazrecordingcard .card-header {
        width: 100%;
        background: linear-gradient(to right, #88e6ff 80%, rgba(249, 249, 249, 0));
        margin-left: -31px;
        padding: 10px 0;
        text-align: center;
        margin-top: 10px;
    }

    .badges svg {
        margin-right: 8px;
    }

    .gazrecordingcard .card-footer {
        margin-top: auto;    /* Pin the footer to the bottom if there's extra space */
        display: flex;       /* existing layout rules */
        justify-content: center;
        align-items: center;
        margin-left: -32px;
        /* margin-right: +5px; */
        background: linear-gradient(to right, #e3e3e3 80%, rgb(255 255 255 / 0%));
        /* etc. */
    }




.recording-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  /* Adjust the height as needed, or let content define it */
  height: 90%;
}



.recording-card-content {
  position: relative;
  z-index: 1;
  color: #fff;  /* Ensure the text is legible */
}

/* Optionally adjust heading, text, and button styling */
.recording-name {
    font-size: 1.5rem;
    margin-bottom: 15px;
    background-color: #00000057;
    padding: 15px;
    text-align: center;
}
.recording-description {
    margin-bottom: 20px;
}
.recording-link .btn {
  /* You can style the button further if required */
}

    .review-carousel-wrapper--servicepage .recording-card {
    height: 100%;
    }

    .review-carousel-wrapper--servicepage .lc-block {
    padding: 1.25rem !important;
    }

    .review-carousel-wrapper--servicepage .lc-block,
    .review-carousel-wrapper--servicepage .lc-block h5,
    .review-carousel-wrapper--servicepage .review-text,
    .review-carousel-wrapper--servicepage .review-text p {
    color: #1e293b;
    }

    .review-carousel-wrapper--servicepage .review-text {
    max-height: 120px;
    }

    .review-carousel-wrapper--servicepage .star-rating-container small {
    color: #475569 !important;
    }

    @media (max-width: 767.98px) {
    .review-carousel-wrapper--servicepage {
        padding: 1rem;
        border-radius: 1.25rem;
    }

    .review-carousel-wrapper--servicepage .embla__slide {
        flex-basis: calc(100% - 0.25rem);
        margin-right: 0.75rem;
    }
    }

/* recordingscarousel_builder.php */
.carousel-wrapper {
    box-sizing: border-box;
    margin: 0 auto;
    }

    .carousel-wrapper .embla {
    overflow: visible;
    position: relative;
    width: 100%;
    }

    .carousel-wrapper .embla__viewport {
    overflow: hidden;
    width: 100%;
    }

    .carousel-wrapper .embla__container {
    display: flex;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    }

    .carousel-wrapper .embla__slide {
        flex: 0 0 220px;
        min-width: 0;
    margin-right: 10px;
    min-height: 280px;
    font-size: 0.8rem;
    }

    .carousel-wrapper .embla__controls {
    display: block;
    margin-top: 0;
    }
    .carousel-wrapper .embla__buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    }

    .carousel-wrapper .embla__button {
    -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
    touch-action: manipulation;
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 2.6rem;
    height: 2.6rem;
    z-index: 3;
    border-radius: 50%;
    color: var(--text-body);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    }
    .carousel-wrapper .embla__button--prev {
    transform: translateX(-35%);
    }
    .carousel-wrapper .embla__button--next {
    transform: translateX(35%);
    }
    .carousel-wrapper > .recording-services-link {
    display: inline-flex;
    margin-top: 0.8rem;
    }
    .carousel-wrapper .embla__button:disabled {
    color: var(--detail-high-contrast);
    }
    .carousel-wrapper .embla__button__svg {
    width: 35%;
    height: 35%;
    }



   


    .embla__container .gazcard .img {
        position: relative;
        background: #539dff;
        height: 108px;
        width: 108px;
        border-radius: 50%;
        margin-bottom: 10px;
    }
    .embla__container .gazcardf .img {
        background: #ff5353;
    }


    .embla__container .img img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #fff;
    }
    .embla__container .gazcard h2 {
        font-weight: 500;
        font-size: 1.56rem;
        
    }
    .embla__container .gazcard span {
        color: #6A6D78;
        font-size: 1.1rem;
    }
  
    .gazrecordingcard {
        display: flex;
        flex-direction: column; /* Stack child elements vertically */
        justify-content: flex-start; /* Align items to the top */
        align-items: center; /* Center-align content horizontally */
        padding-top: 20px; /* Space between top of card and content */
        position: relative; /* To position elements inside the card */
        height: 480px;
    }

    .embla__container :where(.gazrecordingcard, .img) {
    display: flex;
    justify-content: center;
    align-items: center;
  }


  .embla__container .gazrecordingcard .img {
    position: relative;
    cursor: pointer;
  
    &:before {
        position: absolute;
        filter: invert(100%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        content: "";
        background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22currentColor%22%20class%3D%22bi%20bi-play-fill%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cpath%20d%3D%22m11.596%208.697-6.363%203.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01%201.233-.696l6.363%203.692a.802.802%200%200%201%200%201.393%22/%3E%3C/svg%3E');
        background-size: contain;
        background-repeat: no-repeat;
        width: 100px;
        height: 100px;
        opacity: 0.6;
        text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5);
    }
    &:hover:before {
      color: #eee;
      opacity: 1;
   
    }
  }


    .gazrecordingcard .img {
        margin-top: 0; /* Reset margin if any exists */
        margin-bottom: 10px; /* Space below the image */
        position: relative; /* Default positioning for the image */
        top: 0; /* Align the image at the top of the card */
    }

    .gazrecordingcard .img img {
        display: block; /* Ensures the image behaves like a block */
        margin: 0 auto; /* Center the image horizontally */
        max-width: 100%; /* Prevent overflow */
        
    }


    .gazrecordingdesc {
        padding: 15px;
        font-size: 0.85rem;
        text-align: justify;
        line-height: 1.4;

        flex: 1 1 auto;         /* Let it grow/shrink to fill available vertical space */
        overflow-y: auto;       /* If the content exceeds the available space, scroll */
        max-height: 200px;      /* Or whichever max suits you */
        min-height: 200px;  /* So we will always be 200px */
        width: 100%;            /* Ensure it uses the full card width if desired */
        text-align: center;     /* or justify, up to you */
        margin-top: 10px;       /* Some breathing room above */
        /* rest of your existing styling */
    }



    /* General Card Styling */
    .gazrecordingcard {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 20px;
        position: relative;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }

 
    .gazrecordingcard .img img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid #fff;
    }

    /* Name and Subheading */
    .gazrecordingcard .card-header {
        width: 100%;
        background: linear-gradient(to right, #88e6ff 80%, rgba(249, 249, 249, 0));
        margin-left: -31px;
        padding: 10px 0;
        text-align: center;
        margin-top: 10px;
    }

    .badges svg {
        margin-right: 8px;
    }

    .gazrecordingcard .card-footer {
        margin-top: auto;    /* Pin the footer to the bottom if there's extra space */
        display: flex;       /* existing layout rules */
        justify-content: center;
        align-items: center;
        margin-left: -32px;
        /* margin-right: +5px; */
        background: linear-gradient(to right, #e3e3e3 80%, rgb(255 255 255 / 0%));
        /* etc. */
    }




.recording-card {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 3px 6px rgba(0,0,0,0.1);
  /* Adjust the height as needed, or let content define it */
  height: 90%;
}



.recording-card-content {
  position: relative;
  z-index: 1;
  color: #fff;  /* Ensure the text is legible */
}

/* Optionally adjust heading, text, and button styling */
.recording-name {
    font-size: 1.5rem;
    margin-bottom: 15px;
    background-color: #00000057;
    padding: 15px;
    text-align: center;
}
.recording-description {
    margin-bottom: 20px;
}
.recording-link .btn {
  /* You can style the button further if required */
}

/* voicecarousel2_builder.php */
.list-group-item:hover {
  background-colour: #f8f9fa; /* A light shade for highlighting */
  cursor: pointer; /* Indicates interactivity */
}

    .voice-carousel-wrapper {
    box-sizing: border-box;
    margin: 0 auto;
}

    .voice-carousel-wrapper .embla {
    overflow: visible;
    position: relative;
    width: 100%;
    }

    .voice-carousel-wrapper .embla__viewport {
    overflow: hidden;
    width: 100%;
    }

    .voice-carousel-wrapper .embla__container {
    display: flex;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
    }

    .voice-carousel-wrapper--centered .embla__container {
    justify-content: center;
    }


    .voice-carousel-wrapper .embla__controls {
        display: block;
        margin-top: 0;
    }
    .voice-carousel-wrapper .embla__buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 2;
    }
    .voice-carousel-wrapper .embla__button {
    -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
    -webkit-appearance: none;
    appearance: none;
    background-color: white;
    touch-action: manipulation;
    display: inline-flex;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 2.6rem;
    height: 2.6rem;
    z-index: 3;
    border-radius: 50%;
    color: var(--text-body);
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    }
    .voice-carousel-wrapper .embla__button--prev {
    transform: translateX(-35%);
    }
    .voice-carousel-wrapper .embla__button--next {
    transform: translateX(35%);
    }
    .voice-carousel-wrapper .embla__button:disabled {
    color: var(--detail-high-contrast);
    }
    .voice-carousel-wrapper .embla__button__svg {
    width: 35%;
    height: 35%;
    }

    .carousel-header {
        text-align: left; /* Center the header text */
        margin-bottom: 10px; /* Adds space between header and carousel */
    }

    .carousel-header .carousel-title {
        font-size: 1.2rem; /* Adjust title size */
        font-weight: bold; /* Make the title stand out */
        margin: 0; /* Remove default margin */
        color: #ffffff; /* Dark text for visibility */
    }

    .carousel-header .carousel-description {
        font-size: 0.9rem; /* Adjust description size */
        margin: 5px 0 0 0; /* Space between title and description */
        color: #e3e3e3; /* Subtle text color */
    }