:root {
    --fn-yellow:#F3E624;
    --fn-yellow-hover:#cfa900;
}

html,body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
body {
    color: var(--bs-light);
    font-family: "Raleway", sans-serif;
    background-image: url("/static/img/bg.webp");
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}
* {
    transition-property: all !important;
    transition-duration: 500ms !important;
}
::-webkit-scrollbar {
    width: 10px;
    background-color: rgba(0, 0, 0, 0.8);
}
::-webkit-scrollbar-thumb {
    background: var(--fn-yellow);
}
p,h1,h2,h3,h4,h5,h6 {
    margin: 0;
    padding: 0;
}
#hero .img-fluid {
    width: 500px;
}
.social {
    color: var(--fn-yellow);
    opacity: 1;
    padding: 0 .5rem;
}
.social:hover {
    opacity: 1;
    color: var(--fn-yellow-hover);
}

.social i:hover
{
    transform: scale(1.1);
}
/* bs5 override */

.text-warning {
color: var(--fn-yellow) !important;
}


.btn-outline-warning {
    border-color: var(--fn-yellow);
    color: var(--fn-yellow);
}
.btn-outline-warning:hover{
    background: var(--fn-yellow);
    border-color: var(--fn-yellow);
}

.btn-warning {
    background: var(--fn-yellow);
    border-color: var(--fn-yellow);
}
.btn-warning:hover{

}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    cursor: pointer;
}
.whatsapp-float img {
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.whatsapp-float img:hover {
    transform: scale(1.1);
}

.bg-dark-op-2 { background-color: rgba(0, 0, 0, 0.2); }
.bg-dark-op-5 { background-color: rgba(0, 0, 0, 0.5); }
.bg-dark-op-8 { background-color: rgba(0, 0, 0, 0.8); }
.bg-blue-op-2 { background-color: rgba(23, 33, 58, 0.2); }
.bg-blue-op-5 { background-color: rgba(23, 33, 58, 0.5); }
.bg-blue-op-8 { background-color: rgba(23, 33, 58, 0.8); }
.bg-blue      { background-color: rgba(23, 33, 58, 1.0); }


.reel-link {
    color: var(--bs-light);
}

.reel-link:hover {
    background-color: var(--fn-yellow);
    color: black;
}

.reel-description {
    font-family: "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    opacity: 0.8;
}


.bg-ratio {
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
}


small.role {
    font-family: "Roboto Condensed", sans-serif;
    color: var(--bs-secondary);
}

span.name {
    font-family: "Roboto Condensed", sans-serif;
}


.fs-0 {
        font-size: calc(1.75rem + 1.5vw) !important;
}