/* Components.css — Shared UI components */


/*hero swiper*/
.hero-swiper{
  position: relative;
  overflow: hidden;
  background: #000;

  /* Fallback → modern → small-viewport units (best on iOS Safari) */
  height: 100vh;     /* legacy fallback */
  height: 100dvh;    /* dynamic viewport height (Chrome/Safari 16+) */
}
@supports (height: 100svh) {
  .hero-swiper {height: 100svh;}  /* stable viewport height */
}





.hero-carousel-swiper {
    width: 100%;
    height: 100%;
    min-height: 400px;
}

@media (min-width: 1200px) {
    .hero-carousel-swiper {
        min-height: 600px;
    }
}

.hero-carousel-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
}

.hero-carousel-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.hero-carousel-swiper .slide-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%);
    pointer-events: none;
}

.hero-carousel-swiper .hero-carousel-prev,
.hero-carousel-swiper .hero-carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    padding: 0;
}

.hero-carousel-swiper .hero-carousel-prev {
    left: 1rem;
}

.hero-carousel-swiper .hero-carousel-next {
    right: 1rem;
}

@media (min-width: 768px) {
    .hero-carousel-swiper .hero-carousel-prev {
        left: 1.75rem;
    }

    .hero-carousel-swiper .hero-carousel-next {
        right: 1.75rem;
    }
}

.hero-carousel-swiper .hero-carousel-prev:hover,
.hero-carousel-swiper .hero-carousel-next:hover {
    background: rgba(0, 0, 0, 0.55);
    border-color: #fff;
}

.hero-carousel-swiper .hero-carousel-prev:focus-visible,
.hero-carousel-swiper .hero-carousel-next:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.hero-carousel-swiper .hero-carousel-prev::after,
.hero-carousel-swiper .hero-carousel-next::after {
    font-family: 'Material Symbols Rounded';
    font-size: 28px;
    line-height: 1;
}

.hero-carousel-swiper .hero-carousel-prev::after {
    content: 'chevron_left';
}

.hero-carousel-swiper .hero-carousel-next::after {
    content: 'chevron_right';
}

.hero-carousel-swiper .hero-carousel-pagination {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    gap: 0.4rem;
	justify-content: center;
}

.hero-carousel-swiper .hero-carousel-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    opacity: 1;
    transition: width 0.25s, background 0.25s;
}

.hero-carousel-swiper .hero-carousel-pagination .swiper-pagination-bullet-active {
    width: 45px;
    background: #fff;
}
	
	/* Slide container */
.hero-carousel-swiper .swiper-slide {
    position: relative;
    min-height: 400px;
    overflow: hidden;
}

@media (min-width: 1200px) {
    .hero-carousel-swiper .swiper-slide {
        min-height: 600px;
    }
}

/* Full-bleed image layer */
.hero-carousel-swiper .hero-slide-image {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-carousel-swiper .hero-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Optional dark overlay for contrast */
.hero-carousel-swiper .swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.2) 0%,
        rgba(0, 0, 0, 0.45) 100%
    );
}

/* Centered content layer */
.hero-carousel-swiper .hero-slide-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;      /* horizontal centering */
    justify-content: center;  /* vertical centering */
    text-align: center;
    gap: 0.75rem;
    color: #fff;
    padding: 1.5rem;
    width: min(920px, 92vw);
    margin: 0 auto;
}

