/*
Table of Contents:
1. Divider
2. Tags
3. Notification Message
4. Modal
5. Infinite Marque
6. Single Accordion Card
7. Design System Top Bar Nav
8. Gallery Placeholder Image
9. Gallery Lightbox
10. Breadcrumb
11. Tooltip
12. Disabled Nav Item
13. Custom Cursor
*/

/*Divider*/
.divider {
    height: 0.5px; 
    width: 100%;
    background-color: #D17FF3;
}

/*Dots*/
.orange-dot {
    height: 8px;
    width: 8px;
}

/*Tags*/
.tag-purple {
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    color: #8722A9;
}

/*Pill*/
.pill {
    border-radius: 99px;
    display: inline-block;
    padding: 0px 12px;
    width: fit-content;

    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.26px;
    text-align: center;
}

.pill-website {
    border: 1px solid #FFD6AE;
    background-color: #FFE8E1;
    color: #FF4405;
}

.pill-mobile {
    border: 1px solid #FFD5C7;
    background-color: #FFF4ED;
    color: #E54E1D;
}

.pill-internal {
    border: 1px solid var(--clairvoyant-200);
    background-color: var(--clairvoyant-50);
    color: var(--clairvoyant-600);
}

.pill-tech {
    border: 1px solid #B2DDFF;
    background-color: #ECFDFF;
    color: #1570EF;
}

.pill-health {
    border: 1px solid #C7D7FE;
    background-color: #EEF4FF;
    color: #6172F3;
}

.pill-finance {
    border: 1px solid #D0F8AB;
    background-color: #F3FEE7;
    color: #4CA30D;
}

.pill-e-commerce {
    border: 1px solid #99F6E0;
    background-color: #F0FDF9;
    color: #15B79E;
}

.pill-event {
    border: 1px solid #FEEE95;
    background-color: #FEFBE8;
    color: #CA8504;
}

.pill-market {
    border: 1px solid #FECDD6;
    background-color: #FFF1F3;
    color: #F63D68;
}



/*Notification Message*/
.notif-message-primary {
    padding: 8px 16px;
    border-radius: 4px;
    border: 1px solid #E2AFF8;
    background-color:#FBF4FF;
}

.notif-message-primary p {color:#711E8A;}

/*Modal START*/
.modal-primary, .modal-secondary {
    border-radius: 8px;
    border: #8722A9 solid 0.5px;
    box-shadow: 10px 14px 0 0 rgba(255, 163, 133, 0.40);
}

.modal-no-title {height: 8px;}

.modal-primary-head, .modal-secondary-head {
    padding-top: 8px; 
    padding-bottom: 5px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.modal-primary-head img, .modal-secondary-head img {
    position:relative;
    top: -2px;
    left: 32px;
}

.modal-primary-head h6, .modal-secondary-head h6 {
    margin-top: -25px;
    color: white;
    font-weight: 400;
    font-size: 18px;
}

.modal-primary-body, .modal-secondary-body {
    padding: 24px 32px;
    background-color: #F8F9FC;
}

.modal-primary-footer, .modal-secondary-footer {
    padding: 8px 32px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.no-modal-footer {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.modal-primary-footer-cta {
    display: flex;
    justify-content: end;
    gap: var(--space-3);
}
/*Modal END =====================================*/

/*Infinite Marque START*/
.client-marque-outer {
    position: relative; /* badge anchors to this */
    height: 177.5px; /* controls the overall row height, adjust to your badge size */
    display: flex;
    align-items: center;
}

.client-logo-section-mobile {display: none;} /* hide mobile logos by default, show in media query */

.bunny-badge { 
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%) rotate(-8deg);
    z-index: 1;
    width: 125.29px; /* match height so it's a circle */
    height: 177.5px;
}

.client-marque-wrapper {
    overflow: hidden;
    width: 100%;   
    margin-top: var(--space-7); /*adjusts the vertical spacing of the logos to align with the badge*/
}

.marquee-track {
    display: flex;
    flex-wrap: nowrap;
    align-items: center; /* vertically centers logos within the track */
    width: max-content;
    animation: marquee 12s linear infinite;
}

.marquee-track:hover { animation-play-state: paused; }

.marquee-track.reverse { animation-direction: reverse; }

.marquee-item {
    flex-shrink: 0;
    margin-right: 48px;
}

.marquee-item img {
    height: 40px; /* adjust to your logo size */
    width: auto;
    object-fit: contain;
}

.increase-logo-size img {
    height: 60px; /* larger size for logos */
}

.decrease-logo-size img {
    height: 20px; /* smaller size for logos */
}


@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/*Infinite Marque END*/

/*Bootstrap Overrides START*/
.container-fluid {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  padding-top: 50px;
  padding-bottom: 50px;
}
/*Bootstrap Overrides END*/

/*Case Study Mobile Slider START*/
.featured-works-mobile {display: none;}

.cs2-slider {
    position: relative;
}

.cs2-slider__track {
    position: relative;
}

.cs2-slider__slide {
    display: none;
    flex-direction: column;
    gap: var(--space-4);
}

.cs2-slider__slide.is-active {
    display: flex;
}

.cs2-slider__img-wrap {
    height: auto;
    aspect-ratio: 1212 / 560;
}

.cs2-slider__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cs2-slider__dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: var(--space-5);
}

.cs2-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 0;
    background-color: #d2cde0;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.cs2-slider__dot.is-active {
    background-color: #bb4de8;
    transform: scale(1.15);
}
/*Case Study Mobile Slider END*/

/*Testimonial Carousel START*/
.testimonial-carousel-item {
    background-color: #FFD5C7;
}

#testimonialCarousel {
    margin-bottom: 44px;
}

