/* Diese Datei enthält Bootstrap CSS-Variablen, die in der careercenter.hbs verwendet werden */

:root {

  /* Colors */
  --bs-body-color: #1E252B;
  --bs-primary: #00617A;
  --bs-primary-rgb: 0, 97, 122;
  --bs-secondary: #FFC72E;
  --bs-secondary-rgb: 255, 199, 46;
  --bs-tertiary-bg: #26798e;
  --bs-tertiary-bg-rgb: 38, 121, 142;
  --bs-light-rgb: 244, 244, 244;
  --bs-dark-rgb: 30, 37, 43;
  
  /* Typography */
  --bs-font-sans-serif: 'Roboto', sans-serif;

  /* 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);
        }
    }

/* Navigation Styles */
nav .nav-link:hover {
    color: var(--bs-primary) !important;
}

/* Button Styles */

.btn-primary {
--bs-btn-color: var(--bs-white);
--bs-btn-bg: var(--bs-primary);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-color: var(--bs-white);
--bs-btn-hover-bg: var(--bs-tertiary-bg);
--bs-btn-hover-border-color: var(--bs-tertiary-bg);
--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-secondary {
--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-light {
--bs-btn-color: var(--bs-primary);
--bs-btn-bg: var(--bs-white);
--bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-tertiary-bg);
--bs-btn-hover-border-color: var(--bs-tertiary-bg);
--bs-btn-active-color: var(--bs-white);
--bs-btn-active-bg: var(--bs-white);
--bs-btn-active-border-color: var(--bs-tertiary-bg);
}

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