:root {
    --tir-off-white: #f5f5f5;
    --tir-dark-blue: #002994;
    --tir-dark-blue-rgb: rgb(0, 41, 148);
    --tir-light-blue: #60CDFF;
    --tir-light-blue-rgb: rgb(96, 205, 255);
    --tir-light-blue-faded: rgba(96, 205, 255, .35);
    --tir-mid-blue: #007bff;
}

.text-tir-dark-blue {
    color: var(--tir-dark-blue);
}

.bg-tir-dark-blue {
    background-color: var(--tir-dark-blue);
}

.bg-tir-light-blue {
    background-color: var(--tir-light-blue);
}

.bg-tir-off-white {
    background-color: var(--tir-off-white);
}

.bg-tir-blue-gradient {
    background: linear-gradient(to right, #007bff, #0056b3, #007bff);
}

.bg-tir-blue-gradient-2 {    
    background: linear-gradient(to bottom right, #004080, #0073e6);
}

.text-tir-dark-blue {
    color: var(--tir-dark-blue);
}

.rounded-top-borders {
    border-radius: 1rem 1rem 0 0;
}

.rounded-bottom-borders {
    border-radius: 0 0 1rem 1rem;
}

.rounded-all-borders {
    border-radius: 1rem 1rem 1rem 1rem;
}

/* .25rem Spacer */
.spacer-1 {
    padding: .125rem 0 .125rem 0;
}

/* .5rem Spacer */
.spacer-2 {
    padding: .25rem 0 .25rem 0;
}

/* 1rem Spacer */
.spacer-3 {
    padding: .5rem 0 .5rem 0;
}

/* 1.5rem Spacer */
.spacer-4 {
    padding: 0.75rem 0 0.75rem 0;
}

/* ---------------------------------------------
   Tooltip Setup (Reusable Classes)
   ---------------------------------------------
   Usage:
   1. Add 'tooltip-container' to the parent element.
      - Ensures correct positioning for the tooltip.
   2. Add 'tooltip-hover' to the element that triggers the tooltip.
   3. Add a 'data-tooltip' attribute with the text you want to display.

   Example:
   <button class="tooltip-container tooltip-hover" data-tooltip="Full text here">
       <span>Truncated Text</span>
   </button>
------------------------------------------------ */

:root {
    --tooltip-transition-duration: 0.5s; /* How long it takes for tooltip to transition opacity */
    --tooltip-display-delay: 0.4s; /* Delay before tooltip begins to appear */
}

/* Parent container: must be positioned relative so tooltip positions correctly */
.tooltip-container {
    position: relative;
    overflow: visible;
}

/* Tooltip bubble: hidden by default */
.tooltip-hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%; /* Position above the element */
    left: 2.5rem;
    margin-bottom: 0.25rem;
    background-color: #333;
    color: #fff;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    white-space: nowrap;
    z-index: 9999;
    font-size: 0.875rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    /* Transition-based visibility (fade effect) */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tooltip-transition-duration, 0.5s) ease-in-out var(--tooltip-display-delay, 0.4s), visibility 0s linear 0s;
    pointer-events: none;
}

/* Reveal tooltip on hover */
.tooltip-hover:hover::after {
    opacity: 1;
    visibility: visible;
    /* Remove transition delays on hover to start fade-in after display delay */
    transition-delay: var(--tooltip-display-delay, 0.4s), 0s;
}

.btn-tir-light {
    color: black;
    background-color: white;
    border: 3px black solid;
    font-size: 18px;
    font-weight: 500;
    border-radius: 32px;
    transition: all 0.3s ease-in-out;
}

    .btn-tir-light:hover {
        color: white;
        background-color: black;
        color: rgba(0,0,0,.85);
        background-color: var(--tir-light-blue);
        border: 3px black solid;
    }

.btn-tir-dark {
    color: white;
    background-color: black;
    border: 3px black solid;
    font-size: 18px;
    font-weight: 500;
    border-radius: 32px;
    transition: all 0.3s ease-in-out;
}

    .btn-tir-dark:hover {
        color: black;
        background-color: var(--tir-light-blue);
        border: 3px black solid;
    }

.btn-tir-dark-blue {
    margin-top: auto;
    align-self: start;
    background-color: var(--tir-dark-blue);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.625rem 1rem;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    text-align: center;
    border: none;
}

    .btn-tir-dark-blue:hover {
        background-color: var(--tir-dark-blue);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

    .btn-tir-dark-blue:focus-visible {
        outline: 3px solid var(--tir-dark-blue);
        outline-offset: 2px;
    }

.section-header {
    text-align: center;
    font-size: clamp(2.75rem, 5vw, 3.5rem);
    font-weight: 900;
    margin-bottom: 2rem;
    letter-spacing: 0.03em;
}

.page-header {
    color: white;
    text-align: center;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 700;
    margin: 0;
    padding: 2.5rem 0;
}

.a-no-style {
    text-decoration: none;
    color: inherit;
    outline: 0;
    cursor: pointer;
}

.img-loading {
    max-height: 75px;
    max-width: 75px;
}

#partners {
    background-color: white;
}

/* -------------------------
   Validation Summary
------------------------- */
.validation-summary-errors ul {
    list-style-position: inside;
    text-align: center;
    display: inline-block;
    padding-left: 0;
}

/* -------------------------------
   Generic Fade-in-on-Scroll Animation
-------------------------------- */
.fade-in-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .fade-in-on-scroll.visible {
        opacity: 1;
        transform: translateY(0);
    }


/* -------------------------------
   Generic Fade-in-on-Load Animation
-------------------------------- */
.fade-in-on-load {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

    .fade-in-on-load.visible {
        opacity: 1;
        transform: translateY(0);
    }

/* -------------------------------
   Center Recaptcha iFrames
-------------------------------- */
#RecaptchaContainer > div {
    padding-left: 4px;
    padding-top: 4px;
}