/* ====== Inter Variable Font Family From Google ====== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&family=Playfair:ital,opsz,wdth,wght@0,5..1200,87.5..112.5,300..900;1,5..1200,87.5..112.5,300..900&family=Roboto:ital,wght@300,400.500.600.700.800.900;1,100..900&display=swap');

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    width: 100%;
    min-height: 100vh;
    font-family: "Roboto";
}

/* ====== CUSTOM CSS ====================================================================================== */
/* ======================================================================================================== */

/* ====== FOR GLOBAL USE ================================================================================== */
/* ====== Fade-in on scroll =============================================================================== */

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s ease-out, transform .8s ease-out;
}

    .reveal-on-scroll.is-visible {
        opacity: 1;
        transform: translateY(0);
    }
/* ====== END OF GLOBAL USE ===============================================================================*/


/* NAVIGATION WITH OFFCANVAS */
.navbar-bg-white {
    background-color: #FFFFFF;
}

.navbar-toggler {
    border: none;
    border-radius: 0;
}
    .navbar-toggler:hover {
        border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
        border-radius: var(--bs-navbar-toggler-border-radius);
    }

    .navbar-toggler:focus {
        text-decoration: none;
        outline: 0;
        box-shadow: none;
    }

.n-item {
    height: 42px;
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.n-img {
    height: 100%;
    object-fit: cover;
}

#simiNav {
    transform: translateY(0);
    transition: transform 0.3s ease-in-out;
}

    #simiNav.hide {
        transform: translateY(-100%);
    }

/* NAVIGATION OFFCANVAS */
.simi-nav-off {
    /* Placeholder - acts as parent class */
    font-family: "Roboto";
}

.simi-nav-off-h {
    font-family: "Roboto";
    background-color: #FFFFFF;
    border-bottom: 1px solid rgba(0,0,0,.08);
}

    .simi-nav-off-h .container > .d-flex {
        align-items: center;
    }

.oc-item {
    height: 52px;
    margin-left: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.oc-img {
    height: 100%;
    object-fit: cover;
}

.oc-close.btn-close:hover {
    transform: scale(1.1);
}

.oc-close.btn-close:focus {
    outline: 0px;
    box-shadow: none;
    opacity: 0;
}

.simi-nav-off .offcanvas-body {
    font-family: "Roboto";
    background-color: #FFFFFF;
}

.off-nav-list {
    font-family: "Roboto";
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

    .off-nav-list .nav-link {
        font-family: "Roboto";
        font-weight: 500;
        color: #000;
        text-decoration: none;
        padding: .125rem 0;
        font-size: clamp(1rem, 2vw, 1.35rem);
    }

        .off-nav-list .nav-link:hover, .off-nav-list .nav-link:focus-visible {
            text-decoration: underline;
        }

.simi-offcanvas-anchor {
    /* Used for anchor links to sections of the current web page */
}

.offcanvas-top.simi-nav-off {
    --bs-offcanvas-height: clamp(225px, 20vh, 300px);
}

.simi-nav-off .offcanvas-body {
    overflow-y: visible;
}

.simi-nav-off .offcanvas-header, .simi-nav-off .offcanvas-body {
    padding-top: .75rem;
    padding-bottom: .75rem;
}

/* Slides over the carousel. Does not push web elements down */
.offcanvas.simi-nav-off {
    position: fixed;
    z-index: var(--bs-offcanvas-zindex, 1045);
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}


/* ========================================================================================================= */
/*          SIMI Hero-Carousel (full-bleed + aligned captions)
   ========================================================================================================= */

.carousel-item {
    transition: transform 2s ease, opacity .5s ease-out; /* Adjust duration and easing as needed */
}

/* FALLBACK - .c-item */
/*.c-item {
    height: 780px;
}*/

.c-item {
    position: relative; /* ensure layering context  */
    width: 100%;
    min-height: min(calc(100svh - 58px), 820px); /* --header-h: 64px; */
    overflow: hidden; /* prevent image spill */
}

/* FALLBACK - .c-img */
/*.c-img {
    height: 100%;
    object-fit: cover;
}*/

.c-img {
    position: absolute; /* anchor to slide */
    inset: 0; /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover; /* keep cover scaling */
    object-position: 50% 50%; /* center by default; tweak per slide if needed */
    z-index: 0;
    filter: brightness(0.85); /* brightness(0.85); */
}

.c-img-two {
    position: absolute; /* anchor to slide */
    inset: 0; /* top:0 right:0 bottom:0 left:0 */
    width: 100%;
    height: 100%;
    object-fit: cover; /* keep cover scaling */
    object-position: 50% 50%; /* center by default; tweak per slide if needed */
    z-index: 0;
    filter: brightness(0.7); /* brightness(0.85); */
    background: linear-gradient(90deg, rgba(104, 47, 28, 0.25) 0%, rgba(104, 47, 28, 0.16) 38%, rgba(104, 47, 28, 0.00) 60%);
}

/* NOT USING - .c-img-one */
/*.c-img-one {
    height: 100%;
    object-fit: cover;
    filter: brightness(0.8);
}*/

/* NEW - FALLBACK REMOVE */
.c-item > picture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    z-index: 0;
}

    /* NEW - FALLBACK REMOVE */
    .c-item > picture > img.c-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }

    .c-item > picture > c-img-two {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 50% 50%;
    }