#testimonialCarousel .carousel-indicators {
    bottom: -34px;
    margin-bottom: 0;
}

#testimonialCarousel .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 0;
    margin: 0 6px;
    background-color: #d2cde0;
    opacity: 1;
}

#testimonialCarousel .carousel-indicators .active {
    background-color: #bb4de8;
}

#testimonialCarousel .carousel-control-prev,
#testimonialCarousel .carousel-control-next {
    width: 40px;
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    opacity: 1;
}

#testimonialCarousel .carousel-control-prev {
    left: -52px;
}

#testimonialCarousel .carousel-control-next {
    right: -52px;
}

#testimonialCarousel .carousel-control-prev-icon,
#testimonialCarousel .carousel-control-next-icon {
    filter: brightness(0) saturate(100%);
}

.cs-carousel__btn-prev, .cs-carousel__btn-next {
    padding: 10px 17px;
    border-radius: 99px;
    border: 1px solid #D5D9EB;
    background-color: #EAECF5;
    stroke: #B3B8DB;
}

.cs-carousel__btn-prev:hover, .cs-carousel__btn-next:hover {
    background-color: #4B095D;
    border-color: #4B095D;
    stroke: #FBF4FF;
}
/*Testimonial Carousel END*/

/*Gallery Placeholder Image START*/
.placeholder-gallery-img {
    width: 100%;
    background-color: #E2AFF8;
    border-radius: 12px;
}

.gallery-img {
    width: 100%;
    border-radius: 12px;
} 
/*Gallery Placeholder Image END*/

/* Gallery Lightbox START */
.lightbox-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99;
    background-color: rgba(20, 6, 28, 0.86);
    padding: 24px;
}

.lightbox-overlay.is-open {
    display: grid;
    place-items: center;
}

.lightbox-dialog {
    width: min(1150px, 100%);
    max-height: calc(100vh - 48px);
    position: relative;
}

/*Card shell*/
.lightbox-card {
    --lightbox-dominant: #4B095D;
    --lightbox-dominant-tint: rgba(75, 9, 93, 0.8);
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 0 15px 0 #9E9EDD;
    overflow: hidden;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: row;
    align-items: stretch;
}

.lightbox-card.is-loading { opacity: 0.97; }

/*Media panel (holds the artwork) — bordered, letterboxed, natural-ratio artwork*/
.lightbox-media {
    background-color: var(--lightbox-dominant-tint);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50%;
    padding: 40px;
    flex-shrink: 0;
    align-self: stretch;
    transition: background-color 0.35s ease;
}

.lightbox-media-frame {
    display: inline-block;
    line-height: 0;
    border: 1px solid var(--lightbox-dominant);
    border-radius: 12px;
    overflow: hidden;
}

.lightbox-image {
    display: block;
    max-width: min(45vw, 514px);
    max-height: min(70vh, 688px);
    width: auto;
    height: auto;
    object-fit: contain;
}

/*Info panel (text)*/
.lightbox-info {
    display: flex;
    flex: 1 1 0;
    align-items: center;
    padding: 40px;
    overflow-y: auto;
    min-height: 0;
}

.lightbox-text {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    min-width: 0;
}

.lightbox-title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 38px;
    color: var(--text-header);
}

.lightbox-field {
    display: flex;
    flex-direction: column;
}

.lightbox-label {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 23px;
    text-transform: uppercase;
    color: var(--clairvoyant-600);
}

.lightbox-date {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    color: var(--text-body);
}

