/*  ##############################
    
           AFK JUMBOTRON

    ##############################  */

:root{
    /* this has to be set to switch between light or dark */
    color-scheme: light dark;


    --gladiatorus-dark-grey-1: #101010;
    --gladiatorus-medium-grey-1: #171717;
    --gladiatorus-medium-grey-weak: #1b1b1b;
    
    /* --afk-red: #9c362b; */
    --afk-red: #e80000;
    --afk-soft-grey: #252525;
    --afk-dark-grey: #1a1a1a;
    --afk-dark-grey-2: #181818;
    --afk-dark-grey-3: #0e0e0e;

    --afk-soft-white: #ececec;
    --afk-gentle-white: #cecece;

    --afk-smn-border-color-dark: #f6f6f62b;
    --afk-smn-border-color-light: #0000002b;

    --afk-smm-search-light-background: #f5f5f5;
}

.afk-welcome-example-image{
    height: 254px;
    width: 100%;
    object-fit: cover;
}
.welcome-logo-svg-img{
    transition-duration: 0.343s;
    opacity: 0;
    animation: load-welcome-logo-svg-img 1s forwards;
}
@keyframes load-welcome-logo-svg-img{
    0%{
        opacity:0;
        transform: translate(0px, 100%);
    }

    100%{
        opacity:1;
        transform: translate(0px, 0%);
    }
}

.jumbotron, .hero, .jumbotron-hero  {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 50px;
    padding-right: 50px;
    color: black;
    text-align: center; /* Add this line to align the text towards the left */
    /* white-space-collapse: break-spaces;  */

    z-index: 2;
    position: relative;

    background-color: #ffffffa6;
    background-color: #0a0a0af2;
    background-color: #121212;
    color: #bcbcbca6;
}
@media (max-width: 768px) {
    .jumbotron, .hero, .jumbotron-hero {
        padding-top: 50px;
        padding-top: 15px;
        padding-bottom: 50px;
        padding-left: 15px;
        padding-right: 15px;
    }
}
/* .{{jumbotron.type|default:"jumbotron"}} div, .{{jumbotron.type|default:"jumbotron"}} p{
    backdrop-filter: blur(10px);
    border-radius: 10px;
}*/

.jumbotron-content-container {
    backdrop-filter: blur(10px);
    border-radius: 10px;
    background-color: #00000066;
    background-color: #ffffffc7;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #ffffff;
    

    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
    border-radius: 10px;
    
    padding: 5px;
    padding-top: 20px;
    padding-bottom: 20px;
    color: #272727;
    box-shadow: 0 4px 3px 0 #0000004f;

    z-index: 4;
    position: relative;

    background-color: #121212f5;
    color: #a9a9a9;
}

.jumbotron-light, .hero, .jumbotron-light-hero, .jumbotron-light-hero{
    background-color: #d3d3d3;
    background-color: light-dark(#d3d3d3, #131313);
}
.jumbotron-light-content-contanier {
    background-color: #efefeff5;
    background-color: light-dark(var(--afk-soft-white), var(--afk-dark-grey));
    color: light-dark(var(--afk-dark-grey), var(--afk-soft-white));

    /* color: var(--gladiatorus-dark-grey-1); */
}
.jumbotron-light a{
    color: var(--gladiatorus-dark-grey-1);
    color: light-dark(var(--afk-dark-grey), var(--afk-soft-white));

}



.afk-studio-jumbotron-video{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(0px, -86%);
    z-index: 3;
    left: 0px;
    /* opacity: 0.4; */
    /* filter: blur(6px); */
}

.jumbotron-content-container{
    backdrop-filter: blur(6px);
    background-color: #ffffff42;
    background-color: #ebebebff;
    background-color: light-dark(var(--afk-soft-white), var(--afk-dark-grey));
    color: light-dark(var(--afk-dark-grey), var(--afk-soft-white));
}