/* Keep text readable */
.hero-carousel-swiper .hero-slide-content .sh1,
.hero-carousel-swiper .hero-slide-content h1,
.hero-carousel-swiper .hero-slide-content h2,
.hero-carousel-swiper .hero-slide-content p {
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.hero-carousel-swiper .hero-slide-content .btn {
    margin-top: 0.5rem;
}

/* Swiper fills section */
.hero-swiper .swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide{
  height: 100%;
}

/* Media (video/img) */
.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;                /* bottom layer */
}
.hero-video,
.hero-image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Gradient overlay (under text, over media) */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;                /* middle layer */
  pointer-events: none;
  background:
    linear-gradient(137deg, rgba(204,0,0,0.00) 3.32%, #C00 191.41%),
    linear-gradient(0deg, rgba(0,0,0,0.00) 54.61%, #000 118.28%),
    linear-gradient(0deg, rgba(0,51,102,0.80) 0%, rgba(0,51,102,0.80) 100%);
}

/* Content */
.hero-content{
  position: relative;
  z-index: 2;                /* top layer */
  height: 100%;
  display: grid;
  align-content: center;
}
body.nav-overlay .hero-content {
    padding-top: var(--dynamic-header-height);
}
body.nav-overlay .hero-immersive-container.cta .hero-content {
    padding-top: calc(4rem + var(--dynamic-header-height));
}
.hero-title{
  margin: 0;
  font-family: "Unbounded", system-ui, sans-serif;
  color: #fff;
  line-height: 1.2;
}
.hero-title .line-1{
  display: block;
  font-weight: 700;
  font-size: clamp(42px, 6vw, 80px);   /* target 80px */
}
.hero-title .line-2{
  display: block;
  font-weight: 700;
  font-size: clamp(30px, 4.2vw, 56px); /* target 56px */
  text-transform: capitalize;
}

/* Dots (use the class on your swiper container; keep if it's .heroSwiper) */
.heroSwiper .swiper-pagination {
    bottom: 150px !important;
    left: 12px;  
    text-align: left;
}
@media(min-width:768px){
  .heroSwiper .swiper-pagination {
    left:0;
}
}
.heroSwiper .swiper-pagination-bullet{
width: 20px;
    height: 10px;
    opacity: 1;
    background: #fff;
    border-radius: 20px;
}
.heroSwiper .swiper-pagination-bullet-active{
 background: var(--fau-red);
    opacity: 1;
    transform: scale(1.1);
    width: 60px;
}

/* Diagonal bottom crop */
.hero-diagonal{
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: clamp(60px, 11vh, 120px);
  background: #fff;
clip-path: polygon(0 0, 100% 35%, 100% 100%, 0 100%);
  z-index: 1;
}

/* == list cards == */
.ds-list-cards .text-primary {
    margin-bottom: 1rem;
}

/* ====== STATS CARDS ====== */
.hero-stats{
  position: relative;
  margin-top: -130px;          /* pull up onto diagonal */
  z-index: 2;
  padding-bottom: 24px;
}
.hero-stats .stat-card{
  background: #fff;
  border-radius: 14px;
  padding: 22px 20px;
  border: 1px solid var(--light-gray);

}
.hero-stats .stat-value{
  font-weight: 800;
  color: var(--fau-red);
  font-size: clamp(22px, 2.2vw, 28px);
  margin-bottom: 6px;
  font-family: "Unbounded", system-ui, sans-serif;
}
.hero-stats .stat-label{
  color: #334155;
  font-size: 0.95rem;
}
.hero-stats .stat-label .year{ color: #6b7280; font-size: .85em; }

/* ====== RESPONSIVE TWEAKS ====== */
@media (max-width: 767.98px){
  .hero-swiper{ --hero-height: 520px; }
  .hero-stats .hero-stats{ margin-top: -100px; }
}



/* Accordion (Bootstrap 5) — Card style */
.ds-accordion,
.accordion {
  --bs-accordion-active-bg: transparent;
  --bs-accordion-active-color: inherit;

  --bs-accordion-border-color: #E5E7EB;
  --bs-accordion-border-width: 2px;
  --bs-accordion-border-radius: 1rem; /* 16px */

  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1.25rem;
  --bs-accordion-btn-color: #0F172A;
  --bs-accordion-btn-bg: transparent;

  --bs-accordion-btn-focus-border-color: transparent;
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(0, 51, 102, .25);
}

/* Accordion item */
.ds-accordion .accordion-item,
.accordion .accordion-item {
  background: #FFF;
  border: 2px solid #E5E7EB;
  border-radius: 1rem;
/*   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10),
              0 1px 2px -1px rgba(0, 0, 0, 0.10); */
	box-shadow: none;
  overflow: hidden;
}

/* Spacing between cards */
.ds-accordion .accordion-item + .accordion-item,
.accordion .accordion-item + .accordion-item {
  margin-top: 1rem;
}

/* Button */
.ds-accordion .accordion-button,
.accordion .accordion-button {
  background: transparent;
  color: var(--fau-blue);
  font-weight: 600;
  line-height: 1.25;
  border: 0;
  box-shadow: none;
}

/* Open state — visually identical */
.ds-accordion .accordion-button:not(.collapsed),
.accordion .accordion-button:not(.collapsed) {
  background: transparent;
 color: var(--fau-blue);
  box-shadow: none;
}

/* Body */
.ds-accordion .accordion-body,
.accordion .accordion-body {
  padding: 1.25rem;
  color:rgba(var(--bs-primary-rgb), .80);
}

.ds-accordion .accordion-button::after,
.accordion .accordion-button::after {
   background-image: none !important;

  content: "\f46a"; /* chevron_forward */
  font-family: "Material Symbols Rounded";
  font-weight: 400;
  font-style: normal;
  font-size: 24px;
  line-height: 1;

  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: auto;
  color: var(--fau-red);

  transition: transform .2s ease;
  transform: rotate(90deg);
}

/* Expanded = up */
.ds-accordion .accordion-button:not(.collapsed)::after,
.accordion .accordion-button:not(.collapsed)::after {
  transform: rotate(180deg);
}
.accordion-header { 
    margin-bottom: 0 !important;
}

/* ============================================================
   ACCORDION: Refined Focus Logic (Keyboard Only)
   ============================================================ */

/* 1. Remove standard focus ring for all users (including clicks) */
.ds-accordion .accordion-button:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* 2. Apply Accessibility ring ONLY for keyboard users */
.ds-accordion .accordion-button:focus-visible {
    outline: 2px solid var(--fau-red) !important;
    outline-offset: -2px;
    border-radius: 14px !important;
    /* subtle FAU Blue glow that doesn't overwhelm the design */
    box-shadow: none;
}

/* 3. Parent container highlight (Optional, very subtle) */
.ds-accordion .accordion-item:focus-within {
    border-color: var(--medium-gray);
}

/* 4. Ensure visual button consistency */
.ds-accordion .accordion-button {
    background: transparent;
    color: var(--fau-blue);
    font-weight: 600;
    border: 0;
    transition: all 0.2s ease-in-out;
}




/* Table */
/* .ds-table { margin-block: 1rem; } */
.ds-table.ds-component {
    padding: 0;
}

.ds-table__title {
  color: #fff;
  font-weight: 700;
  padding: 1rem;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
}

.ds-table.head-primary .ds-table__title { background-color: var(--bs-primary); }
.ds-table.head-slategray .ds-table__title { background-color: var(--slate-gray); }
.ds-table.head-grassgreen .ds-table__title { background-color: var(--grass-green); }

.ds-table .table {
  margin: 0;
  border-radius: 0 0 .5rem .5rem;
  overflow: hidden;
}

.ds-table__caption {
  font-size: .875rem;
  color: #4b5563;
  padding: .5rem 1rem 0;
}



/* Tabs (Bootstrap 5) */
.ds-tabs .nav-pills {
  --bs-nav-pills-border-width: 0;
  --bs-nav-pills-border-color: transparent;
  --bs-nav-pills-link-hover-border-color: transparent;
  --bs-nav-pills-link-active-border-color: transparent;

  background: var(--bs-secondary);
  border: 0;
  border-radius: 2rem;
  padding: 2px;
  gap: .25rem;
  display: flex;
  width: auto;
}

.ds-tabs .nav { width: max-content; }

.ds-tabs .nav.justify-content-start   { margin-left: 0;     margin-right: auto; }
.ds-tabs .nav.justify-content-center  { margin-left: auto;  margin-right: auto; }
.ds-tabs .nav.justify-content-end,
.ds-tabs .nav.justify-content-right   { margin-left: auto;  margin-right: 0; }

.ds-tabs .nav-pills .nav-link {
  border: 0 !important;
  background: transparent;
  color: #fff;
  font-weight: 600;
  border-radius: 9999px;
  padding: .75rem 1rem;
  line-height: 1;
}

.ds-tabs .nav-pills .nav-link.active,
.ds-tabs .nav-pills .nav-link.show,
.ds-tabs .nav-pills .nav-link[aria-selected="true"] {
  background: white !important;
  color: var(--bs-primary) !important;
  font-weight: 600;
  box-shadow: none;
}

.ds-tabs .nav-pills .nav-link:not(.active):hover {
/*   color: var(--bs-primary); */
  font-weight: 600;
  background: transparent;
}

.ds-tabs .nav-pills .nav-link:focus {
  box-shadow: 0 0 0 .15rem rgba(var(--bs-primary-rgb), .25);
}

.ds-tabs .nav-pills .nav-link.disabled,
.ds-tabs .nav-pills .nav-link:disabled,
.ds-tabs .nav-pills .nav-item.disabled > .nav-link {
  color: var(--medium-gray) !important;
  background: transparent !important;
  pointer-events: none;
  opacity: 1;
}

.ds-tabs .tab-content { margin-top: 1rem; }


/* The Scroll Wrapper (Spacing) */
.ds-tabs-scroll-wrapper {
    overflow-x: auto;
    overflow-y: hidden;
    display: block;
    width: 100%;
    /* Create space for the scrollbar so it doesn't overlap the pill */
    padding-bottom: 12px; 
    -webkit-overflow-scrolling: touch; /* Smooth momentum on iOS */
}

/* Webkit Scrollbar Styling (Chrome, Safari, Edge) */
.ds-tabs-scroll-wrapper::-webkit-scrollbar {
    height: 5px; /* Thin profile */
}

.ds-tabs-scroll-wrapper::-webkit-scrollbar-track {
    background: transparent; /* Keep it clean */
    border-radius: 10px;
}

.ds-tabs-scroll-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--medium-gray); /* Using your token #CCCCCC */
    border-radius: 10px;
    transition: background-color 0.2s ease;
}