/* Default overlay (all slides) – subtle neutral gradient */
.c-item::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Left-to-right soft gradient; adjust to SIMI brand if desired */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.16) 42%, rgba(0, 0, 0, 0.00) 70%);
    z-index: 1;
    pointer-events: none;
}

/* Slide 1 overlay — SIMI maroon, 30% opacity, fades L→R */
.c-item.slide-1::before {
    background: linear-gradient(90deg, rgba(104, 47, 28, 0.25) 0%, rgba(104, 47, 28, 0.16) 38%, rgba(104, 47, 28, 0.00) 60%);
    /*background: linear-gradient(90deg, rgba(104, 47, 28, 0.38) 0%, rgba(104, 47, 28, 0.16) 40%, rgba(104, 47, 28, 0.00) 68%);*/
}

/* Slide 2 - Adusted Brightnes*/
/*c-item.slide-2::before {
    background: linear-gradient(90deg, rgba(104, 47, 28, 0.25) 0%, rgba(104, 47, 28, 0.16) 38%, rgba(104, 47, 28, 0.00) 60%);
}*/

/* Slide 3 overlay — SIMI maroon, 30% opacity, fades L→R */
/*.c-item.slide-3::before {
    background: linear-gradient(90deg, rgba(104, 47, 28, 0.20) 0%, rgba(104, 47, 28, 0.16) 25%, rgba(104, 47, 28, 0.08) 35%);
}
*/


.hero-caption {
    position: absolute;
    inset: 0;
    display: grid;
    gap: 5px;
    align-content: start;
    z-index: 2;
    pointer-events: auto !important;
}

.simi-brand-tag {
    font-family: "Roboto";
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2rem);
    color: #FFFFFF;
    text-transform: uppercase;
    padding-left: 10px;
    line-height: 1.5;
}

.simi-brand-desc {
    max-width: 48ch;
}

    .simi-brand-desc p {
        font-family: "Roboto";
        font-weight: 500;
        font-size: clamp(1rem, 1.8vw, 1.2rem);
        font-style: italic;
        padding-top: 2px;
        padding-left: 10px;
        color: #FFFFFF;
        text-wrap: wrap;
        line-height: 1.5;
    }

.simi-slide-title {
    margin: 10rem 0 1rem 0;
    font-family: "Roboto";
    font-weight: 900;
    font-size: clamp(1.6rem, 4.5vw, 3.2rem);
    color: #FFFFFF;
    padding-left: 10px;
    padding-top: 100px;
}

.simi-cta-row {
    display: flex;
    gap: clamp(12px, 2.2vw, 20px);
    margin-top: clamp(10px, 2.2vw, 18px);
    padding-left: 10px;
}

.simi-cta {
    font-family: 'Roboto';
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(160px, 20vw, 220px);
    height: 44px;
    border: 1px solid #FFFFFF;
    border-radius: 0;
    background: transparent;
    transition: border-color .15s ease, border-width .15s ease, font-size .15s ease, color .15s ease;
}

    .simi-cta:hover, .simi-cta:focus-visible {
        cursor: pointer;
        transform: translateY(-4px);
    }

