/* Define root variables for Bootstrap and custom styles */

:root {
    /* Define root Bootstrap variables */
    --bs-font-sans-serif: Roboto, sans-serif;
    --bs-body-color:#1E252B;
    --bs-primary: #0097A2;
    --bs-primary-rgb: 0, 97, 122;
    --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;
}