@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300..700&display=swap');

/* ----------------------------------------------------------------
Font and Team Member Styling
-----------------------------------------------------------------*/
/* Apply Montserrat to all elements within the carousel context */
.flickity-viewport,
.flickity-button,
.flickity-page-dots {
    font-family: 'Montserrat', sans-serif !important;
}

/* Merged all .team-member-bio rules into one block */
.team-member-bio {
    font-family: "Prompt", sans-serif; /* Note: If you want 'Prompt Light' as in your HTML, change this to "Prompt Light" */
    text-align: justify;
    max-width: 80%; /* Reduce the maximum width of the text to 80% */
    margin-left: auto; /* Center the reduced text block */
    margin-right: auto; /* Center the reduced text block */
}

/* ----------------------------------------------------------------
Carousels
-----------------------------------------------------------------*/
.flickity-viewport {
    overflow: hidden !important; /* Kept one instance */
    position: relative;
    height: 100%;
}

.flickity-enabled {
    position: relative;
}

.flickity-enabled:focus {
    outline: none;
}

.flickity-slider {
    position: absolute;
    width: 100%;
    height: 100%;
}

.flickity-slider > div > img,
.carousel .polo-carousel-item img {
    width: 100%;
}

.carousel[data-auto-width=true] .flickity-slider > div > img,
.carousel[data-auto-width=true] .carousel .polo-carousel-item img,
.carousel.custom-height .flickity-slider > div > img,
.carousel.custom-height .carousel .polo-carousel-item img {
    height: 100%;
    width: auto;
}