/* Interaction State */
.ds-tabs-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background-color: var(--fau-red); /* Visual feedback on interaction */
}

/* Firefox Support */
.ds-tabs-scroll-wrapper {
    scrollbar-width: thin;
    scrollbar-color: var(--medium-gray) transparent;
}



/* Swiper (Cards + 3D, Flip) */
.ds-swiper .wrap {
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0;
}
@media(min-width:768px){
.ds-swiper .wrap {
  padding: 0 1.1rem;
}	
}
.ds-swiper{position:relative;}
.ds-swiper:after {
    content: "";
    background: var(--light-gray);
    display: block;
    height: 300px;
    position: absolute;
    width: 100vw;
    top: 47%;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.ds-swiper .swiper { padding: 7rem 2.5rem 3.5rem; background-color: transparent; width: 100%; }
.ds-swiper .swiper-3d { perspective: 800px; background-color: transparent; }
.ds-swiper .swiper-wrapper { align-items: center; background-color: transparent; }
.ds-swiper .swiper-slide {
  width: 320px; height: 460px;
  display: flex; align-items: center; justify-content: center;
  background-color: transparent;
}

/* Ensure width with slidesPerView:'auto' */
.ds-swiper .swiper-slide { width: 320px; }

/* Flip card */
.ds-swiper .flip-card-inner,
.ds-swiper .flip-card {
  position: relative; width: 100%; height: 100%;
  transition: transform 0.8s; transform-style: preserve-3d;
  background-color: transparent;
}

.ds-swiper .flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }

.ds-swiper .flip-card-front,
.ds-swiper .flip-card-back {
  position: absolute; width: 100%; height: 100%;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}

.ds-swiper .flip-card-front {
  background-color: transparent; color: black; border-radius: 16px; overflow: hidden; border: 2px solid #F3F4F6;
}

.ds-swiper .flip-card-back {
  background-color: var(--bs-primary); color: white; transform: rotateY(180deg);
  border-radius: 16px; overflow: hidden; border: 2px solid #F3F4F6;
}