.lightbox-description {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 28px;
    color: var(--text-body);
}

/*Close / Nav buttons*/
.lightbox-close,
.lightbox-nav {
    position: absolute;
    border: none;
    background-color: var(--clairvoyant-600);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.lightbox-close {
    top: -52px;
    right: 0;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    font-size: 26px;
    line-height: 1;
}

.lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 999px;
    font-size: 20px;
}

.lightbox-prev { left: -60px; }
.lightbox-next { right: -60px; }

.lightbox-close:hover,
.lightbox-nav:hover,
.lightbox-close:focus-visible,
.lightbox-nav:focus-visible {
    background-color: #8722A9;
    outline: none;
}

.lightbox-nav:hover {
    transform: translateY(-50%) scale(1.05);
}

.gallery-img {
    cursor: zoom-in;
}
/* Gallery Lightbox END */

/*Breadcrumb START*/
.site-breadcrumb {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-bottom: 24px;
}

.site-breadcrumb a {
    color: var(--text-body);
    text-decoration: none;
}


.site-breadcrumb a:hover, .bc-home:hover {color: var(--clairvoyant-600);}

.site-breadcrumb a:hover svg,
.bc-home:hover svg,
.bc-home svg:hover {
    fill: var(--clairvoyant-600);
}

.bc-home svg {fill: #717BBC;}

.bc-home {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: var(--space-1);
}

.current-bc {
    font-weight:600;
    color: var(--clairvoyant-700);
}
/*Breadcrumb END*/

/*Tooltip START*/
/* Wrap any trigger element in .tooltip-wrap, then add a
   .tooltip element inside it with the message as its content.
   Tooltip appears to the right on hover/focus.
   Only sets positioning context — deliberately leaves display alone
   so it never changes how the wrapped trigger element itself lays out. */
.tooltip-wrap {
    position: relative;
}

.tooltip {
    position: absolute;
    top: 50%;
    left: calc(100% + 28px);
    z-index: 4;
    transform: translateY(-50%) translateX(-4px);

    width: max-content;
    max-width: 241px;
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-radius: 8px;
    background-color: var(--surface-dark);

    color: #FFF;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 23px;
    text-align: left;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.tooltip::before {
    content: '';
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid var(--surface-dark);
}

.tooltip-wrap:hover .tooltip,
.tooltip-wrap:focus-within .tooltip {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* Add .tooltip-top alongside .tooltip to open the tooltip upward
   instead of to the right — for triggers near a right edge or bottom edge. */
.tooltip.tooltip-top {
    top: auto;
    left: 50%;
    bottom: calc(100% + 16px);
    transform: translateX(-50%) translateY(4px);
}

.tooltip.tooltip-top::before {
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    border-top: 8px solid var(--surface-dark);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: none;
}

.tooltip-wrap:hover .tooltip.tooltip-top,
.tooltip-wrap:focus-within .tooltip.tooltip-top {
    transform: translateX(-50%) translateY(0);
}
/*Tooltip END*/

/*Disabled Nav Item START*/
.mobile-menu-item-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}
/*Disabled Nav Item END*/

/*Custom Cursor START*/
.cursor-coming-soon {
    cursor: url('imgs/coming-soon-badge.svg') 46 46, pointer;
}
/*Custom Cursor END*/

/*========================================================================*/

/*Responsive Settings*/
@media screen and (min-width: 1920px) {
    /*insert code*/
}

/*Widescreen*/ /*xxl*/
@media screen and (min-width: 1440px) {
    /*insert code*/
}

/*Tablet LG START*/ /*lg*/
@media screen and (max-width: 992px) {
    #testimonialCarousel .carousel-control-prev {
        left: -16px;
    }

    #testimonialCarousel .carousel-control-next {
        right: -16px;
    }
}

/*Tablet*/ /*md*/
@media screen and (max-width: 768px) {
    /*insert code*/
}

/*Mobile*/ /*sm*/
@media screen and (max-width: 567px) {
    .modal-primary-footer-cta {
        flex-direction: column;
        justify-content: center;
        width: 100%;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .modal-primary-footer-cta button {width: 100%;}

    .client-logo-section-desktop {display: none;}

    .client-logo-section-mobile {
        display: block;
        padding-top: 32px;
        padding-bottom: 40px;
    }
    .marquee-item img {
        height: 50px;
    }


    .increase-logo-size img {
        height: 70px; /* larger size for logos */
    }

    .decrease-logo-size img {
        height: 30px; /* smaller size for logos */
    }


    .featured-works-desktop {display: none;}

    .featured-works-mobile {display: block;}
}
/*========================================================================*/