@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&display=swap');

.main-header .container-fluid {
    padding: unset;
}
.main-header {
    background-color: #000000;

    z-index: 9999;
    padding: 0px !important;
}
.main-header a.navbar-brand {
    font-size: 32px;
    font-style: italic;
    font-family: "DM Serif Display", serif;
    font-weight: 500;
    line-height: 36px;
    padding: 0px 0px 5px 0px;
}
.main-header span.fam-text {
    color: #B01E31;
}
span.lessons-text {
    color: #FFFFFF;
}
.main-header li.nav-item {
    padding: 0px 0px 0px 40px;
}
.main-header li.nav-item a {
    font-family: 'DM sans';
    color: #FFFFFF !important;
    font-size: 18px;
    font-weight: 400;
    padding: 0px;
}

.main-header .join-now a {
    background-color: #B3203D;
}
.container-fluid.main-header .navbar {
    background-color: black;
    z-index: 9999;
    padding: 0px 20px;
}
.navbar-light .navbar-toggler .navbar-toggler-icon {
    background-image: url(../images/menu-hamburger.png) !important;
    background-size: cover;

}
.navbar-light .navbar-toggler.active .navbar-toggler-icon {
    background-image: url(../images/menu-cross-icon.png) !important;
    background-size: cover;
}
.navbar-toggler {
    transition: background-image .8s ease-in-out;
}
.banner-main-cont.container-fluid {
    margin-top: -41px;
    background: url(../images/banner-image.png);
    background-size: cover;
}
.banner-main-cont.container-fluid {

    background: url(../images/banner-image.png);
    background-size: cover;
    background-position: center;
    left: 0px;
    padding: 240px 0px 200px 0px;
    top: 0px;
}
h1.banner-head {
    font-family: "DM Serif Display", serif;
    color: #ffffff;
    line-height: 87px;
    font-size: 64px;
    font-style: italic;
}
.banner-content {
    padding: 0px 20px 0px 0px;
}
@media(min-width: 1280px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1200px !important;
    }
}
@media(min-width: 992px){
    .navbar-expand-lg .navbar-collapse {
        justify-content: flex-end;
    }
}
@media(max-width: 992px){
    .navbar-toggler:focus {
        box-shadow: unset !important;
    }
    .navbar-toggler {
        box-shadow: unset !important;
        font-size: 1rem !important;
    }
    .main-header {
        background-color: #000000;
        padding: unset !important;
    }


    div#navbarNav {
        position: absolute;
        top: 41px;
        background-color: #282828;
        width: calc(100% + 15px);
        left: -10px !important;
        height: calc(100vh - 41px);
        transition: all 300ms ease-in-out;
        opacity: 1;
    }

    ul.navbar-nav {
        margin: 40px 0px 0px 0px;
    }
    .main-header li.nav-item {
        padding: 5px 0px 0px 0px;
    }
    .main-header li.nav-item a {
        font-family: 'DM sans';
        color: #FFFFFF !important;
        font-size: 18px;
        font-weight: 400;
        padding: 10px 5px;
        display: block;
        text-align: center;
        width: fit-content;
        margin: 0 auto;
    }
    .main-header .join-now a {
        background-color: #B3203D;
        padding: 1px 4px 1px 4px;
    }
    .container-fluid.main-header .navbar {
        padding: 0px 0px 0px 20px;
    }
    .collapse:not(.show) {
        animation-name: zoomOut;
        animation-duration: 1s; /* Set the duration of the animation */
    }
    
    div#navbarNav.zoom-out {
        animation-name: zoomOutNavbar;
        animation-duration: 1s; /* Set the duration of the animation */
    }
}
    /* 
  
}
@keyframes zoomIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
*/
@keyframes zoomOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes zoomOutNavbar {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@media(max-width: 1024px) and (min-width: 768px){
    h1.banner-head {
        line-height: 52px;
        font-size: 34px
    }
    .banner-main-cont.container-fluid {
        padding: 180px 0px 140px 0px;
    }
}
@media(min-width: 768px){
    .desk-version{
        display: block;
    }
    .mob-version{
        display: none;
    }
    .desk-ver{
        display: flex;
    }
    .mob-ver{
        display: none;
    }
    .desk-view{
        display: flex !important;
    }
    .mob-view{
        display: none !important;
    }

}
@media(max-width: 767px){
    .desk-version{
        display: none;
    }
    .mob-version{
        display: block;
    }
    .desk-ver{
        display: none;
    }
    .mob-ver {
        display: block;
    }s
    .mob-view{
        display: flex !important;
    }
    .desk-view{
        display: none !important;
    }
    .banner-main-cont.container-fluid {
        background: linear-gradient(180deg, rgba(17, 17, 17, 0) 0%, #1111118f 90%) 0% 90%, url(../images/banner-image-mob.png);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: top right;
        padding: unset;
        height: 100vh;
        margin-top: -150px;
        position: relative;
    }
    .banner-main-cont .container {
        position: absolute;
        bottom: 20px;
    }
    .banner-content {
        padding: 0px 40px 0px 0px;
    }
    .banner-head {
        line-height: 44px !important;
        font-size: 32px !important;
    }
    
}