html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  
}

.pulse-btn-no-border {
    animation: pulse-no-border 1.5s infinite;
}

@keyframes pulse-no-border {
    0% {
        transform: scale(1);
    }

    70% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

.pulse-btn {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}

.pulse-btn-warning {
    animation: pulse-warning 1.5s infinite;
}

@keyframes pulse-warning {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); /* Bootstrap warning color */
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(255, 193, 7, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(255, 193, 7, 0);
    }
}

.wwise-accordion {
    background-color: #27aae1 !important;
    color: white !important
}

.text-wwise-light-blue {
    color: #27aae1 !important;
}
.text-wwise-dark-blue {
    color: #283c92 !important;
}
.bg-wwise-dark-blue {
    background-color: #283c92 !important;
}

.bg-wwise-light-blue {
    background-color: #27aae1 !important;
}

.pulse-text {
    display: inline-block;
    transition: transform 0.3s ease-in-out;
    animation: pulse-text-keyframe 1s infinite alternate;
}

@keyframes pulse-text-keyframe {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

.home-iso-item {
    background-color: #283c92 !important;
    color:white;
}

.border-wwise-dark-blue {
    border-color: #283c92 !important;
}

.nav-pill-soft .nav-link.active, .nav-pill-soft .show > .nav-link {
    color: white !important;
    background-color: #283c92 !important;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: white !important;
    background-color: #283c92 !important;
}

/* Add bottom border on hover for navbar links */
.navbar-nav .nav-link {
    position: relative;
    transition: all 0.3s ease;
}

    .navbar-nav .nav-link::after {
        content: '';
        position: absolute;
        width: 0;
        height: 2px; /* thickness of the border */
        bottom: 0;
        left: 0;
        background-color: #283c92; /* bootstrap primary color */
        transition: width 0.3s ease;
        color:#283c92 !important;
    }

    .navbar-nav .nav-link:hover::after,
    .navbar-nav .nav-item.dropdown:hover > .nav-link::after {
        width: 100%;
    }

/* Make the nav links move smoothly on hover */
.nav.flex-column .nav-link {
    display: inline-block; /* ensures transform works */
    transition: transform 0.3s ease; /* smooth movement */
}
.nav.flex-column .nav-link:hover {
    transform: translateX(5px); /* move right on hover */
}


/* slide-in effect */

.slide-in {
    opacity: 0;
    transform: translateY(50px); /* Start slightly below */
    transition: all 0.8s ease-out;
}
.slide-in.active {
    opacity: 1;
    transform: translateY(0); /* Slide to original position */
}

/* on hover of a element make it slightly bigger*/
.hover-scale {
    transition: transform 0.3s ease; /* smooth animation */
}
.hover-scale:hover {
    transform: scale(1.05); /* slightly bigger */
}