/* ====== GLOBAL CAROUSEL CLASSES - WORKS WITH ALL WEBSITE CAROUSELS - CHANGES ALIGNMENT FROM CENTER TO END ====== */
.carousel-control-prev,
.carousel-control-next
{
    align-items: end;
    padding: 0px 0px 15px 0px;
    width: 5%;
    z-index: 2;
}

.hero-ind.carousel-indicators {
    z-index: 3;
}


/* Mobile refinements */
@media (max-width: 575.98px) {
    .c-item.slide-1::before {
        background: linear-gradient(90deg, rgba(104, 47, 28, 0.28) 0%, rgba(104, 47, 28, 0.12) 40%, rgba(104, 47, 28, 0.00) 68% );
    }
}

@media (max-width:768px) {
    .simi-cta-row {
        gap: 12px;
    }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .carousel, .carousel-item, .hero-caption, .simi-cta {
        transition: none !important;
    }
}

/* =========================================================================================================
            MODAL LAYOUTS - Currently Being Used For The Hero-Carousel
   ========================================================================================================= */

.hero-mdl-cnt.modal-content {
    font-family: "Roboto";
    border: 1.5px, solid, #682F1C;
    border-radius: 0px 0px;
}

.hero-mdl-hdr.modal-header {
    background: linear-gradient(180deg, #5b5b5b 0%, #3f3f3f 40%, #2a2a2a 100%);
    color: #FFFFFF;
    display: flex;
    justify-content: space-evenly;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border: 1.5px, solid, #682F1C;
    border-radius: 0px 0px;
}

.hero-mdl-hdr-cls.btn-close:hover {
    transform: scale(1.3);
}

.hero-mdl-ttl.modal-title {
    font-family: "Roboto";
    font-weight: 800;
    font-size: clamp(1.3rem, 1.8vw, 2rem);
    color: #FFFFFF;
    text-transform: uppercase;
}

.simi-modal-logo {
    display: block;
    height: clamp(35px, 3vw, 45px);
}

.hero-mdl-bdy.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: #FFFFFF;
    border: 1.5px, solid, #682F1C;
}

.modal-h1 {
    font-family: "Roboto";
    font-weight: 800;
    font-size: 20px;
    color: #000;
}

.modal-h2 {
    font-family: "Roboto";
    font-weight: 800;
    font-size: 18px;
    color: #000;
}

.modal-h3 {
    font-family: "Roboto";
    font-weight: 800;
    font-style: italic;
    font-size: 16px;
    color: #000;
}

.modal-p {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 16px;
    color: #000;
    margin-bottom: .5rem;
}

.hero-mdl-img-wpr {
    width: 100%;
    position: relative;
    background-color: #EDECE5;
    padding-top: 24px;
    padding-bottom: 28px;
}

.hero-mdl-img {
    height: clamp(350 30vh 450);
}