.ds-swiper .back-inner {
  padding: 28px; display: grid; gap: .75rem; align-content: center; height: 100%;
}

.ds-swiper .actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.ds-swiper .flip-card-front img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  filter: saturate(.95) contrast(1.05);
}

.ds-swiper .flip-card-front .overlay {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 1rem 1.25rem 1.25rem; color: #fff;
	/*background: linear-gradient(180deg, rgba(0,0,0,0) 0 35%, rgba(0,0,0,.55) 65%, rgba(0,0,0,.75) 100%);*/
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 57.88%, rgba(0, 0, 0, 0.40) 72.1%, rgba(0, 0, 0, 0.80) 122.51%);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.ds-swiper .overlay .eyebrow {
  margin: 0 0 .25rem; font-size: 1.25rem; letter-spacing: .08em; text-transform: none; opacity: .95;
}

.ds-swiper .flip-card-front .overlay h3 {
 margin: 0 0 12px;
    font-size: 32px;
    font-style: normal;
    font-weight: 400;
    line-height: 120%;
}

/* Circle buttons */
.ds-swiper .btn-circle {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 999px; border: 0;
  background: var(--bs-secondary); color: #fff; cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}

.ds-swiper .btn-circle .material-symbols { font-size: 22px; line-height: 1; }

.ds-swiper .btn-circle--close {
  position: absolute; top: .75rem; right: .75rem; background: var(--bs-secondary);
}

/* Invisible focus anchors */
.ds-swiper .flip-focus {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Swiper UI */
.ds-swiper .swiper-pagination-bullets .swiper-pagination-bullet, .ds-awards .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 20px; height: 10px; opacity: .35; background: var(--slate-gray); border-radius: 20px;
}

.ds-swiper .swiper-pagination-bullets .swiper-pagination-bullet-active, .ds-awards .swiper-pagination-bullets .swiper-pagination-bullet-active {
  background: var(--fau-red); opacity: 1; transform: scale(1.1); width:45px; 
}


.ds-swiper .swiper-buttons {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: row; justify-content: center; width: 100%;
	padding: 1px 0;
}

.ds-swiper .swiper-buttons > .swiper-btn {position: relative;}

.ds-swiper .swiper-btn {
  background: var(--bs-secondary);
  margin: 0 1rem;
}

.ds-swiper .swiper-btn{
margin: 0 1rem;
}

.ds-swiper .swiper-btn::after {
    content: "";
    inset: 0;
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
}
.ds-swiper .swiper-btn.prev::after {
    content: "chevron_left";
}
.ds-swiper .swiper-btn.next::after {
    content: "chevron_right";
}

.ds-swiper .swiper-btn.prev { left: .5rem; }
.ds-swiper .swiper-btn.next {/* right: .5rem; *//* transform: scaleX(-1); */}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .ds-swiper .flip-card-inner { transition: none; }
}

/* Focus rings - keyboard only, using :focus-visible */
/* Prev/Next arrow buttons - sit on varied backgrounds, use white + shadow */
.ds-swiper .swiper-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.45), 0 6px 18px rgba(0,0,0,.18);
}

/* Flip button (front of card) - sits on dark photo overlay */
.ds-swiper .flip-toggle:focus-visible {
  outline: 3px solid #fff !important;
}

/* Close button (back of card) - sits on navy background */
.ds-swiper .flip-close:focus-visible {
  outline: 3px solid #fff !important;
}

/* Action button (back of card) - white pill button on navy */
.ds-swiper .flip-card-back .btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(0, 0, 0, 0.45);
}

/* Pagination dots - ensure they are keyboard-focusable */
.ds-swiper .swiper-pagination-bullet {
  cursor: pointer;
}
.ds-swiper .swiper-pagination-bullet:focus-visible {
  outline: 3px solid var(--fau-red) !important;
  outline-offset: 1px;
}

