:root {
    --primary: #7FC134; /* green */
    --primary-accent: #A7C134; /* light green */
    --secondary: #ED8217; /* orange */
    --accent: #F6EC15; /* yellow */

    --light: #D9D9D9;
    --dark: #313131;

    /* bootstrap overrides */
    --bs-primary: #7FC134; /* green */
    --bs-primary-rgb: 127, 193, 52;

    --bs-secondary: #ED8217; /* orange */
    --bs-secondary-rgb: 237, 130, 23;

    --bs-light: #d9d9d9;
    --bs-light-rgb: 217, 217, 217;

    --bs-dark: #313131;
    --bs-dark-rgb: 49, 49, 49;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.navbar-toggler:focus, navbar-toggler:active, .navbar-toggler:focus-visible {
    outline: none;
    box-shadow: none;
}


html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    font-family: 'Instrument Sans', sans-serif;
}

main {
    flex: 1;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* Mobile Hamburger */

.icon-close {
    display: none;
}

.navbar-toggler:not(.collapsed) .icon-hamburger {
    display: none;
}

.navbar-toggler:not(.collapsed) .icon-close {
    display: inline;
}



.carousel-control-prev,
.carousel-control-next {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
    width: auto;
    padding: 0.5rem;
}

.story-image {
    max-height: 400px;
    object-fit: contain;
}

.faq-toggle .collapse-icon {
    transition: transform 0.25s ease;
}

.faq-toggle[aria-expanded="true"] .collapse-icon {
    transform: rotate(45deg);
}

.serving-houston-banner {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/images/Houston Skyline Adrian Newell.jpg') center 32% / cover no-repeat;
}

.relief-section {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('/images/Dogs Outdoors Anthony Duran.jpg') center 60% / cover no-repeat;
}

.logo-img-header {
    height: 60px;
    width: auto;
}

.logo-img-footer {
    height: 120px;
    width: auto;
}

.svg-icon {
    height: 18px;
    width: auto;
    flex-shrink: 0;
    margin: 0px;
    padding: 0px;
    vertical-align: middle;
}

.svg-icon-large {
    height: 24px !important;
    flex-shrink: 0;
}

.svg-icon-xl {
    height: 32px !important;
    flex-shrink: 0;
}

.svg-icon-xxl {
    height: 64px !important;
    flex-shrink: 0;
}

.reviews-logo {
    bottom: 4%;
    right: 2%;
    width: 18%;
    transform: rotate(8deg);
    pointer-events: none;
}

.banner {
    background-size: cover;
    background-repeat: no-repeat;
}

@media (min-width: 768px) {
    .logo-img-header {
        height: 80px;
    }

    .logo-img-footer {
        height: 200px;
    }

    .svg-icon {
        height: 24px;
    }

    .svg-icon-large {
        height: 29px !important;
    }

    .svg-icon-xxl {
        height: 48px !important;
    }

    .customers-love-us-section {
        background: linear-gradient(rgba(0,0,0,0.60), rgba(0,0,0,0.60)), url('/images/Dogs Outdoors Anthony Duran.jpg') center / cover no-repeat;
    }

    .reviews-logo {
        bottom: 8%;
        right: 6%;
        width: 8%;
    }
}

.svg-primary {
    fill: var(--primary);
}

.svg-secondary {
    fill: var(--bs-secondary);
}

.svg-light {
    fill: var(--light);
}

.svg-white {
    fill: white;
}

.text-warning, .text-accent {
    color: var(--accent) !important;
}

.border-light {
    border-color: var(--light) !important;
}

.h1-clamp {
    font-size: clamp(1.6rem, 3vw, 2.6rem);
}

.support-text-clamp {
    font-size: clamp(0.9rem, 1.2vw, 1.1rem);
}

.extra-small {
    font-size: 0.65rem;
}

.clickable {
    cursor: pointer;
}

.table-responsive {
    min-width: 0;
}

.required-form-control::after {
    content: " *";
    color: red;
}

.bg-primary-gradient {
    background: linear-gradient(to right, var(--primary), var(--primary-accent))
}

.bg-dark-gradient {
    background: linear-gradient(to right, var(--dark), #464444);
}

.bg-black-55 {
    background-color: rgba(0, 0, 0, 0.55);
}

.btn-main-mosquito, .btn-main-mosquito:hover { /* orange solid */
    background-color: var(--secondary);
    border: 1px solid var(--secondary);
    color: white !important;
    font-weight: bold;
}

.btn-main-outline-mosquito, .btn-main-outline-mosquito:hover { /* orange outline */
    background-color: transparent;
    border: 1px solid var(--secondary);
    color: var(--secondary) !important;
    font-weight: bold;
}

.btn-secondary-mosquito, .btn-secondary-mosquito:hover { /* green solid */
    background-color: var(--primary);
    border: 1px solid var(--primary);
    color: white !important;
    font-weight: bold;
}

.btn-accent-mosquito, .btn-accent-mosquito:hover { /* yellow solid */
    background-color: var(--accent);
    border: 1px solid var(--accent);
    color: black !important;
    font-weight: normal;
}

.btn-tertiary-mosquito, .btn-tertiary-mosquito:hover { /* dark solid */
    background-color: var(--dark);
    border: 1px solid var(--dark);
    color: white !important;
    font-weight: bold;
}