/* draggable */
.flickity-enabled.is-draggable {
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.flickity-enabled.is-draggable .flickity-viewport {
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}

.flickity-enabled.is-draggable .flickity-viewport.is-pointer-down {
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

/* flickity-fade */
.flickity-enabled.is-fade .flickity-slider > * {
    pointer-events: none;
    z-index: 0;
}

.flickity-enabled.is-fade .flickity-slider > .is-selected {
    pointer-events: auto;
    z-index: 1;
}

/* ---- flickity-button ---- */
.flickity-button {
    background: #fff;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: -23px 0 0;
    display: block;
    position: absolute;
    top: 50%;
    z-index: 200; /* Used the highest z-index from the original block */
    cursor: pointer;
    text-align: center;
    -webkit-transition: all .2s ease 0s;
    transition: all .2s ease 0s;
    color: #1e2022;
    border: 0;
    box-sizing: initial;
    opacity: 0;
    border-radius: 50%;
    box-shadow: 0 0px 15px rgba(0, 0, 0, 0.1);
}

.flickity-button:before {
    color: #1e2022;
}

.flickity-button:hover {
    background-color: #2250fc;
}

.flickity-button:hover:before {
    color: #fff;
}

.flickity-button.next:before,
.flickity-button.previous:before {
    font-size: 25px;
    font-family: inspiro-icons !important;
}

.flickity-button.next {
    right: 0px;
}

.flickity-button.next:before {
    margin-left: 4px;
    content: "\e930";
}

.flickity-button.next.disabled {
    opacity: 0;
}

.flickity-button.previous {
    left: 0px;
}

.flickity-button.previous:before {
    content: "\e92f";
    margin-right: 2px;
}

.flickity-button.previous.disabled {
    opacity: 0;
}

.flickity-button svg {
    display: none !important;
}

/* Merged hover rules for next button */
.inspiro-slider:hover .flickity-button.next,
.carousel:hover .flickity-button.next {
    left: auto;
    right: 10px;
    opacity: 1;
}

/* Merged disabled hover rules for next button */
.inspiro-slider:hover .flickity-button.next.disabled,
.carousel:hover .flickity-button.next.disabled {
    opacity: 0;
}

/* Merged hover rules for previous button */
.inspiro-slider:hover .flickity-button.previous,
.carousel:hover .flickity-button.previous {
    right: auto;
    left: 10px;
    opacity: 1;
}

/* Merged disabled hover rules for previous button */
.inspiro-slider:hover .flickity-button.previous.disabled,
.carousel:hover .flickity-button.previous.disabled {
    opacity: 0;
}

.inspiro-slider.arrows-dark .flickity-button,
.carousel.arrows-dark .flickity-button {
    color: #1e2022;
}

.inspiro-slider.arrows-dark .flickity-button:hover,
.carousel.arrows-dark .flickity-button:hover {
    background-color: #2250fc;
}

.inspiro-slider.arrows-dark .flickity-button:hover:before,
.carousel.arrows-dark .flickity-button:hover:before {
    color: #fff;
}

.inspiro-slider.arrows-grey .flickity-button,
.carousel.arrows-grey .flickity-button {
    color: #c1c3ce;
}

.inspiro-slider.arrows-grey .flickity-button:hover,
.carousel.arrows-grey .flickity-button:hover {
    background-color: #2250fc;
}

.inspiro-slider.arrows-grey .flickity-button:hover:before,
.carousel.arrows-grey .flickity-button:hover:before {
    color: #fff;
}

.inspiro-slider.arrows-only .flickity-button,
.carousel.arrows-only .flickity-button {
    background-color: transparent;
    color: #fff;
    box-shadow: none;
}

.inspiro-slider.arrows-only .flickity-button:hover,
.carousel.arrows-only .flickity-button:hover {
    background-color: transparent;
}

.inspiro-slider.arrows-only .flickity-button:hover:before,
.carousel.arrows-only .flickity-button:hover:before {
    color: #fff;
}

.inspiro-slider.arrows-visibile .flickity-button.next,
.carousel.arrows-visibile .flickity-button.next {
    left: auto;
    right: 10px;
    opacity: 1;
}

.inspiro-slider.arrows-visibile .flickity-button.previous,
.carousel.arrows-visibile .flickity-button.previous {
    right: auto;
    left: 10px;
    opacity: 1;
}

.inspiro-slider .portfolio-item,
.carousel .portfolio-item {
    padding-bottom: 0;
}

.polo-carousel-item.is-selected {
    z-index: 2;
}

.flickity-button-icon {
    fill: currentColor;
}

/* ----------------------------------------------------------------
Carousel: Dots
-----------------------------------------------------------------*/
.flickity-page-dots {
    position: absolute;
    width: 100%;
    bottom: -25px;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    line-height: 1;
    z-index: 3;
    height: 10px;
}

.flickity-page-dots .dot {
    display: inline-block;
    position: relative;
    margin: 0 4px;
    width: 12px;
    height: 12px;
    cursor: pointer;
    border-radius: 50%;
    overflow: hidden;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px #000;
    -webkit-transition: background 0.8s ease;
    transition: background 0.8s ease;
}

.flickity-page-dots .dot:after {
    outline: none; /* Simplified text-indent: -999em; to outline: none; as text-indent is irrelevant for a pseudo-element */
    text-indent: -999em; /* Kept for compatibility/original intent */
    border-radius: 50%;
    overflow: hidden;
    content: '';
    position: absolute;
    bottom: 0;
    height: 0;
    left: 0;
    width: 100%;
    background-color: green;
    box-shadow: 0 0 1px #c1c3ce;
    -webkit-transition: height 0.3s ease;
    transition: height 0.3s ease;
}

.flickity-page-dots .dot.is-selected:after {
    height: 100%;
}

.inspiro-slider.dots-inside .flickity-page-dots,
.carousel.dots-inside .flickity-page-dots {
    bottom: 20px;
    position: absolute; /* Explicitly set position */
}

.inspiro-slider.dots-inside-top .flickity-page-dots,
.carousel.dots-inside-top .flickity-page-dots {
    top: 20px;
}

.inspiro-slider.dots-outside-top .flickity-page-dots,
.carousel.dots-outside-top .flickity-page-dots {
    top: -46px;
}

.inspiro-slider.dots-light .flickity-page-dots .dot,
.carousel.dots-light .flickity-page-dots .dot {
    box-shadow: inset 0 0 0 2px #fff;
}

.inspiro-slider.dots-light .flickity-page-dots .dot:after,
.carousel.dots-light .flickity-page-dots .dot:after {
    background-color: #fff;
    box-shadow: 0 0 1px #fff;
}

.inspiro-slider.dots-dark .flickity-page-dots .dot,
.carousel.dots-dark .flickity-page-dots .dot {
    box-shadow: inset 0 0 0 2px #1e2022;
}

.inspiro-slider.dots-dark .flickity-page-dots .dot:after,
.carousel.dots-dark .flickity-page-dots .dot:after {
    background-color: #1e2022;
}

.inspiro-slider.dots-grey .flickity-page-dots .dot,
.carousel.dots-grey .flickity-page-dots .dot {
    box-shadow: inset 0 0 0 2px #c1c3ce;
}

.inspiro-slider.dots-grey .flickity-page-dots .dot:after,
.carousel.dots-grey .flickity-page-dots .dot:after {
    background-color: #c1c3ce;
}

.inspiro-slider.dots-creative .flickity-page-dots .dot {
    /* Styles for creative dots (e.g., larger size, different shape) */
    width: 25px;
    border-radius: 6px; /* Example: make it a rectangle */
    height: 8px;
    margin: 0 6px;
    box-shadow: inset 0 0 0 1px #ccc;
    background-color: transparent;
}

.inspiro-slider.dots-creative .flickity-page-dots .dot:after {
    /* The active state fill */
    background-color: #2250fc; /* Example: a primary color */
    box-shadow: none;
    -webkit-transition: width 0.3s ease;
    transition: width 0.3s ease;
}

.inspiro-slider.dots-creative .flickity-page-dots .dot.is-selected:after {
    height: 100%;
}

/* SAFEST POP-UP STYLES from HTML <style> block */
.vbs-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none; /* Starts hidden */
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.vbs-popup-content {
    background:#ffc000;
    padding: 20px;
    width: 300px; /* Set your desired narrow width here */
    max-width: 90vw;
    text-align: center;
    border-radius:12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: relative;
    box-sizing: border-box;
}

/* Close button style for the pop-up */
.vbs-close-btn {
    position: absolute;
    top: 5px; /* Adjust as needed */
    right: 10px; /* Adjust as needed */
    font-size: 24px;
    line-height: 24px;
    color: #333; /* Dark color for visibility */
    cursor: pointer;
    background: none;
    border: none;
    padding: 5px;
    z-index: 10001;
}

.vbs-close-btn:hover {
    color: #555; /* Slightly darker on hover */
}