html:after {
    content: "";
    position: fixed;
    border-top: 4px solid #FFDD00;
    width: 100%;
    bottom: 0;
}

.top-yellow{
    border-top: 4px solid #FFDD00;
}
body.compact main,
body.standard main  {
    padding-top:100px;
}

/*
body.compact main .container,
body.standard main .container
{
    min-height:100%;
}
*/

.border-head-foot-color
{
    border-color:  rgba(255, 255, 255, .1) !important;
}

.card-icon {
    max-width:250px;
    min-height:200px;
}

.card-icon img{
    max-width:120px;
}

a:hover img.image-hover,a:active img.image-hover,a:focus img.image-hover{

    opacity: 0.7;

}

a:hover .card-icon,a:active .card-icon ,a:focus .card-icon{
    filter: brightness(75%);
}


a.btn-wide-rounded {
    height: 58px;
    width: 100%;
    padding: unset;
    text-decoration: none;
    border-radius: 50px;
    display: flex;
    align-content: space-around;
    justify-content: center;
    align-items: center;
}

a.btn-small-rounded {
    height: 36px;
    width: 100%;
    padding: unset;
    text-decoration: none;
    border-radius: 40px;
    display: flex;
    align-content: space-around;
    justify-content: center;
    align-items: center;
}

ul.inline-points{
    margin: 0px 0px .1rem 0px;
    padding-left: 1.2rem;
    text-align: left;
}
ul.inline-points li{
    padding: 0px 0px .1rem 0rem;
}



.warn-red {
    color: #F8203D;
}

.warn-yellow {
    color: #FFDD00;
}

.warn-green {
    color: #009900;
}

img.limit-max-width
{
    max-width: 100%;
}

.size-82X70{
    width: 82px;
    height : 70px;
}
/* media queries only below here !!!! */


.size-150x-img{


    max-width: min(98%, 150px);
    height: auto;


}
.size-250x-img{


        max-width: min(98%, 250px);
        height: auto;


}
.size-300x-img{

    max-width: min(98%, 300px);
    height: auto;

}

.size-20x-img{

    max-width: 20px;
    height: auto;

}
.btn-rounded {
    border-radius: 50px;
}

.fit-image{
    max-width: 90%;
    height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
}




/* used in carousels */

.carousel-control-prev,.carousel-control-next {

    width:3rem;

}


.carousel-control-prev {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    background-image:  none ; /*linear-gradient(90deg, #ffdc00, #0000);*/
}

.carousel-control-next {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-image:  none ; /*linear-gradient(270deg, #ffdc00, #0000)*/;
}

.carousel-control-next-icon,
.carousel-control-prev-icon {

    background-color: #ffcc00;
}

.carousel-control-next-icon:after,
.carousel-control-prev-icon:after {
    color: #ffcc00;
    content: ' ';
}

.carousel-item  img.car {
    /* Set to 'contain' or 'cover', depending on how you want to display the images */
    object-fit: contain;
    /* Ensure the image fills the full width and height */

    max-width:90%;
}
.carousel-item .icon-button {
    max-width: 25px;
    margin-right: 10px;
}

.carousel-item  img.car.col-md-6 {
    max-width:300px;
}
.carousel-indicators{
    position:relative;
}
.carousel-item .badge img {
    mix-blend-mode: normal;
}
.carousel-indicators [data-bs-target]{
    height : 5px;
}
/* ends used in carosuels */

/* Align card internals and prepare for baseline alignment */
.card-icon {
    display: flex;
    flex-direction: column;
}
/* Use grid inside card-body to get consistent rows for media/title/body across all cards */
.card-icon .card-body {
    display: grid;
    grid-template-rows: 72px auto; /* media row, then title/body row (desktop defaults) */
    align-items: center; /* center items within their grid areas */
    justify-items: center; /* horizontal centering */
    row-gap: .25rem;
    flex: 1 1 auto; /* allow card-body to fill height */
}
/* Normalize spacing for img and title to avoid shifting baselines */
.card-icon .card-body > img {
    margin: 0 !important;
    display: block;
}
.card-icon .card-body > .card-title {
    margin: 0 !important;
}

@media (max-width: 767px) {


    .carousel-control-prev,  .carousel-control-next {
        width: 2rem;
    }
}

