:root {
    /* Define root Bootstrap variables */
    --bs-font-sans-serif: Roboto, sans-serif;
    --bs-body-color: #1E252B;
    --bs-primary: #24a9e5;
    --bs-primary-rgb: 36, 169, 229;
    --bs-secondary: #FFC72E;
    --bs-secondary-rgb: 255, 199, 46;
    --bs-light-rgb: 244, 244, 244;
    --bs-dark-rgb: 30, 37, 43;
    /* Define custom variables font sizes */
    --template-fs-1: 2.25rem;
    --template-fs-2: 2rem;
    --template-fs-3: 1.75rem;
    --template-fs-4: 1.5rem;
    --template-fs-5: 1.15rem;
    --template-fs-6: 1rem;
}

/* Define custom styles font sizes */

.template-fs-1 {
    font-size: var(--template-fs-1);
}

.template-fs-2 {
    font-size: var(--template-fs-2);
}

.template-fs-3 {
    font-size: var(--template-fs-3);
}

.template-fs-4 {
    font-size: var(--template-fs-4);
}

.template-fs-5 {
    font-size: var(--template-fs-5);
}

.template-fs-6 {
    font-size: var(--template-fs-6);
}

@media (min-width: 768px) {
    .template-fs-md-1 {
        font-size: var(--template-fs-1);
    }

    .template-fs-md-2 {
        font-size: var(--template-fs-2);
    }

    .template-fs-md-3 {
        font-size: var(--template-fs-3);
    }

    .template-fs-md-4 {
        font-size: var(--template-fs-4);
    }

    .template-fs-md-5 {
        font-size: var(--template-fs-5);
    }

    .template-fs-md-6 {
        font-size: var(--template-fs-6);
    }
}

@media (min-width: 922px) {

    .template-fs-lg-1 {
        font-size: var(--template-fs-1);
    }

    .template-fs-lg-2 {
        font-size: var(--template-fs-2);
    }

    .template-fs-lg-3 {
        font-size: var(--template-fs-3);
    }

    .template-fs-lg-4 {
        font-size: var(--template-fs-4);
    }

    .template-fs-lg-5 {
        font-size: var(--template-fs-5);
    }

    .template-fs-lg-6 {
        font-size: var(--template-fs-6);
    }
}

/* Button Styles */

.btn-primary {
    --bs-btn-color: var(--bs-body-color);
    --bs-btn-bg: var(--bs-secondary);
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-white);
    --bs-btn-hover-border-color: var(--bs-white);
    --bs-btn-active-color: var(--bs-white);
    --bs-btn-active-bg: var(--bs-tertiary-bg);
    --bs-btn-active-border-color: var(--bs-tertiary-bg);
}

.btn-primary {
    transition: all 0.4s ease-in-out;
}

/* Custom Styles */

#logo {
    max-width: 80px;
}

#heroshot {
    max-height: 456px;
    object-position: center;
    aspect-ratio: 5 / 2;
}

ul {
    padding-left: 1.25rem;
}

.benefit-icon {
    max-width: 70px;
    max-height: 70px;
}

.social-icon {
    max-width: 29px;
    max-height: 29px;
}

.custom-link a {
    color: var(--bs-white);
    text-decoration: none;
    transition: all 0.3s ease-in-out;
}

.custom-link a:hover {
    color: rgb(var(--bs-secondary-rgb));
}

@media (min-width: 576px) {
    #footer-graphic {
        background-size: contain;
    }

    .benefit-icon {
        max-width: 105px;
        max-height: 105px;
    }
}

@media (min-width: 768px) {
    #logo {
        max-width: 95px;
    }
}

@media (min-width: 922px) {

    p,
    ul {
        font-size: var(--template-fs-5);
    }
}