@keyframes heroFade {

    from {
        opacity: 0;
        transform: translateY(50px) scale(.8);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


@keyframes heroFloat {

    0% {
        transform: translateY(0px) rotate(-1deg) scale(1);
    }

    25% {
        transform: translateY(-8px) rotate(1deg) scale(1.02);
    }

    50% {
        transform: translateY(-14px) rotate(-1deg) scale(1.03);
    }

    75% {
        transform: translateY(-8px) rotate(1deg) scale(1.02);
    }

    100% {
        transform: translateY(0px) rotate(-1deg) scale(1);
    }
}

body {
}
/*==========================================================
Footer
==========================================================*/

.bal-footer {
    background: #0f172a;
    color: white;
    padding: 70px 0 25px;
    margin-top: 80px;
}

.footer-logo {
    width: 80px;
    margin-bottom: 20px;
}

.footer-title {
    color: white;
    margin-bottom: 15px;
    font-weight: bold;
}

.footer-text {
    color: #cbd5e1;
    line-height: 34px;
}

.bal-footer h5 {
    color: white;
    margin-bottom: 20px;
    font-weight: bold;
}

.bal-footer ul {
    list-style: none;
    padding: 0;
}

.bal-footer li {
    margin-bottom: 14px;
}

.bal-footer a {
    color: #cbd5e1;
    text-decoration: none;
    transition: .3s;
}

    .bal-footer a:hover {
        color: #60a5fa;
    }

.bal-footer hr {
    border-color: #334155;
    margin: 40px 0;
}
/*===============================
Hero
================================*/

.bal-hero {
    padding: 100px 0;
    background: linear-gradient(180deg,#ffffff,#f5f9ff);
}

.hero-badge {
    display: inline-block;
    background: #EAF4FF;
    color: #0D6EFD;
    padding: 8px 18px;
    border-radius: 30px;
    font-weight: 600;
    margin-bottom: 20px;
}

.hero-title {
    font-size: 58px;
    font-weight: 900;
    line-height: 85px;
    color: #14213D;
}

.hero-description {
    font-size: 19px;
    line-height: 40px;
    margin-top: 30px;
    color: #5F6B7A;
}

/*=========================================================
    HERO LOGO
=========================================================*/
.hero-logo {
    max-width: 420px;
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    animation: heroFade 1.2s ease-out, heroFloat 5s ease-in-out infinite 1.2s;
}

    .hero-logo:hover {
        transform: translateY(-8px);
    }

.bal-header-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}