.ds-swiper .sr-only {
  position: absolute!important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Remove default Swiper shadows in 3D mode */
.ds-swiper .swiper-3d .swiper-slide-shadow-left,
.ds-swiper .swiper-3d .swiper-slide-shadow-right { background-image: none; }




/* ds-awards slider */

.ds-awards .awards-swiper {
    max-width: 722px; /* Forces swiper-slide to calculate closer to 200px */
    margin: 0 auto;
    position: relative;
    overflow: hidden; /* CRITICAL: Allows arrows to sit outside the box */
}
.ds-awards.ds-component {
    margin: 0 auto;
    max-width: 920px;
}

/* ds-awards navigation refinement */
.ds-awards .awards-prev,
.ds-awards .awards-next {
    display: none; /* Hidden on smallest screens */
    width: 44px;
    height: 44px;
    border: 1px solid var(--fau-blue); /* Brand standard FAU Blue  */
    background-color: #fff;
    color: var(--fau-blue);
    border-radius: 50%; /* standard circular button [cite: 18] */
    z-index: 10;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease-in-out;
	top:100px !important;
}

/* Hover state for usability */
.ds-awards .awards-prev:hover,
.ds-awards .awards-next:hover {
    background-color: var(--light-gray); /* Using tokens.css light-gray  */
}

/* Display arrows at the 768px breakpoint and above */
@media (min-width: 768px) {
    .ds-awards .awards-prev,
    .ds-awards .awards-next {
        display: flex; /* */
    }
}

/* Inject Material Symbols Rounded  */
.ds-awards .awards-prev::after,
.ds-awards .awards-next::after {
    font-family: 'Material Symbols Rounded';
    font-size: 24px;
    line-height: 1;
}
.ds-awards .awards-prev::after { content: "chevron_left"; }
.ds-awards .awards-next::after { content: "chevron_right"; }


/* ds-awards: Card Layout and Card Centering */
.ds-awards .swiper-slide .card {
    max-width: 200px;        /* Strict design width */
    margin: 0 auto;         /* Centers the card within the slider column */
    background: transparent; /* Removes background as requested */
}

/* Corrected selector for the 200x200 image area */
.ds-awards .ratio.ratio-1x1 {
    width: 200px;
    height: 200px;
    margin-bottom: 1.5rem;   /* Spacing between image and text */
}

/* Ensure the image inside the ratio fills correctly */
.ds-awards .ratio.ratio-1x1 img {
    object-fit: contain;     /* */
}

/* Vertical text alignment to match design */
.ds-awards .card-body {
    padding: 0 !important;   /* Resetting previous card padding */
}










/*banner - banner-note, banner-callout*/
.banner-note .h6 {
    display: flex;
    margin-left: -32px;
	color: rgba(var(--fau-blue-rgb), 0.8);
}
.banner-note .h6:before {
    font-family: 'Material Symbols Rounded';
    display: inline-block;
    content: "\e000";
    margin-right: 0.75rem;
}
.banner-note {
    padding: 1.5rem;
    border-left: 4px solid var(--fau-blue);
    background: rgba(var(--fau-blue-rgb), 0.05);
    margin: 1rem 0;
    color: rgba(var(--fau-blue-rgb), 0.8);
}
.banner-note .inner {
    padding-left: 32px;
}

.banner-callout .h6 {
    display: flex;
    margin-left: -32px;
	color: rgba(var(--fau-blue-rgb), 0.8);
}
.banner-callout .h6:before {
    font-family: 'Material Symbols Rounded';
    display: inline-block;
    content: "\e86c";
    margin-right: 0.75rem;
}
.banner-callout a {
    color: var(--dark-gray);
    display: flex;
    text-decoration: none;
}
.banner-callout a:hover {
    text-decoration: underline;
}
.banner-callout a:after {
    font-family: 'Material Symbols Rounded';
    display: inline-block;
    content: "\e5c8";
    margin-left: 0.75rem;
}
.banner-callout {
	padding: 1.5rem;
    border: 1px solid rgba(var(--fau-blue-rgb), 0.20);
    background: rgba(var(--fau-blue-rgb), 0.05);
    margin: 1rem 0;
    color: rgba(var(--fau-blue-rgb), 0.8);
    border-radius: 1rem;
}
.banner-callout .inner {
    padding-left: 32px;
}
.banner-callout .inner p:last-child, .banner-note .inner p:last-child {
    margin-bottom: 0;
}


.banner-alert .h6 {
    display: flex;
    margin-left: -32px;
	color: rgba(var(--fau-blue-rgb), 0.8);
}
.banner-alert .h6:before {
    font-family: 'Material Symbols Rounded';
    display: inline-block;
    content: "\e002";
    margin-right: 0.75rem;
}
.banner-alert {
    padding: 1.5rem;
    border-left: 4px solid var(--bs-warning);
    background: rgba(var(--fau-blue-rgb), 0.05);
    margin: 1rem 0;
    color: rgba(var(--fau-blue-rgb), 0.8);
}
.banner-alert .inner {
    padding-left: 32px;
}



.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 1rem;
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Three colun grid (stat cards...) */

.grid-three-up {
    display: grid;
    gap: 24px; /* Shorthand for both row and column gap */
    grid-template-columns: 1fr; /* 1 column on mobile */
}
.grid-three-up > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px;
	border-radius:1rem;
}

