@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

.body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
}

h1 {
    font-weight: 700; /* Bold */
    font-size: 2.5em;
}

h2 {
    font-weight: 600; /* SemiBold */
    font-size: 2em;
}

h3 {
    font-weight: 500; /* Medium */
    font-size: 1.5em;
}

p.light {
    font-weight: 300; /* Light */
}

.bg-dark {
    background-color: rgb(25, 33, 44) !important;
}

.btn-primary {
    --bs-btn-color: black;
    --bs-btn-bg: #ffba1f;
    --bs-btn-border-color: #ffba1f;
    --bs-btn-hover-bg: #3e4d60;
    --bs-btn-hover-border-color: #3e4d60;
    font-weight: 500;
    /*    
    --bs-btn-bg: #0d6efd;
    --bs-btn-border-color: #0d6efd;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b5ed7;
    --bs-btn-hover-border-color: #0a58ca;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0a58ca;
    --bs-btn-active-border-color: #0a53be;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #0d6efd;
    --bs-btn-disabled-border-color: #0d6efd;*/
}

.platform-card img.platform-icon {
    transition: filter 0.3s ease, transform 0.3s ease;
}

.platform-card:hover img.platform-icon {
    filter: brightness(1.2) saturate(1.3);
    transform: scale(1.05);
}

.platform-card {
    transition: color 0.3s ease;
}

.platform-card:hover {
    color: rgb(255, 186, 31) !important;
}

/* Carousel arrow buttons */
.carousel-nav-arrow {
    background-color: rgba(0, 0, 0, 0.4) !important;
    color: white !important;
    opacity: 1 !important;
    backdrop-filter: blur(4px);
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.carousel-nav-arrow:hover {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* Override MudBlazor inline opacity on carousel arrows */
.mud-carousel .carousel-nav-arrow.mud-icon-button {
    opacity: 1 !important;
}

/* AppBar hide-on-scroll */
.mud-appbar.appbar-auto-hide {
    transition: transform 0.3s ease-in-out;
}

.mud-appbar.appbar-auto-hide.appbar-hidden {
    transform: translateY(-100%);
}

/* Spacer to offset the fixed AppBar. Update if AppBar padding/logo sizes change. */
#appbar-spacer {
    height: 80px;
    flex-shrink: 0;
}

@media (min-width: 960px) {
    #appbar-spacer {
        height: 100px;
    }
}