/* font */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
/* variable */
:root {
    --alt-font: "Lora", serif;
    --primary-font: "Nunito Sans", sans-serif;
    --base-color: #EED1AF;
    --dark-gray: #2c3038;
    --medium-gray:#888e95;
}

.bg-gradient-bottom-dark-transparent {
    background: -moz-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 80%);
    background: -webkit-linear-gradient(top,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 80%);
    background: linear-gradient(to bottom,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 80%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000',endColorstr='#a8000000',GradientType=0 )
}
.bg-section-2{
    background-color: #111111;
    color: #fff;
}

.bg-header{
    background: rgb(17,17,17);
    background: linear-gradient(0deg, rgba(17,17,17,1) 0%, rgba(0,0,0,1) 100%);

}
.app-cta{
    padding-top: 2rem;
}
@media (min-width: 991px) {
    #navbarNav .navbar-toggler-line{
        width: 50px;
    }
    .app-cta{
        padding-top: 0;
position: absolute;
        bottom: -23px;
    }
}
@media (max-width: 992px) {
    .app-iconset{
        display: block !important;
    }
    .app-iconset img{
      padding-top: 15px;
        width: calc(50% - 2.1px);
    }
    .home-slider .swiper-slide img {
        height: 400px;
        object-fit: cover;
    }
    .navbarsocial{
        flex-direction: row !important;
    }
}
#navbarNav{
    z-index: 9999999999999;
    background-image: url("/img/menubg.png");
    background-repeat: no-repeat;
    background-size: 50% 100% ;
    background-position: left;

}

@media (max-width: 1330px) {
    .navbar .navbar-nav .nav-link{
        padding: 10px 10px !important;
    }
}


#navbarNav .navbar-brand img{
    width: auto;
    height: 50px;
}

.navbar-collapse-show .navbar-toggler-line:nth-child(4), .navbar-collapse-show .navbar-toggler-line:nth-child(1){
    width: 0% !important;
}

@media (max-width: 768px) {
    .contain{
        padding: 0 15px;
        width: 100%;
    }
    .holder {
        width: 100% !important;
        height: 480px !important;
        text-align: center;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;

    }
    .holder .album{
        width: 300px !important;
        height: 300px !important;
        background-position: center !important;


    }
    .holder .mejs-player{
        width: 100% !important;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .mejs-player{
        padding-left: 0 !important;
    }
}