/* Tablet and Desktop */
@media (min-width: 768px) {
    .grid-three-up {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* Apply Now CTA  */
.cta-apply-now {
    position: relative;
    height: 467px;
    background-color: #003366;
    overflow: visible !important;
/*     width: 100vw;
    margin-left: calc(-50vw + 50% - 8px); */
    position: relative;
}

.cta-x-crop {
    position: absolute;
    inset: 0;
    overflow: hidden; /* Clips 'APPLY NOW' text horizontally */
    pointer-events: none;
    z-index: 0;
}

.cta-bg-text-wrapper {
    width: 150vw;
    text-align: center;
}

.cta-bg-text {
    font: 900 14vw/1 'Unbounded', sans-serif;
    letter-spacing: -0.05em;
    white-space: nowrap;
    padding-top: 160px;
    background: linear-gradient(0deg, #003366 0, #004488 120.24%, #0055AA 163.31%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.cta-hero-img {
    position: absolute;
    bottom: 0;
    left: 30px;
    display: block;
    height: 520px; /* Taller than the 467px parent */
    width: auto;
    z-index: 1;
    filter: drop-shadow(10px 0 20px rgba(0,0,0,0.3));
}

/* diagonal cta */
.ds-diagonal-bg {
    position: relative;
    background-color: #ffffff; 
    overflow: hidden;
}

/* 70/30 Diagonal Wedge */
.ds-diagonal-bg::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(110deg, #ffffff 60%, #002d62 60%);
    z-index: 1;
}

/* Mobile Adjustments */
@media (max-width: 991.98px) {
    .ds-diagonal-bg::before {
        display:none;
    }
    
    /* Reset offsets on mobile for better readability */
    .ds-diagonal-bg .card {
        margin-left: 0 !important;
        max-width: 100% !important;
    }
	
	.ds-diagonal-bg .col-lg-7::before {
		content: "";
		position: absolute;
		top: 0;
		right: -50vw;
		bottom: 0;
		left: 0;
		background: linear-gradient(110deg, #ffffff 15%, #002d62 15%);
		z-index: 1;
}
}

/* FIND IT FAST */
.find-it-fast h1, .find-it-fast h2, .find-it-fast h3, .find-it-fast h4, .find-it-fast h5, .find-it-fast .h5{color:#fff;}
.find-it-fast-bg {
	position: absolute;
	left: auto;
	right: auto;
	margin: 0 auto;
	text-align: center;
	top: 44px;
}
.find-it-fast .btn {
    text-transform: capitalize;
}
.find-it-fast-bg .h1 span {
	display: inline;
	text-align: center;
	margin: 0;
}
find-it-fast-bg .h1 span:last-of-type {
	display: inline;
	margin: 0;
}
body.fau-refresh .find-it-fast-bg .h1, .find-it-fast-bg .h1 {
  text-align: left;
  max-width: 100%;
  margin: 0 auto;
  font-size: 55px !important;
  color: var(--light-gray);
  text-align: center;
  width: 100%;
  text-transform: uppercase;
}
.find-it-fast .card img{margin-top:-100px}
@media(min-width:992px){

	/* Right column stagger */

	.offset-right-col {
		margin-top: 6rem; /* adjust to match mockup precisely */
	}
	.offset-right-col .card {
    min-height: 380px;
    display: flex;
    justify-content: flex-end;
}
.find-it-fast-bg {
  position: absolute;
  left: auto;
  right: auto;
  margin: 0 auto;
  text-align: center;
  top: -50px;
}
.find-it-fast-bg .h1 span {
  display: block;
  width: 50%;
  text-align: right;
}

.find-it-fast-bg .h1 span:last-of-type {
  display: block;
  margin: -15px 0 0 51%;
  width: 50%;
  text-align: left;
}

body.fau-refresh .find-it-fast-bg .h1, .find-it-fast-bg .h1  {
  text-align: left;
  max-width: 100%;
  margin: 0 auto;
  font-size: 75px !important;
  color: var(--light-gray);
  text-align: center;
  width: 100%;
  text-transform: uppercase;
}
}




/* text with card and callouts *SOAR*/
.soar-hero-body {
  max-width: 412px;
}
/* --- Right column wrapper --- */
.soar-hero-visual {
  position: relative;
  max-width: 540px;
  margin-inline: auto;
}

/* Image wrapper (Bootstrap ratio) */
.soar-hero-visual .ratio {
  border-radius: 24px;
  overflow: hidden;
}

/* Badge */
.soar-hero-badge {
  position: absolute;
  right: 20px;
  top: 4px;
  z-index: 3;
}
.soar-hero-badge {
    top: -20px;
  }
.soar-hero-badge span {
  display: inline-block;
  padding: 0.5rem 1.75rem;
  background-color: #ffffff;
  color: var(--fau-blue);
  border-radius: 16px;
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
  font-size: 1.1rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Stats container – mobile: stacks under image */
.soar-hero-stats {
  position: relative;
  margin-top: 1.25rem;
}

/* Stat base styles */
.soar-stat {
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
@media (max-width: 991px) {
  .soar-stat {
    margin-left: 1rem;
    margin-right: 1rem;
    display: flex;
  }
  .soar-hero-stats {
    margin-top: -50px;
  }
	.soar-hero-body {
  max-width: 100%;
}
}

.soar-stat--red {
  background-color: var(--fau-red);
  color: #ffffff;
}

.soar-stat--white {
  background-color: #ffffff;
  color: var(--fau-blue);
}

.soar-stat-number {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-bold);
/*   font-size: 1.4rem; */
}


/* --- Desktop layering / positioning --- */
@media (min-width: 992px) {
  .soar-hero-visual {
    height: 420px; /* tweak to match comp */
	margin-left:auto;
  }

  /* Image wrapper becomes absolute inside wrapper */
  .soar-hero-visual .ratio {
    position: absolute;
    inset: 0;
    height: 100%;
  }

  .soar-hero-visual img {
    height: 100%;
    object-fit: cover;
  }

  /* Stats container fills the wrapper */
  .soar-hero-stats {
    position: relative;
    width: 100%;
    height: 100%;
    margin-top: 0;
  }

  .soar-stat {
    position: absolute;
    margin-bottom: 0;
  }

  /* Individual stat placement
     Adjust these offsets to pixel-perfect match your Figma */

  /* Stat 1: left red (On-Campus Residents) */
  .soar-stat.stat-one {
    left: -80px;
    bottom: 20%;
	  max-width: 192px;
  }

  /* Stat 2: right red (Degree Programs) */
  .soar-stat.stat-two {
    right: -32px;
    bottom: 16%;
  }

  /* Stat 3: white (Intercollegiate Sports) – centered lower */
  .soar-stat.stat-three {
    left: 12%;
    bottom: -8%;
  }
	.soar-stat.stat-two,.soar-stat.stat-three {
		max-width: 274px;
	}
}


/* cards - steps */

/* --- Process Steps Component --- */
.ds-process-steps {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
}

/* 1. Flex Layout & Centering */
.steps-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* Centers the cards on the midline */
  align-items: center;
  column-gap: 60px;       /* Creates exact space for the 60px connector */
  row-gap: 40px;          /* Vertical spacing when cards wrap to Step 4 */
}

.step-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 2. Connector Logic (Desktop) */
.step-item:not(:last-child)::after {
  content: '';
  width: 60px;
  height: 8px;
  background-color: var(--light-gray, #e0e0e0);
  display: block;
  /* Negative margin 'zeros out' the line so it doesn't push cards off-center */
  margin-right: -60px; 
}

/* 3. Card Styling */
.step-card {
  width: 300px;
  padding: 30px;
  border-radius: 16px;
  position: relative;
  z-index: 3;
min-height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
		border:1px solid;
}

.step-card h3 {
  font-family: 'Unbounded', sans-serif;
  margin: 0 0 10px 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.step-card p {
  margin: 0;
  line-height: 1.5;
  font-size: 1rem;
}

/* 4. Responsive / Mobile Logic */
@media (max-width: 991px) {
  .steps-wrapper {
    flex-direction: column;
    column-gap: 0;
	row-gap: 0;
  }
  
  .step-item {
    position: relative;
    padding-bottom: 50px; /* Space for vertical line */
    width: 100%;
  }
  
  .step-card {
    width: 100%;
  }

  /* Switch Horizontal Line to Vertical */
  .step-item:not(:last-child)::after {
	  width: 8px;
	  height: 50px;
	  margin: 0 auto;
	  position: absolute;
	  bottom: 0px;
	  left: 50%;
	  transform: translateX(-50%);
    }
  }


/* --- THEME PRIMARY (BLUE) --- */
.theme-primary .step-card {
    background: rgba(var(--fau-blue-rgb), 0.15);
    border-color: var(--fau-blue);
    color: var(--fau-blue);
}
.theme-primary .step-item:first-child .step-card{
    background: var(--fau-blue);
    color: #ffffff;
}

/* --- THEME SECONDARY (RED) --- */
.theme-secondary .step-card {
    background: rgba(var(--fau-red-rgb), 0.15);
    border-color: var(--fau-red);
   color: var(--fau-blue);
}
.theme-secondary .step-item:first-child .step-card {
    background: var(--fau-red);
    color: #ffffff;
}




/* split hero */

/* Container for the whole component to prevent any horizontal scroll */
.ds-split-hero {
    overflow: hidden;
}

/* The Column needs to maintain the flex height of the row */
.split-hero-img-col {
    position: relative;
    min-height: 250px; /* Minimum height for mobile so images don't collapse */
}

/* Left image: anchor to right edge of its column (overflows left, clipped) */
.split-hero-img-col:first-child .split-hero-img {
    object-position: right center;
}

/* Right image: anchor to left edge of its column (overflows right, clipped) */
.split-hero-img-col:last-child .split-hero-img {
    object-position: left center;
}

/* The Container defines the shape */
.split-hero-img-container {
    position: relative;
    width: 100%;
    height: 100%;
    /* Default Mobile Ratio (Landscape 16:9) */
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

/* Desktop Override */
@media (min-width: 992px) {
    .split-hero-img-container {
        /* Switch to your 3:4 Portrait aspect */
        aspect-ratio: 3 / 4;
        /* Force it to fill the height of the text column */
        height: 100%; 
    }
}

/* The Image itself */
.split-hero-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* image and text hero */
.image-text-hero p + p {
    margin-bottom: 0;
}

/* scoll marquee  */


.ds-scrolling-marquee {
    position: relative;
    overflow: hidden; 
}

.marquee-scroll-container {
    cursor: grab;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; 
    

    margin-right: calc(-50vw + 50%);
    padding-right: calc(50vw - 50%);

}

.marquee-scroll-container {
    mask-image: linear-gradient(to right, 
        black 0%, 
        black 85%, 
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(to right, 
        black 0%, 
        black 85%, 
        transparent 100%
    );

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.marquee-scroll-container:active {
    cursor: grabbing;
}


.marquee-scroll-container:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: -4px;
    border-radius: 4px;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
.hide-scrollbar {
    -ms-overflow-style: none;  /* Internet Explorer/Edge */
    scrollbar-width: none;     /* Firefox */
}

.marquee-item {
    flex: 0 0 auto; 
}

.letter-spacing-1 {
    letter-spacing: 0.1rem;
}

.marquee-node {
    display: inline-block;
}

.marquee-separator {
    display: inline-block;
    vertical-align: middle;
}

@media (max-width: 767px) {
    .marquee-scroll-container {
        mask-image: linear-gradient(to right, 
            transparent 0%, 
            black 10%, 
            black 85%, 
            transparent 100%
        );
        -webkit-mask-image: linear-gradient(to right, 
            transparent 0%, 
            black 10%, 
            black 85%, 
            transparent 100%
        );
    }
}

/* Callout Banner  */
.ds-callout-banner ul li::marker {
    color: var(--fau-red);
    font-size: 1.2em;
}
.ds-callout-banner a {
    color: #fff;
}


/* Visual Cluster Container */
.visual-cluster-container {
    height: 320px; /* Adjusted for mobile stacking */
    width: 100%;
    margin-bottom: 2rem;
}

@media (min-width: 992px) {
    .visual-cluster-container {
        height: 440px;
        margin-bottom: 0;
    }
}

.cluster-img {
    position: absolute;
    overflow: hidden;
    background: #fff;
    /* No shadows or transitions per request */
}

/* Image 1: Smaller Overlay Left */
.cluster-img--1 {
    width: 38%;
    height: 55%;
    left: 0;
    top: 20%;
    z-index: 10; /* Top Layer */
}

/* Image 2: Large Center (Anchor) */
.cluster-img--2 {
    width: 55%;
    height: 90%;
    left: 22.5%;
    top: 0;
    z-index: 1; /* Bottom Layer */
}

/* Image 3: Smaller Overlay Right */
.cluster-img--3 {
    width: 38%;
    height: 60%;
    right: 0;
    bottom: 5%;
    z-index: 10; /* Top Layer */
}

/* lead form */
.ds-lead-form ul {
    list-style: none;
}
.ds-lead-form ul li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: 0.5rem;
    line-height: 1.5;
    margin-left: -3rem;
    display: flex;
    list-style: none;
}
.ds-lead-form ul li:before {
    content: "\e5ca";
    font-family: 'Material Symbols Rounded';
    font-size: 1.25rem;
    line-height: 1;
    margin-right: .75rem;
    margin-top: 4px;
    color: white;
    background: var(--fau-red);
    border-radius: 1rem;
}


/* News Index Animations */
.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-item {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger delay for grid items */
.fade-in-item:nth-child(1) { animation-delay: 0.1s; }
.fade-in-item:nth-child(2) { animation-delay: 0.2s; }
.fade-in-item:nth-child(3) { animation-delay: 0.3s; }

/* ============================================================
   ds-image-carousel
   Full-bleed slides, text overlay bottom-left
   ============================================================ */
.ds-image-carousel-swiper {
    width: 100%;
    position: relative;
    overflow: hidden;
    min-height: 420px;
}

@media (min-width: 1200px) {
    .ds-image-carousel-swiper {
        min-height: 560px;
    }
}

/* Slide */
.ds-image-carousel-swiper .swiper-slide {
    position: relative;
    overflow: hidden;
    min-height: 420px;
}

@media (min-width: 1200px) {
    .ds-image-carousel-swiper .swiper-slide {
        min-height: 560px;
    }
}

/* Full-bleed image layer */
.ds-image-carousel-swiper .ds-ic-slide-image {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.ds-image-carousel-swiper .ds-ic-slide-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Dark gradient overlay */
.ds-image-carousel-swiper .swiper-slide::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.65) 0%,
        rgba(0, 0, 0, 0.2) 60%,
        rgba(0, 0, 0, 0.05) 100%
    );
}

/* Text content — bottom-left */
.ds-image-carousel-swiper .ds-ic-slide-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 0.5rem;
    color: #fff;
    padding: 2rem 2rem 3.5rem;
    max-width: 760px;
}

.ds-image-carousel-swiper .ds-ic-slide-content .sh2,
.ds-image-carousel-swiper .ds-ic-slide-content h2,
.ds-image-carousel-swiper .ds-ic-slide-content p {
    color: #fff;
    margin: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.ds-image-carousel-swiper .ds-ic-slide-content .btn {
    margin-top: 0.5rem;
}

/* Prev / Next buttons */
.ds-image-carousel-swiper .ds-ic-prev,
.ds-image-carousel-swiper .ds-ic-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.75);
    background: rgba(0, 0, 0, 0.3);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    padding: 0;
}

.ds-image-carousel-swiper .ds-ic-prev { left: 1rem; }
.ds-image-carousel-swiper .ds-ic-next { right: 1rem; }

@media (min-width: 768px) {
    .ds-image-carousel-swiper .ds-ic-prev { left: 1.75rem; }
    .ds-image-carousel-swiper .ds-ic-next { right: 1.75rem; }
}

.ds-image-carousel-swiper .ds-ic-prev:hover,
.ds-image-carousel-swiper .ds-ic-next:hover {
    background: rgba(0, 0, 0, 0.55);
    border-color: #fff;
}

.ds-image-carousel-swiper .ds-ic-prev:focus-visible,
.ds-image-carousel-swiper .ds-ic-next:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.ds-image-carousel-swiper .ds-ic-prev::after,
.ds-image-carousel-swiper .ds-ic-next::after {
    font-family: 'Material Symbols Rounded';
    font-size: 28px;
    line-height: 1;
}

.ds-image-carousel-swiper .ds-ic-prev::after { content: 'chevron_left'; }
.ds-image-carousel-swiper .ds-ic-next::after { content: 'chevron_right'; }

/* Pagination */
.ds-image-carousel-swiper .ds-ic-pagination {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

.ds-image-carousel-swiper .ds-ic-pagination .swiper-pagination-bullet {
    width: 20px;
    height: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.55);
    opacity: 1;
    transition: width 0.25s, background 0.25s;
}

.ds-image-carousel-swiper .ds-ic-pagination .swiper-pagination-bullet-active {
    width: 45px;
    background: #fff;
}


/* coursedog */
/* coursedog */
.cd-tooltip {
    --bs-tooltip-bg: var(--fau-red);
    --bs-tooltip-color: #fff;
    --bs-tooltip-font-size: 0.8rem;
}