@media (max-width: 575px) {

    /* Grid row sizes at xs to align image and title baselines */
    .card-icon .card-body {
        grid-template-rows: 60px auto !important; /* image row 60px (matches inline height), then title/body */
        min-height: 100px !important; /* from previous requirement */
    }

    /* Allow wrapping of long titles and any body text within cards */
    .card-icon .card-title,
    .card-icon p {
        white-space: normal !important; /* override any nowrap used earlier */
        overflow-wrap: anywhere;
        word-break: break-word;
        hyphens: auto;
        text-overflow: clip; /* avoid ellipsis when wrapping */
    }

    body.compact,
    body.standard  {
        background-color:white !important;
    }

    body.compact main .container:first-of-type,
    body.standard main .container:first-of-type
    {

        border-radius :0 !important;
    }
    .fit-image{
        max-width: 70%;
    }

    .carousel-control-prev,  .carousel-control-next {
        width: 1rem;
    }

    /* Force 3 icons per row on phones and shrink card/icon/title sizes */
    /* Target only the home card grid via explicit classes (no :has for better support) */
    .card-grid__col {
        /* create 3 columns */
        width: 33.3333% !important;
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }

    /* Reduce gaps for the g-4 row within the card grid */
    .card-grid {
        --bs-gutter-x: .5rem;
        --bs-gutter-y: .5rem;
    }

    /* Make cards more compact */
    .card-icon {
        max-width: 100% !important;
        min-height: 140px !important;
        padding: .5rem !important;
    }

    .card-icon img {
        max-width: 60px !important;
        height: auto !important;
        margin-top: .25rem;
        margin-bottom: .25rem;
    }

    /* Title font on cards */
    .card-icon .card-title {
        font-size: .85rem !important;
        line-height: 1.1 !important;
        margin-top: .25rem !important;
        margin-bottom: 0 !important;
        /*white-space: nowrap;*/
        overflow: hidden;
        text-overflow: ellipsis;
    }
}



/* Enforce 3 columns and adjust sizing for sm and md viewports */
@media (min-width: 576px) and (max-width: 767.98px) {
    /* Align image/title across cards in sm */
    .card-icon .card-body {
        grid-template-rows: 68px auto !important;
    }
    /* 3-up grid on small screens (overrides Bootstrap row-cols-sm-2) */
    .card-grid__col {
        width: 33.3333% !important;
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
    }
    .card-grid {
        --bs-gutter-x: .75rem;
        --bs-gutter-y: .75rem;
    }
    .card-icon {
        max-width: 100% !important;
        min-height: 150px !important;
        padding: .5rem !important;
    }
    .card-icon img {
        max-width: 80px !important;
        height: auto !important;
    }
    .card-icon .card-title {
        font-size: .95rem !important;
        line-height: 1.15 !important;
        margin-top: .25rem !important;
        margin-bottom: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* Align image/title across cards in md */
    .card-icon .card-body {
        grid-template-rows: 72px auto !important;
        row-gap: 0.75rem !important; /* larger gap at md */
    }
    /* 3-up grid on md screens */
    .card-grid__col {
        width: 33.3333% !important;
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
    }
    .card-grid {
        --bs-gutter-x: .75rem;
        --bs-gutter-y: .75rem;
    }
    .card-icon {
        max-width: 100% !important;
        min-height: 160px !important;
        padding: .75rem !important;
    }
    .card-icon img {
        max-width: 95px !important;
        height: auto !important;
    }
    .card-icon .card-title {
        font-size: 1.05rem !important;
        line-height: 1.2 !important;
        margin-top: .25rem !important;
        margin-bottom: 0 !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}


/* Ultra-small devices: from 360px down, switch to 2-column mode */
@media (max-width: 360px) {
    /* Two columns */
    .card-grid__col {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
    /* Tighter gutters */
    .card-grid {
        --bs-gutter-x: .5rem;
        --bs-gutter-y: .5rem;
    }
    /* Slightly smaller icon and title for better fit */
    .card-icon img {
        max-width: 52px !important;
    }
    .card-icon .card-title {
        font-size: .8rem !important;
        line-height: 1.1 !important;
    }
    /* Maintain aligned rows for image/title; keep min-height handled by <=575px block */
    .card-icon .card-body {
        grid-template-rows: 56px auto !important;
    }
}

/* Match search input border/outline to btn-outline-secondary */
.input-group .form-control#cardSearch {
    border-color: var(--bs-secondary) !important;
}
.input-group .form-control#cardSearch:focus {
    border-color: var(--bs-secondary) !important;
    box-shadow: 0 0 0 .25rem rgba(108, 117, 125, .25) !important; /* secondary rgb(108,117,125) */
}