.hero-mdl-bdy-cntnr {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.hero-mdl-ftr.modal-footer {
    padding-left: 0px;
    padding-right: 0px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background: linear-gradient(180deg, #5b5b5b 0%, #3f3f3f 40%, #2a2a2a 100%);
    justify-content: space-between;
    border: 1.5px, solid, #682F1C;
    border-radius: 0px 0px;
}

    .hero-mdl-ftr.modal-footer:hover {

    }

.hero-mdl-brand-ftr {
    font-family: "Roboto";
    font-weight: 800;
    font-size: clamp(.75rem, 1.2vw, 1.2rem);
    color: #FFFFFF;
    text-transform: uppercase;
}

.hero-mdl-cls-ftr {
    background-color: #C4C4C4;
    color: #1A1A1A;
}

    .hero-mdl-cls-ftr.btn:hover {
        background-color: #616161;
        color: #FFFFFF;
        font-weight: bold;
    }

/* ================================================================================================================ */
/* ====== SIMI Maroon Reusable Full-Bleed Banner (Updated Typography) ====== */
/* ================================================================================================================ */
.simi-banner {
    width: 100%;
    position: relative;
    background-color: #682F1C;
    color: #FFFFFF;
    --simi-banner-h: clamp(50px, 15vh, 225px); /* clamp(50px, 20vh, 300px) */
    min-height: var(--simi-banner-h);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

    .simi-banner .container {
        display: flex;
        align-items: center;
        justify-content: center;
    }

.simi-banner-text {
    font-family: "Roboto";
    font-weight: 400;
    font-style: italic;
    font-size: clamp(1.2rem, 4vw, 2.25rem);
    color: #FFFFFF;
    white-space: normal; /* prevents wrapping on desktop */
    max-width: 100%;
}

@media (max-width: 768px) {
    .simi-banner-text {
        white-space: normal; /* allow wrapping */
        max-width: 90%;
        text-wrap: balance;
        font-size: clamp(1rem, 3vw, 1.6rem);
    }
}

.simi-banner-fade {
    opacity: 0;
    animation: simiBannerFadeIn 1.2s ease-out forwards;
    animation-delay: 0.25s;
}

@keyframes simiBannerFadeIn {
    0% {
        opacity: 0;
        transform: translateY(12px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==============================================================================
        SIMI Reusable Full Bleed Vertical Separator (gray to white gradient)
   ============================================================================== */

.simi-separator-shadow {
    width: 100%;
    position: relative;
    height: 1px;
    box-shadow: 0 8px 14px -6px rgba(0, 0, 0, 0.25);
}



.simi-separator {
    width: 100%;
    position: relative;
    --simi-sep-h: clamp(24px, 10vh, 220px);
    min-height: var(--simi-sep-h);
    background: linear-gradient( to bottom, #6a6a6a 0%, #bfc3c5 40%, #e9ebec 72%, #ffffff 100% );
    border: 0;
}

.simi-separator--xsm {
    --simi-sep-h: clamp(16px, 4vh, 45px);
}

.simi-separator--sm {
    --simi-sep-h: clamp(16px, 6vh, 120px);
}

.simi-separator--md {
    --simi-sep-h: clamp(24px, 10vh, 220px);
}

.simi-separator--lg {
    --simi-sep-h: clamp(40px, 14vh, 320px);
}

.simi-separator-fade {
    opacity: 0;
    animation: simiSepFadeIn 0.9s ease-out forwards;
    animation-delay: 0.15s;
}

@keyframes simiSepFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}


/* ==============================================================================================
          SIMI Solutions Section with Cards (White Background, Card Grid)
   ============================================================================================== */

.solutions-wrapper {
    position: relative;
    width: 100%;
    margin-bottom: 25px;
    background-color: #FFFFFF;
}

.solutions-title {
    font-family: "Roboto";
    font-weight: 800;
    font-size: clamp(2.25rem, 8vw, 3.25rem);
    color: #000;
    text-align: left;
}

.card {
    border: none;
    border-radius: 0px;
    transition: all 0.3s;
    cursor: pointer;
}

    .card:hover {
        transform: scale(1.1);
    }

  /*  .card a {
        text-decoration: none;
    }*/

.card-title {
    font-family: "Roboto";
    font-weight: 700;
    font-size: 18px;
    color: #000;
}

.card-text {
    font-family: "Roboto";
    font-weight: 300;
    font-size: 16px;
    color: #000;
}

.card-footer {
    border: none;
    border-radius: 0px;
    background-color: transparent;
}

.card-pic.card-img, .card-pic.card-img-top {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.card-pic.card-img, .card-pic.card-img-bottom {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}


.solutions-gallery-btn {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: 44px;
    padding-left: 30px;
    padding-right: 30px;
    font-family: "Roboto";
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
    background: transparent;
    transition: all 0.15s ease;
}


@media (max-width: 768px) {
    .solutions-title {
        text-align: center;
    }
}

/* =================================================================================================== */
/*                       CARD MODALS - TEST A NEW STYLE FOR OPTIONS                                    */
/* =================================================================================================== */

.cd-mdl-cnt.modal-content {
    font-family: "Roboto";
    border: none;
}

.cd-mdl-hdr.modal-header {
    background: none;
    background-color: #FFFFFF;
    color: #000000;
    display: flex;
    justify-content: end;
    padding-top: .5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border: none;
}

.cd-mdl-bdy.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: #FFFFFF;
    border: none;
    /*overflow-x: hidden;*/
}

.cd-mdl-bdy-cntnr {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.cd-mdl-h1 {
    font-family: "Roboto";
    font-weight: 800;
    font-size: 1.75rem;
    color: #000;
}

.cd-mdl-h2 {
    font-family: "Roboto";
    font-weight: 800;
    font-size: 1.3rem;
    color: #000;
}

.cd-mdl-h3 {
    font-family: "Roboto";
    font-weight: 800;
    font-style: italic;
    font-size: 1.2rem;
    color: #000;
}

.cd-mdl-p {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 1rem;
    color: #000;
    margin-bottom: .5rem;
}

.cd-mdl-ftr.modal-footer {
    background: linear-gradient(180deg, #5b5b5b 0%, #3f3f3f 40%, #2a2a2a 100%);
    justify-content: space-between;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border: none;
}

.cd-mdl-ftr-legal {
    font-family: "Roboto";
    color: #CFCFCF;
    letter-spacing: .2px;
}

.cd-mdl-ftr-nav {
    font-family: "Roboto";
    color: #CFCFCF;
    letter-spacing: .2px;
}

    .cd-mdl-ftr-nav a {
        text-decoration: none;
        transition: color .15s ease;
    }

    .cd-mdl-ftr a:hover {
        color: #FFFFFF;
        text-decoration: underline;
        transform: scale(1.1);
        cursor: pointer;
    }

/* ====== CARD MODAL - 3RD OPTION  682F1C ==== */

.cdt-mdl-cnt.modal-content {
    background-image: Url(/images/gbpatter.jpg) !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
}

.cdt-mdl-hdr.modal-header {
    display: flex;
    justify-content: end;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    /*border: none;*/
}

.cdt-mdl-icon {
    height: 60px;
    width: auto;
    object-fit: cover;
}

.cdt-mdl-bdy.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    border: none;
    color: #FAF7F7 !important;
    /*overflow-x: hidden;*/
}

.cdt-mdl-bdy-cntnr {
    padding-left: 2rem;
    padding-right: 2rem;
    color: #FAF7F7 !important;
}

.cdt-mdl-hz-sep {
    /*background-color: #FFF;*/ /* Line color */
    background-color: #682F1C; /* Line color */
    width: 450px; /* Line thickness (width for vertical line) */
    height: 1px; /* Line length (adjust as needed) */
    margin: 0 auto; /* Centers the line horizontally within its container */
}

.cdt-mdl-h1 {
    font-family: "Roboto";
    font-weight: 900;
    font-size: 2.25rem;
    color: #FAF7F7 !important;
}

.cdt-mdl-h2 {
    font-family: "Roboto";
    font-weight: 800;
    font-size: 1.4rem;
    color: #FAF7F7 !important;
}

.cdt-mdl-h3 {
    font-family: "Roboto";
    font-weight: 800;
    font-style: italic;
    font-size: 1.25rem;
    color: #FAF7F7 !important;
}

.cdt-mdl-summary {
    font-family: "Roboto";
    font-weight: 500;
    font-size: 1.5rem;
    font-style: italic;
    color: #FAF7F7 !important;
}

.cdt-mdl-p {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 1.1rem;
    color: #FAF7F7 !important;
}

.cdt-mdl-ftr.modal-footer {
    justify-content: end;
    align-items: end;
    padding-top: 10px;
    padding-bottom: 0;
    padding-left: 2rem;
    padding-right: 2rem;
    border: none;
    /*border-top: 5px solid #682F1C;*/
    /*background-color: #000000 !important;*/
    /*background-color: #682F1C !important; */
}

.cdt-mdl-ftr-legal {
    font-family: "Roboto";
    color: #858585 !important;
    letter-spacing: .2px;
}

.cdt-mdl-ftr-nav {
    font-family: "Roboto";
    color: #858585 !important;
    letter-spacing: .2px;
}

    .cdt-mdl-ftr-nav a {
        text-decoration: none;
        transition: color .15s ease;
    }

.cdt-mdl-ftr a:hover {
    color: #FFFFFF !important;
    text-decoration: underline !important;
    transform: scale(1.1) !important;
    cursor: pointer !important;
}

 

/* ============================================================================================
            SIMI Difference Banner w/Infographic (production-ready, real image)
   ============================================================================================ */

.diff-wrapper {
    width: 100%;
    position: relative;
    background-color: #EDECE5;
}

diff-wrapper2 {
    width: 100%;
    position: relative;
}

.simi-diff-title {
    font-family: "Roboto";
    font-weight: 800;
    font-size: clamp(2.25rem, 8vw, 3.25rem);
    color: #000;
}

.simi-diff-summary {
    font-family: "Roboto";
    font-weight: 400;
    font-size: clamp(.85rem, 8vw, 1.35rem);
    font-style: italic;
    color: #000;
}


/* =============================================================================================
             SIMI Quotes Carousel (white background)
   ============================================================================================= */

.quote-wrapper {
    width: 100%;
    position: relative;
    background-color: #FFFFFF;
}

.quote-viewport {
    /*min-height: clamp(550px, 50vh, 700px);*/
    min-height: clamp(525px, 50vh, 650px);
    display: grid;
    place-items: center;
    text-align: center;
}

.quote-text {
    margin: 0;
    font-family: 'Playfair';
    font-weight: 300;
    font-style: italic;
    line-height: 1.15;
    font-size: clamp(1.6rem, 4.8vw, 3rem);
    letter-spacing: 0.2px;
    color: #111111;
}

.quote-sub {
    margin: 0;
    font-family: 'Montserrat';
    font-weight: 400;
    font-style: normal;
    line-height: 1.15;
    font-size: clamp(1.02rem, 2vw, 1.25rem);
    letter-spacing: 0.2px;
    color: #111111;
}

.quote-control {
    width: 4rem;
    opacity: 0;
    transition: opacity .2s ease;
}

.quote-indicators [data-bs-target] {
    background-color: #888; /* inactive */
    opacity: .45;
}

.quote-indicators .active {
    background-color: #4a4a4a; /* active */
    opacity: 1;
}

.quote-wrapper:hover .quote-control {
    opacity: .9;
}

.quote-control .carousel-control-prev-icon,
.quote-control .carousel-control-next-icon {
    width: 2rem;
    height: 2rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.quote-control .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3e%3cpath d='M11 3L5 8l6 5'/%3e%3c/svg%3e") !important;
}

.quote-control .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3e%3cpath d='M5 3l6 5-6 5'/%3e%3c/svg%3e") !important;
}


/* ===============================================================================================================
               SIMI WEBSITE FOOTER
   =============================================================================================================== */

.simi-footer {
    width: 100%;
    position: relative;
    color: #FFFFFF;
}

/* ---------- Row 1 ---------- */
.ftr-toprow-bg {
    background: #2F2F2F;
}

.ftr-cntr-px {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.ftr-cntr-py {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


.ftr-logo-tag {
    font-family: "Roboto";
    font-weight: 200;
    font-size: 0.8rem;
    color: #FFFFFF;
    padding-top: 5px;
    text-transform: uppercase;
}

.simi-ftr-vt-sep {
    height: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #FFF;
    width: 1px;
    min-height: 200px;
}

.simi-foot-h {
    font-family: "Roboto";
    font-weight: 800;
    font-size: clamp(1.25rem, 2.75vw, 2.25rem);
    color: #FFFFFF;
    margin: 0 0 .5rem 0;
    /*letter-spacing: .2px;*/
}

.simi-foot-nav {
    color: #FFFFFF;
    margin: 0 0 1rem 0;
}

    .simi-foot-nav a {
        font-family: "Roboto";
        font-weight: 400;
        font-size: clamp(1.05rem, 1.9vw, 1.2rem); /* larger font */
        color: #FFFFFF;
        text-decoration: none;
        transition: color .15s ease;
    }

        .simi-foot-nav a:hover {
            text-decoration: underline;
        }

.simi-foot-codes {
    color: #FFFFFF;
}

    .simi-foot-codes p {
        font-family: "Roboto";
        font-weight: 400;
        font-size: clamp(1.05rem, 1.9vw, 1.2rem); /* larger font */
        color: #FFFFFF;
    }


.simi-foot-mail {
    color: #FFFFFF;
}

    .simi-foot-mail a {
        font-family: "Roboto";
        font-weight: 400;
        font-size: clamp(1.05rem, 1.9vw, 1.2rem); /* larger font */
        color: #FFFFFF;
        text-decoration: none;
        transition: color .15s ease;
    }

    .simi-foot-mail:hover {
        text-decoration: underline;
    }

/* ---------- Row 2: legal gradient ---------- */
.simi-footer-bottom {
    background: linear-gradient(180deg, #5b5b5b 0%, #3f3f3f 40%, #2a2a2a 100%);
}

.simi-foot-legal {
    color: #CFCFCF;
    letter-spacing: .2px;
}


/* Mobile refinements */
@media (min-width: 576px) {
    .ftr-logo-tag {
        font-size: 0.3rem;
    }
}

@media (min-width:768px) {
    .ftr-logo-tag {
        font-size: 0.8rem;
    }
}



/* START USING */

/* ADD THIS HTML TO YOUR MAIN PAGE - Index.cshtml */
/* <span id="breakpoints" ></span > */


/* ADD RIGHT AFTER RESET SECTION */
#breakpoints::before {
    content: "Extra small mobile screens (<576px Portrait Phones)";
    font-family: Arial;
    color: #5c0c85;
    font-size: 20px;
}


/* MEDIA QUERIES AT BOTTOM OF CSS */
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    #breakpoints::before
    {
        content: "Extra small mobile screens (>576px Portrait Phones) - 'sm'";
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    #breakpoints::before {
        content: "Medium screens and up (>768px Tablets) - 'md'";
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 768px) {
    #breakpoints::before {
        content: "Large screens and up (>992px Desktops) - 'lg'";
    }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #breakpoints::before {
        content: "X-Large screens and up (>1200px Large Desktops) - 'x-lg'";
    }
}






/* =========================================================================================================
            ON HOLD AS BACKUP - MODAL LAYOUTS - Currently Being Used For The Hero-Carousel
   ========================================================================================================= */

/*.modal-content {
    font-family: "Roboto";
    border: 1.5px, solid, #682F1C;
    border-radius: 0px 0px;
}

.modal-header {
    background: linear-gradient(180deg, #5b5b5b 0%, #3f3f3f 40%, #2a2a2a 100%);
    color: #FFFFFF;
    display: flex;
    justify-content: space-evenly;
    padding-top: .5rem;
    padding-bottom: .5rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    border: 1.5px, solid, #682F1C;
    border-radius: 0px 0px;
}

.modal-header-close.btn-close:hover {
    transform: scale(1.3);
}

.modal-title {
    font-family: "Roboto";
    font-weight: 800;
    font-size: clamp(1.3rem, 1.8vw, 2rem);
    color: #FFFFFF;
    text-transform: uppercase;
}

.simi-modal-logo {
    display: block;
    height: clamp(35px, 3vw, 45px);
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 0;
    padding-right: 0;
    background-color: #FFFFFF;
    border: 1.5px, solid, #682F1C;
}

.modal-h1 {
    font-family: "Roboto";
    font-weight: 800;
    font-size: 20px;
    color: #000;
}

.modal-h2 {
    font-family: "Roboto";
    font-weight: 800;
    font-size: 18px;
    color: #000;
}

.modal-h3 {
    font-family: "Roboto";
    font-weight: 800;
    font-style: italic;
    font-size: 16px;
    color: #000;
}

.modal-p {
    font-family: "Roboto";
    font-weight: 400;
    font-size: 16px;
    color: #000;
    margin-bottom: .5rem;
}

.modal-graphic-wrapper {
    width: 100%;
    position: relative;
    background-color: #EDECE5;
    padding-top: 24px;
    padding-bottom: 28px;
}

.modal-graphic {
    height: clamp(350 30vh 450);
}

.modal-body-container {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

.modal-footer {
    padding-left: 0px;
    padding-right: 0px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    background: linear-gradient(180deg, #5b5b5b 0%, #3f3f3f 40%, #2a2a2a 100%);
    justify-content: space-between;
    border: 1.5px, solid, #682F1C;
    border-radius: 0px 0px;
}

    .modal-footer:hover {
    }

.modal-brand-footer {
    font-family: "Roboto";
    font-weight: 800;
    font-size: clamp(.75rem, 1.2vw, 1.2rem);
    color: #FFFFFF;
    text-transform: uppercase;
}

.modal-close-footer {
    background-color: #C4C4C4;
    color: #1A1A1A;
}

    .modal-close-footer.btn:hover {
        background-color: #616161;
        color: #FFFFFF;
        font-weight: bold;
    }*/