@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap');

:root {
    --brand-yellow: #F0B323;
    --brand-red: #CB333B;
    --brand-gray: #53565A;
    --brand-teal: #00A3AD;
    --brand-orange: #F68D2E;
    --brand-red-dark: #A92B36;
    --brand-teal-dark: #00858D;
    --brand-yellow-soft: #FFF4D5;
    --brand-red-soft: #F8D7DC;
    --brand-teal-soft: #D8F4F6;
}

body {
    color: var(--brand-gray);
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 300;
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-bold,
.font-extrabold {
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 500;
}

.font-normal {
    font-weight: 300;
}

.font-sans {
    font-family: 'Montserrat', Arial, sans-serif !important;
}

.text-gray-900,
.text-gray-800,
.text-gray-700,
.text-gray-500,
.text-\[\#53565A\] {
    color: var(--brand-gray) !important;
}

.text-\[\#CB333B\],
.text-red-600,
.text-red-700,
.text-red-800 {
    color: var(--brand-red) !important;
}

.text-blue-600,
.text-blue-700,
.text-blue-800,
.hover\:text-blue-600:hover {
    color: var(--brand-teal) !important;
}

.text-green-500,
.text-green-700,
.text-green-800 {
    color: var(--brand-teal) !important;
}

.text-yellow-700,
.text-yellow-800,
.text-\[\#F0B323\] {
    color: var(--brand-yellow) !important;
}

.bg-blue-600,
.bg-blue-700 {
    background-color: var(--brand-teal) !important;
}

.hover\:bg-blue-800:hover {
    background-color: var(--brand-teal-dark) !important;
}

.bg-green-600,
.bg-green-700,
.hover\:bg-green-700:hover,
.hover\:bg-green-800:hover {
    background-color: var(--brand-teal) !important;
}

.hover\:bg-red-800:hover,
.hover\:bg-purple-800:hover {
    background-color: var(--brand-red-dark) !important;
}

.hover\:bg-gray-100:hover,
.hover\:bg-gray-200:hover,
.hover\:bg-gray-700:hover {
    background-color: var(--brand-teal-dark) !important;
    color: #fff !important;
}

.testimonial-card:hover {
    background-color: #e5e7eb !important;
    color: var(--brand-gray) !important;
}

.bg-red-100 {
    background-color: var(--brand-red-soft) !important;
}

.bg-green-100,
.bg-blue-100 {
    background-color: var(--brand-teal-soft) !important;
}

.bg-yellow-100 {
    background-color: var(--brand-yellow-soft) !important;
}

.border-red-400 {
    border-color: var(--brand-red) !important;
}

.border-green-400,
.border-blue-400 {
    border-color: var(--brand-teal) !important;
}

.border-yellow-400,
.border-\[\#F0B323\] {
    border-color: var(--brand-yellow) !important;
}

.focus\:ring-blue-300:focus,
.focus\:ring-green-300:focus,
.focus\:ring-primary-500:focus,
.focus\:ring-primary-600:focus {
    --tw-ring-color: rgb(0 163 173 / 0.35) !important;
}

.focus\:border-blue-500:focus,
.focus\:border-primary-500:focus,
.focus\:border-primary-600:focus {
    border-color: var(--brand-teal) !important;
}

a:hover,
.md\:hover\:text-red-500:hover {
    color: var(--brand-yellow) !important;
}

.btn-wsp{
    position: fixed;
    width: 70px;
    height: 70px;
    line-height: 63px;
    bottom: 75px;
    right: 25px;
    background: var(--brand-teal);
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 35px;
    box-shadow: 0 1px 10px rgba(0,0,0,0.3);
    z-index: 100;
    transition: all 300ms ease;
}

.btn-wsp:hover{
    background: #fff;
    color: var(--brand-teal);
}