@import url('https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css');

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/*Testing Color classes*/
.green{
    background-color: green;
}
.blue{
    background-color: blue;
}
.red{
    background-color: red;
}
.purple{
    background-color: purple;
}
.yellow{
    background-color: yellow;
}
.pink{
    background-color: pink;
}




/* Global link styling */
a, .btn-link {
    color: #006bb7;
    text-decoration: none;
}

/* Root variables (existing) */
:root {
    /* --primaryColor: #6c10ec;*/
    --primaryColor: #004727;
    --secondaryColor: #007041;
    --thirdColor: #b8eb7a;
    --attentionColor: #FFC107;

    
    --primaryButtonTextColor: white;
    --secondaryButtonTextColor: white;
    --thirdButtonTextColor: white;
    --attentionButtonTextColor: white;

    --primaryHoverColor: #00140b;
    --secondaryHoverColor: #015934;
    --thirdHoverColor: #069c45;
    --attentionHoverColor: #9c7709;

    --primaryDisabledColor: #41574d;
    --secondaryDisabledColor: #446155;
    --thirdDisabledColor: #a4ebc2;
    --attentionDisabledColor: #fcd765;


    --bs-primary: #0d6efd;
    --bs-success-bg-subtle: #d1e7dd;
    --bs-danger-bg-subtle: #f8d7da;
    --bs-secondary-bg: #e9ecef;
    --bs-emphasis-color: #212529; /* used by .page-title fallback */
    

}


/* Button styles */
.myPrimaryButton {
    background-color: var(--primaryColor);
    color: var(--primaryButtonTextColor);
    display: inline-block;
    border: 1px solid transparent;
    border-radius: .25rem;
    padding: .25rem .75rem;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.myPrimaryButton:hover {
    background-color: var(--primaryHoverColor);
    color: var(--primaryButtonTextColor);
}


.myfakebutton {
    background-color: rgb(2, 79, 26);
    color: white;
    display: inline-block;
    border: 1px solid transparent;
    border-radius: .25rem;
    padding: .25rem .75rem;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.myUnavailableButton {
    background-color: lightgray;
    color: rgb(77,77,77);
    display: inline-block;
    border: 1px solid transparent;
    border-radius: .25rem;
    padding: .25rem .75rem;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.myBookedButton {
    background-color: lightpink;
    color: rgb(77,77,77);
    display: inline-block;
    border: 1px solid transparent;
    border-radius: .25rem;
    padding: .25rem .75rem;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease;
}


.mySecondaryButton {
    background-color: var(--secondaryColor);
    color: var(--secondaryButtonTextColor);
    display: inline-block;
    border: 1px solid transparent;
    border-radius: .25rem;
    padding: .25rem .75rem;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.mySecondaryButton:hover {
    background-color: var(--secondaryHoverColor);
    color: var(--secondaryButtonTextColor);
}


.myThirdButton {
    background-color: var(--thirdColor);
    color: var(--thirdButtonTextColor);
    display: inline-block;
    border: 1px solid transparent;
    border-radius: .25rem;
    padding: .25rem .75rem;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.myThirdButton:hover {
    background-color: var(--thirdHoverColor);
    color: var(--thirdButtonTextColor);
}


.myAttentionButton {
    background-color: var(--attentionColor);
    color: var(--attentionButtonTextColor);
    display: inline-block;
    border: 1px solid transparent;
    border-radius: .25rem;
    padding: .25rem .75rem;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.myAttentionButton:hover {
    background-color: var(--attentionHoverColor);
    color: var(--attentionButtonTextColor);
}






.myBlackButton {
    background-color: black;
    color: var(--thirdButtonTextColor);
    display: inline-block;
    border: 1px solid transparent;
    border-radius: .25rem;
    padding: .25rem .75rem;
    text-align: center;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.myBlackButton:hover {
    background-color: var(--thirdColor);
    color: white;
}


/*Backgrounds*/
a.white-link{
    color:white !important;
    text-decoration: none;
}
.solidGreenBackground{
    background-color: var(--secondaryColor);
    color:white;
    margin-top: 0;
    margin-bottom: 0;
    padding: 10px 0; /* optional: keep some space inside if needed */
}





/* Reusable form input styling */
.input-field {
    width: 100%;
    padding: 10px;
    margin: 5px 0 10px 0;
    border: 1px solid #ccc;
    border-radius: .25rem;
    font-size: 1rem;
    box-sizing: border-box;
}

/* Reusable label styling */
.label-field {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

/* Checkbox styling */
.my-checkbox-container {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
}

.my-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.my-checkmark-span {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #eee;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.my-checkbox-container:hover .my-checkmark-span {
    background-color: #ccc;
}

.my-checkbox-input:checked ~ .my-checkmark-span {
    background-color: var(--primaryColor);
}

/* Toggle password button styling */
.toggle-password {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    margin-left: 5px;
}

/* Card component styling for consistent layout */
.myCardContainer {
    padding: 0;
    width: 100%;
    margin: auto;
}

.myCards {
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-clip: border-box;
    border: 1px solid rgba(0, 0, 0, .125);
    border-radius: .50rem;
    border-color: darkgray;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

/* Login/Registration card color gradient */
.logincolorcard {
    background-image: linear-gradient(135deg, var(--primaryColor) 0%, var(--secondaryColor) 100%);
    border-top-left-radius: .50rem;
    border-bottom-left-radius: .50rem;
}

/* Container override to ensure responsiveness */
.container {
    max-width: 100%;
    padding: 15px;
}

/* Error message styling */
.errorwords {
    color: red;
}

.primaryWordsColor {
    color: var(--primaryColor);
}


/*Site spcific css below */

/*Adding a custom font*/
@font-face {
    font-family: "RobotoFont";
    src: url(Roboto-VariableFont_wdth,wght.ttf);
}


/*Adding a custom font*/
@font-face {
    font-family: "CINZEL";
    src: url(Cinzel-VariableFont_wght.ttf);
}


/*make all pages with 0 padding or margins Full Screen page content */
.page main article.content {
    /* matches the exact DOM path, bumps specificity */
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

:global(article.content) {
    padding: 0 !important;
    margin: 0 !important;
}

/*On Page NavBar*/
.onPageNavContainer {
    background: linear-gradient(var(--primaryColor), black);
}

/*Remove the weird white bottom boarder from the nav menu*/
.top-row {
    border-bottom: none !important;
}





/*Image fade to black*/
.img-fade {
    position: relative;
    display: inline-block; /* or block, as needed */
}

.img-fade img {
    display: block;
    width: 100%;
    height: auto;
}

.img-fade::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 600px; /* adjust fade height */
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%, /* fully transparent */ rgba(0, 0, 0, 1) 100% /* solid black */
    );
    pointer-events: none; /* clicks “pass through” */
}





/*Carousel*/

.carousel-item {
    position: relative;
    transition: transform 5s ease, opacity .10s ease-out
}

.carousel-item::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 80%; /* adjust how tall the fade is */
    background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%, /* transparent at top of overlay */ rgba(0, 0, 0, 0.4) 40%, /* 40% down it’s 40% opaque */ rgba(0, 0, 0, 1) 70%, /* 70% down it’s 70% opaque */ rgba(0, 0, 0, 1) 100% /* solid black at bottom */
    );
    pointer-events: none; /* clicks still hit the buttons below */
}

.carousel-item img {
    object-fit: cover;
    object-position: top;  /* <--- key line */
    width: 100%;
    height: 60vh; /* or use vh units, e.g. 50vh */
}

/*Testing Carousel Links*/
/* make the carousel wrapper a positioning context */
#carouselExample {
    position: relative;
    margin: 0;
}

/* overlay the links */
.carousel-static-links {
    position: absolute;
    bottom: 20%; /* sit up inside the bottom fade (20% from the bottom) */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 10; /* above images & fade */
}

/* style the links */
.carousel-static-links a {
    font-family: RobotoFont !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    cursor: pointer;
    color: var(--thirdColor);
    text-decoration: none;
    padding: .25rem .5rem;
    background: transparent;
    border-radius: .25rem;
    transition: background 0.2s;
    
}

.carousel-static-links a:hover {
    background: transparent;
}



/*****Card sliding *****/
/* Custom card styling */
.custom-card {
    border-radius: 2rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* Slide-in animation */
@keyframes slideInLeft {
    from {
        transform: translateX(-100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-left {
    animation: slideInLeft 0.8s ease-out 0.2s both;
}

/* Slide-in from the right */
@keyframes slideInRight {
    from {
        transform: translateX(100px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.slide-in-right {
    animation: slideInRight 0.8s ease-out both;
}

/**END***Card sliding *****/




/*Floating caard*/
.floating-card {
    position: absolute;
    top: 20%;  /* adjust as needed */
    left: 5%;
    background-color: rgba(0, 71, 39, 0.95); /* rich green with slight transparency */
    padding: 2rem;
    border-radius: 1.5rem;
    max-width: 400px;
    z-index: 10;  /* above the carousel */
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}
@media (max-width: 768px) {
    .floating-card {
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        max-width: 90%;
        text-align: center;
    }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.floating-card {
    animation: fadeIn 1s ease-out;
}








.color-white-important  {
    color: white !important;
}


/* Brand card thing */

/* ---------- Brand system extensions ---------- */
:root {
    --radius-lg: 1rem;              /* card rounding */
    --radius-xl: 1.25rem;
    --elevation-1: 0 6px 18px rgba(0,0,0,.12);
    --elevation-2: 0 10px 28px rgba(0,0,0,.18);
}

/* Lift Bootstrap .card into a branded variant */
.brand-card {
    border: none;                            /* remove default 1px border */
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px rgba(0,0,0,0.10),
    0 8px 15px rgba(0,0,0,0.07) !important;
    overflow: hidden;                        /* keep the head/bar rounded */
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease;
}

.brand-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.28),
    0 10px 20px rgba(0,0,0,0.22) !important;
}

/* Branded head strip */
.brand-card__head {
    background: linear-gradient(135deg, var(--primaryColor), var(--secondaryColor));
    color: #fff;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid rgba(255,255,255,.15);
}

.brand-card__title {
    font-weight: 700;
    letter-spacing: .2px;
}

/* Body spacing that matches Bootstrap but gives breathing room */
.brand-card__body {
    padding: 1.25rem 1.25rem 1rem;
}

/* Action row: keeps buttons aligned and spaced consistently */
.brand-card__actions {
    margin-top: .25rem;
}

/* Inputs: on focus, use your palette & a softer ring */
.form-control:focus,
.form-select:focus {
    border-color: var(--secondaryColor);
    box-shadow: 0 0 0 .2rem rgba(0,112,65,.15); /* uses --secondaryColor alpha */
}

/* Validation colors that harmonize with brand */
.field-validation-error,
.validation-message,
.validation-summary-errors {
    color: #c0392b; /* accessible red; keeps contrast */
}

/* Optional: subtle section dividers (reusable anywhere) */
.hr-soft {
    height: 1px;
    border: 0;
    background: linear-gradient(
            to right,
            transparent,
            rgba(0,0,0,.12) 20%,
            rgba(0,0,0,.12) 80%,
            transparent
    );
    margin: 1rem 0;
}

/* Optional: brand “card section” header for long forms */
.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--primaryColor);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .5rem;
}

/* Make .btn-primary follow your variables exactly */
.btn-primary {
    --bs-btn-bg: var(--primaryColor);
    --bs-btn-border-color: var(--primaryColor);
    --bs-btn-hover-bg: var(--primaryHoverColor);
    --bs-btn-hover-border-color: var(--primaryHoverColor);
    --bs-btn-disabled-bg: var(--primaryDisabledColor);
    --bs-btn-disabled-border-color: var(--primaryDisabledColor);
}

/* Outline secondary that aligns with your palette */
.btn-outline-secondary {
    --bs-btn-color: var(--secondaryColor);
    --bs-btn-border-color: var(--secondaryColor);
    --bs-btn-hover-bg: var(--secondaryColor);
    --bs-btn-hover-border-color: var(--secondaryColor);
    --bs-btn-hover-color: #fff;
}



/*green page head thing*/
.page-head {
    margin: 0 0 1rem 0;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primaryColor), #002c19);
    color: #fff;
    box-shadow: var(--elevation-1);
}
.page-head__title { margin: 0; font-weight: 800; }
.page-head__sub   { margin: .25rem 0 0; opacity: .85; }



/* Checkbox styling */
.my-checkbox-container {
    display: inline-block;
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    font-size: 1rem;
    user-select: none;
}

.my-checkbox-input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.my-checkmark-span {
    position: absolute;
    top: 0;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: #c9c3c3;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.my-checkbox-container:hover .my-checkmark-span {
    background-color: #b5b1b1;
}

.my-checkbox-input:checked ~ .my-checkmark-span {
    background-color: var(--primaryColor);
}


/* Currency Symbol on number input*/
.currency-input-wrapper {
    position: relative;
    display: inline-block;
}

.currency-input-wrapper::before {
    content: "$";
    position: absolute;
    left: 5px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    color: gray; /* Or desired color */
}

.currency-input-wrapper input {
    padding-left: 20px; /* Adjust to make space for the symbol */
}

/* End Currency Symbol on number input*/


/*ListBays BayName Colum*/
.bayNameCol{
    border: none;                            /* remove default 1px border */
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px rgba(0,0,0,0.10),
    0 8px 15px rgba(0,0,0,0.07) !important;
    overflow: hidden;                        /* keep the head/bar rounded */
    background: var(--primaryColor);
    color: #FFFFFF;
    transition: transform .18s ease, box-shadow .18s ease;
}






/*Modal Branding*/
/* Optional: make modal content match your brand-card look */
.modal .brand-card {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.12);
    overflow: hidden;
}
.modal .brand-card__head {
    background: var(--secondaryColor, #111);
}
.modal .brand-card__title {
    margin: 0;
}
/*End model branding */







/*Book Tee Time Calandar thing */
/* Hero sizing to match index vibe */
.hero-wrap { max-height: 70vh; }
.hero-img { display:block; object-fit:cover; height:70vh; }

/* Calendar */
/* Calendar header bar */
.calendar-header {
    background: var(--primaryColor);
    color: #fff;
    padding: .75rem 1rem;
    border-radius: .75rem;
}

/* Arrow buttons on colored header */
.calendar-header .btn-header {
    color: #fff;
    background: transparent;
    border: 1px solid rgba(255,255,255,.4);
    padding: .375rem .75rem;
    line-height: 1;
    border-radius: .5rem;
}

.calendar-header .btn-header:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.6);
}

.calendar-header .btn-header:focus {
    outline: 0;
    box-shadow: 0 0 0 .2rem rgba(255,255,255,.35);
}

/* Ensure the title stays white */
.calendar-header h3 { color: #fff; margin: 0; }




.calendar-day {
    border-radius: 12px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.calendar-day.is-today {
    outline: 2px solid rgba(0,0,0,.25);
    outline-offset: 2px;
}
.disabled-cell {
    cursor: not-allowed;
    opacity: .55;
}
/* Legend swatches */
.legend { display:inline-block; width:14px; height:14px; border-radius:4px; margin-right:.35rem; vertical-align:middle; border:1px solid rgba(0,0,0,.15); }
.legend-available { background:#ffffff; }
.legend-full { background:#fff0f0; border-color:#f1c0c0; }
.legend-today { background:#e9f7ef; }
.legend-disabled { background:#ececec; }


@media (max-width: 576px) {
    .hero-img { height: 56vh; }
}


.calendar-day {
    border-radius: 12px;
    min-height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    padding: .5rem;
}

.calendar-day .cell-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

.calendar-day .cell-dow {
    font-size: .75rem;
    text-transform: uppercase;
    opacity: .75;
    margin-bottom: .15rem;
}

.calendar-day .cell-day {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Cell states */
.calendar-day.full { background:#fff6f6; border-color:#f1c0c0; }
.calendar-day.available { background:#ffffff; }
.calendar-day.is-today { outline:2px solid rgba(0,0,0,.25); outline-offset:2px; }
.disabled-cell { cursor:not-allowed; opacity:.55; }






/*End Book Tee time calandar */

/*bookBayanddate css */
.legend-wrap .legend-dot {
    display:inline-block; width:10px; height:10px; border-radius:50%;
    vertical-align:middle; border:1px solid rgba(0,0,0,.1);
}
.legend-today { background: var(--bs-success-bg-subtle, #d1e7dd); }
.legend-disabled { background: var(--bs-secondary-bg, #e9ecef); }
.legend-full { background: var(--bs-danger-bg-subtle, #f8d7da); }
.legend-available { background: var(--primaryColor, #0d6efd); }


/* Branded card head with matching rounded top corners */
.bay-card__head {
    background: var(--primaryColor, #004727)!important;
    border-bottom: 0;
    /* Match Bootstrap's card radius on the top, hide any inner radius seams */
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: .75rem 1rem; /* similar to default card-header spacing */
}

/* Slightly stronger overall card shadow (shadow-lg is already applied) */
.bay-card.card {
    /* keep Bootstrap's shadow-lg; optionally enhance with a subtle custom glow */
    /* box-shadow: 0 .5rem 1rem rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.12); */
}

/* Make the badge sit nicely on the dark header */
.bay-card__badge {
    border-radius: 999px;
    padding: .35rem .6rem;
    line-height: 1;
}

/* Optional: tweak subtext contrast on the header */
.bay-card__sub {
    opacity: .85;
}


/*Pill thing */
/* Pills */
.timeslot-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 90px;
    padding: .5rem .75rem;
    border-radius: 999px;
    border: 1px solid black;
    cursor: pointer;
    user-select: none;
}

/* Selected state (Bootstrap .btn-check:checked + label) */
.btn-check:checked + .timeslot-pill {
    border-color: var(--primaryColor, #004727);
    box-shadow: 0 0 0 .25rem rgba(0, 112, 65, .15);
}

/* Availability colors */
.pill-available { background: #ecf8f0; color: #0a3622; border-color: #b9ebcd; }
.pill-booked { background: #fde2e2; color: #842029; border-color: #f5c2c7; }
.pill-unavailable { background: #f1f3f5; color: #6c757d; border-color: #d3d6d9; }

/* Disabled pills */
.btn-check:disabled + .timeslot-pill {
    opacity: .6;
    cursor: not-allowed;
}

/* Legend dots */
.legend-dot{
    display:inline-block;width:.6rem;height:.6rem;border-radius:50%;vertical-align:middle
}
.legend-available{ background:#2fbf71 }
.legend-full{ background:#ff6b6b }
.legend-disabled{ background:#adb5bd }


/*Index page stuff====================*/

/* Remove default heading margin inside the top banner (kills the white gap) */
.solidGreenBackground h3 { margin: 0; }

/* ===== Home hero: robust, conflict-safe centering for the logo ===== */
.home-hero { position: relative; }

/* Full-width overlay bar that centers the logo */
.home-hero__logo-bar{
    position: absolute;
    top: 0;                   /* sits just under the banner */
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;  /* center horizontally */
    align-items: flex-start;
    z-index: 12;              /* above carousel & floating card */
    padding-top: clamp(8px, 1.2vw, 30px);
    pointer-events: none;     /* clicks pass through unless the logo is a link */
}

.home-hero__logo-img{
    width: clamp(75px, 22vw, 150px);
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.35));
    pointer-events: auto;     /* allow clicks if wrapped in <a> */
}

/* Keep CTA below the logo layer */
.home-hero .floating-card { z-index: 11; }

/* Ensure the carousel has zero top margin and is the backdrop */
#carouselExample { margin-top: 0; }
#carouselExample .carousel-inner,
#carouselExample .carousel-item img { z-index: 1; }

/* Extra spacing on small screens so card never collides with logo */
@media (max-width: 768px){
    .home-hero .floating-card{
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
        max-width: 90%;
        text-align: center;
        margin-top: clamp(48px, 8vh, 72px);
    }
}

/*=========Top Marquee Thing =================*/
.myMarquee{
    display:block;             /* avoid inline quirks */
    position:relative;         /* establish stacking context */
    z-index: 1;                /* keep it below any fixed sidenav with z>1 */
    padding-top: 5px;
    margin-bottom: -10px;
    height: 60px;
    background: black;
    color: var(--attentionColor);
    font-size: 30px;
    font-weight: 700;
    max-width: 100vw;          /* prevent accidental widening */
    overflow: hidden;          /* clip if needed */
}
.marquee-static{ display:none; background:black; color:var(--attentionColor); font-weight:800; padding:.5rem 0; text-align:center; }
@media (prefers-reduced-motion: reduce){
    .myMarquee{ display:none; }
    .marquee-static{ display:block; }
}

/*.myMarquee{*/
/*    padding-top: 6px;*/
/*    margin-bottom: -10px;*/
/*    height: 60px;*/
/*    background: black;*/
/*    color: var(--attentionColor);*/
/*    font-size: 30px;*/
/*    font-weight: 800;*/
/*}*/