@font-face {
    font-family: 'Pretoria';
    src: url(../../fonts/Pretoria.ttf);
  }
@font-face {
  font-family: 'Pretoria Woff2';
  src: url(../../fonts/Pretoria.woff2);
}
@font-face {
    font-family: 'Acre';
    src: url(../../fonts/Acre.ttf);
}
@font-face {
    font-family: 'Acre Woff2';
    src: url(../../fonts/Acre.woff2);
}
h1 {
    color: #fff !important;
    font-family: 'Pretoria Woff2', 'Pretoria';
    white-space: nowrap;
    text-shadow: 0 0 4px black;
    transition: 0.3s;
}
.single-login-button{
    border: 0;
    background-color: #a90d0b;
    color: #fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 7.5px 14px !important;
    box-shadow: 0 0 8px -3px black !important;
    transition: 0.6s;
    opacity: 1;
    font-size: 16px !important;

}

.header input::placeholder{
    color: #000;
}

.head .loading{
    width: 20px;
    height: 20px !important;
    border: 3px solid rgba(255,255,255,.3);
}
.mobile-aside-toggler {
    width: 28px;
    top: 24px !important;
    left: 21px;
    transition: 0.3s;
}

.header {
    width: 100%;
    position: fixed;
    background:transparent;
    /*background-image: linear-gradient(174deg, #0f177c, #bf04d0);*/    
    /* background-image: linear-gradient(177deg, #3c3c3c -7%, #4f23b9 81%, #a38add 97%, #ffffff00 110%); */
    top: 0;
    z-index:99 !important;
    transition: .3s !important;
    padding: 18px 20px ;
}
.header.nav-scroll-bg{
    background:linear-gradient(330deg, rgba(214,65,185,1) 0%, rgba(183,84,196,1) 25%, rgba(166,97,202,1) 40%, rgba(148,109,208,1) 55%, rgba(129,121,215,1) 77%, rgba(111,133,222,1) 88%, rgba(104,138,225,1) 97%, rgba(93,145,229,1) 100%);
    top: 0px;
}
.logged-in .header{
    /* background-image: linear-gradient(90deg, #6995FD, #5b1399 20% ); */
    background: linear-gradient(330deg, rgba(214,65,185,1) 0%, rgba(183,84,196,1) 25%, rgba(166,97,202,1) 40%, rgba(148,109,208,1) 55%, rgba(129,121,215,1) 77%, rgba(111,133,222,1) 88%, rgba(104,138,225,1) 97%, rgba(93,145,229,1) 100%); /*default navbar css*/
        max-height: 100vh;
}
.mobile-nav-bg .header{
    background-color: #222 !important;
}
.mobile-nav-bg section, .mobile-nav-bg footer{
    filter: brightness(0.6) !important;
    background: #fcfcfc;
    pointer-events: none;
}

.nav-scroll-bg{
    height: auto;
    transition: .3s;
    z-index: 999999;
    background-color: transparent !important;
}
.navbar .d-flex.align-items-center.justify-content-between.w-100.position-relative{
    padding: 0 30px;
}
.navbar .position-absolute{
    left:50px;
}
.nav-icon img{
    width: 60px;
    transition: 0.3s;
}
.nav-icon p{
    color: #c50000 !important;
    font-family: 'Pretoria';
    font-size: 26.5px;
    white-space: nowrap;
}

#navbarSupportedContent ul.navbar-nav li.nav-item a.nav-link{
    font-size: 13px;
    transition: 0.3s;
    font-weight: 800;
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
    padding: 7px 10px;
}
.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden
}
.navbar-toggler-icon{
    width: 28px !important;
    color: var(--first-color) !important;
    
}
.navbar-light .navbar-toggler{
    border: 0 !important;
    color: var(--first-color);
}
.navbar-light .navbar-toggler-icon{
    background-image: none !important;
    vertical-align: unset !important;
    font-size: unset;
    line-height: 0;
    transform: unset !important;
    border-radius: 6px;
    box-sizing: content-box !important;
    
}
.navbar-light .navbar-toggler-icon span{
    height: 2px;
    width: 100%;
    background-color: #fff;
    margin: 3px 0px;
    display: inline-block;
    box-shadow: 0 0 3px 0px #3b3b3b;
}
.mobile-nav-bg .navbar-light .navbar-toggler-icon span{
    box-shadow: none !important;
}
.mobile-login{
    background: #666666;
    padding: 19px;
    border-radius: 6px;
}
button.navbar-toggler span span{
    position: relative;
    top: 0;
    bottom: 0;
    transition: 0.3s;
}
button.navbar-toggler[aria-expanded="true"]{
    transform: unset !important;
}
button.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
    background-color: #fff;
}
button.navbar-toggler[aria-expanded="true"] span span:nth-child(1){
    rotate: 45deg;
    transition: 0.3s;
    top: 7.75px;
    background: #c21c1a;
}
button.navbar-toggler[aria-expanded="true"] span span:nth-child(2){
    opacity: 0;
    transition: 0.3s;
}
button.navbar-toggler[aria-expanded="true"] span span:nth-child(3){
    rotate: -45deg ;
    top: -8px;
    transition: 0.3s;
    background: #c21c1a;
}
button.navbar-toggler[aria-expanded="true"] .header{
    background-color: #000 !important;
}
.d-flex.justify-content-start.w-100.mt-5.position-relative{
    transition: 0.3s;
}
.nav-scroll-bg .d-flex.justify-content-start.w-100.mt-5.position-relative{
    margin-top: 0 !important;
    transition: 0.3s;
    background-color: #ffffff !important;
}#navbarSupportedContent ul.navbar-nav li.nav-item a{
    border-radius: 6px;
}

.header form button{
    white-space: nowrap;
    border-top-right-radius:50px;
    border-bottom-right-radius:50px;
    padding: 13.5px 25px !important;
}
.header form input:focus-visible, .header form button:focus-visible, .header form button:focus{
    outline:none;
}
.user-name{
    border-top-left-radius:50px;
    border-bottom-left-radius:50px;
}
.sub-nav-item{
    position: absolute;
    transition: 0.3s;
    list-style-type: none;
    padding-left: 0 !important;
    width: 150px;
    opacity: 0;
    text-align: center;
    transition: 1s;
    display: none;
}
.nav-item{
    transition: .3s;
    margin: 0 3px;
}
@media  (min-width:991.5px) and (max-width:1200px){
    .nav-item{
        flex:1;
    }
}
@media  (min-width:1200px){
    .nav-item{
        text-wrap: nowrap;
    }
}
.sub-nav-item li a{
    background-color: #f2f2f2 !important;
    color: #000  !important;
    text-decoration: none !important;
    list-style: none !important;
    display: inline-block;
    width: 100%;
    padding: 10px 0;
}
.nav-scroll-bg h1{
    text-shadow: 0 0 4px BLACK !important;
}
.nav-scroll-bg #navbarSupportedContent ul.navbar-nav li.nav-item a{
    text-shadow: 0 0 4px BLACK !important;
    padding: 7px 10px;

}
.nav-scroll-bg .nav-icon img{
    width: 55px;
    transition: 0.3s;
}
.nav-scroll-bg #navbarSupportedContent ul.navbar-nav li.nav-item a.nav-link{
    height: unset;
    transition: 0.3s;
    display: flex;
    align-items: center;
}
button[type="submit"]{
    padding: 7.5px 0;
}
.w-login .sub-nav-item{
    text-align: left;
}
.w-login .sub-nav-item a{
    width: 124.35px;
    text-align: center;
}
input:focus , input:focus-visible{
    outline: 0 !important;
}
 .social-icons-container i{
    font-size: 22px;
    background-color: transparent;
    transition: 0.3s;
}
nav input {
    width: 120px;
    border: 0;
    border-radius: 6px;
    padding: 4px 13px;
    box-shadow: none;
}
.nav-scroll-bg nav input{
    box-shadow: 0 0 8px -3px black !important; 
}
nav button[type="submit"]{
    height: 32px;
    border: 0;
    background-color: #a90d0b;
    color:#fff;
    border-radius: 6px;
    display: flex;
    align-items: center;
    padding: 5px 14px !important;
    box-shadow: 0 0 8px -3px black !important; 
}
.mobile-nav-bg .single-login-button{
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0;
    transition: 0.1s;
}
.mid-login{
    opacity: 1;
    transition: 0.3s;
}
.mobile-nav-bg .mid-login{
    opacity: 0;
    transition: 0.3s;
}

/*LOGGED IN NAVBAR START*/
@keyframes dancing-color {

    0%{
        color: #ca1613;
    }
    30%{
        color: #a71b18;
    }
    50%{
        color: #650d0b;
    }
    70%{
        color: #b91411;
    }
    100%{
        color: #ca1613;
    }
    
}

.logged-in h1{
    text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 1px 1px #000, -1px -1px #000, 1px -1px #000, -1px 1px #000 !important; 
    display: flex;
    margin-left: 62px;
}
.logged-in .nav-scroll-bg h1 span{
    color:#fff;
    animation: none;
}
.logged-in h1 span{
    transition: .3s;
    color: #ffffff;
    animation: dancing-color 5s infinite cubic-bezier(0.71, 0.53, 1, 0.93);
    animation: none;
}
.logged-in h1 span:nth-child(2){
    animation-delay: 0.3s;
}
.logged-in h1 span:nth-child(3){
    animation-delay: 0.6s;
}
.logged-in h1 span:nth-child(4){
    animation-delay: 0.9s;
}
.logged-in h1 span:nth-child(5){
    animation-delay: 1.2s;
}
.logged-in h1 span:nth-child(7){
    animation-delay: 1.5s;
}
.logged-in h1 span:nth-child(8){
    animation-delay: 1.8s;
}
.logged-in h1 span:nth-child(9){
    animation-delay: 2.1s;
}
.logged-in h1 span:nth-child(10){
    animation-delay: 2.4s;
}
.logged-in h1 span:nth-child(11){
    animation-delay: 2.7s;
}
.logged-in h1 span:nth-child(12){
    animation-delay: 3s;
}
.logged-in h1 span:nth-child(13){
    animation-delay: 3.3s;
}
.logged-in h1 span:nth-child(14){
    animation-delay: 3.6s;
}
.logged-in .nav-scroll-bg {
    /*background-image: linear-gradient(330deg, rgba(214,65,185,1) 0%, rgba(183,84,196,1) 25%, rgba(166,97,202,1) 40%, rgba(148,109,208,1) 55%, rgba(129,121,215,1) 77%, rgba(111,133,222,1) 88%, rgba(104,138,225,1) 97%, rgba(93,145,229,1) 100%) !important;*/
    /*background-image: linear-gradient(to bottom right, #6995FD, #5b1399 60% ); */
    /*background-image: linear-gradient(90deg, #02277e , #4129a3, #9C3A9D 62% ); */
    background: linear-gradient(330deg, rgba(214,65,185,1) 0%, rgba(183,84,196,1) 25%, rgba(166,97,202,1) 40%, rgba(148,109,208,1) 55%, rgba(129,121,215,1) 77%, rgba(111,133,222,1) 88%, rgba(104,138,225,1) 97%, rgba(93,145,229,1) 100%);
    /*default navbar css*/
    padding: 8px 20px !important;
}
.logged-in .nav-scroll-bg h1{
    color: #fff !important;
    font-size: 28px ;
}

.logged-in .nav-scroll-bg ul.navbar-nav li.nav-item a.nav-link{
    color: #fff !important
}

.logged-in #navbarSupportedContent ul.navbar-nav li.nav-item a.nav-link{
    font-weight: 600;
    text-shadow:none !important;
    color: #ffffff  ;
    transition: 0s;
}
.logged-in .nav-tabs .nav-link.active{
    color: #ffffff;
}
.up-to-date a.up-to-date,
.past a.past,
.sepet a.sepet,
.agreement a.agreement,
.conclusion a.conclusion,
.rindex a.rindex{
    background-color: #7c269686 !important;
    color: #fff !important;
}

/*BIG LOGO NAVBAR START*/

.nav-scroll-bg.big-logo{
    height: 74px !important;
}

.big-logo + section{
    padding-top: 100px !important;
}
.nav-scroll-bg.big-logo  img{
    width: 65px !important;
}

/*BIG LOGO NAVBAR END*/
@keyframes notification-glow{
    0%{
        box-shadow: 0 0 1px 1px #ff3a3a;
    }
    20%{
        box-shadow: 0 0 1px 1px #ff3a3a;
    }
    40%{
        box-shadow: 0 0 8px 1px #ffb3b3;
    }
    60%{
        box-shadow: 0 0 1px 1px #ff3a3a;
    }
    80%{
        box-shadow: 0 0 1px 1px #ff3a3a;
    }
    100%{
        box-shadow: 0 0 1px 1px #ff3a3a;
    }
}

.nav-notification{
    top: 5px !important;
    width: 0; 
    left: 90% !important; 
    padding: 2px;
    box-shadow: 0 0 1px 1px #ff3a3a;
    animation-name:notification-glow ;
    animation-duration: 4s;
    animation-delay: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: alternate;  
}
.navbar-badge {
    transition: 0.3s;
    top: -7px;
    left: 59px !important;
    width: 16px;
    height: 15px;
    background-color: #d23a0c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #fff;
    animation-name: glowingBadge;
    animation-duration: 2s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
}
@keyframes glowingBadge{
    0%{
        box-shadow: 0 0 0px 0px #ffffff00;

    }
    25%{
        box-shadow: 0 0 6px 2px #892f16;
    }
    50%{
        box-shadow: 0 0 12px 5px #853b24;
    }

    75%{
        box-shadow: 0 0 6px 2px #812c15;
    }
    100%{
        box-shadow: 0 0 0px 0px #ffffff00;
    }
}

@media  (min-width:992px){
    .navbar-light .navbar-nav .nav-link{
        text-shadow: 0 0 4px black;
    }
    #header {
        overflow: hidden;
    }
    #navbarSupportedContent ul.navbar-nav li.nav-item a:hover{
        background-color: #13478e;
        color: #fff !important;
        transition: 0s;
    }
    .sub-nav-item li a:hover .nav-scroll-bg #navbarSupportedContent ul.navbar-nav li.nav-item {
        background-color: white;
        color: #000 !important;
    }
    .nav-item:hover .sub-nav-item{
        display:inline-block !important;
        opacity: 1;
        transition: 0.3s;
    }
    .sub-nav-item:hover .sub-nav-item li{
        color: #fff;
        background-color: #000;
    }
    .logged-in #navbarSupportedContent ul.navbar-nav li.nav-item a:hover{
        background-color: #9957d159  !important
    }
    .bxl-facebook,  .bxl-instagram,  .bxl-linkedin,  .bxl-facebook:hover{
        background-color: #1877f2;
        transition: .3s;
    }
     .bxl-instagram:hover{
        background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
        transition: .3s;
    }
     .bxl-linkedin:hover{
        background:#0a66c2;
        transition: .3s;
    }
     .bi-twitter-x:hover{
        background: #040404;
        transition: .3s;
    }
}
@media (max-width:1200px){
    .logged-in #navbarSupportedContent ul.navbar-nav li.nav-item a.nav-link{
        padding: 7px 5px;
    }
    #user-home-page .personel-info{
        font-size: 17px;
    }
}
@media (max-width:1115px){
    .logged-in h1 {
        font-size: 2vw !important;
    }
    .nav-icon img {
        width: 48px;
    }
    .logged-in #navbarSupportedContent ul.navbar-nav li.nav-item a.nav-link{
        font-size: 12.5px;
    }
}
@media (max-width:1050px){
    .logged-in h1,
    .logged-in .nav-scroll-bg h1{
        font-size: 2vw !important;
    }
    .nav-icon img{
        width: 54px !important;
    }
    .nav-scroll-bg .nav-icon img {
        width: 44px;
    }
    .logged-in #navbarSupportedContent ul.navbar-nav li.nav-item a.nav-link{
        padding: 6px 5px;
        font-size: 11.5px;
    }
}
@media (max-width:991.5px){
    .logged-in h1,
    .logged-in .nav-scroll-bg h1{
        font-size: 34px;
    }
    .nav-scroll-bg + section aside .mobile-aside-toggler{
        top: 14px !important;
    }
    .nav-scroll-bg + section aside .mobile-aside.show .mobile-aside-toggler{
        top: 41px !important;
    }
    nav button {
        text-align: center;
    }
    #navbarSupportedContent ul.navbar-nav li.nav-item a.nav-link{
        font-size: 16px !important; 
    }
    .logged-in.mobile-nav-bg h1{
        display: block;
    }
    .logged-in .header .nav-icon{
        margin-left: 47px;
    }
    .logged-in #header .navbar-toggler{
        height: 0;
        padding: 0;
    }
    .logged-in #header .navbar-toggler.icon .navbar-toggler-icon{
        opacity: 1;
        left: unset !important;
        right: 24px !important;
        top: 9px !important;
        bottom: unset !important;
        transition: 0.3s linear;
        
    }
    .logged-in #header .navbar-toggler.icon .navbar-toggler-text{
        opacity: 0;
        transition: 0.1s linear;
        padding: 0px;
    }
    .logged-in #header .navbar-toggler .navbar-toggler-icon{
        left: unset !important;
        right: 24px !important;
        bottom: unset !important;
        transition: 0.1s linear;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        top: 6px;
        height: 15px;
    }
    .logged-in #header.nav-scroll-bg .navbar-toggler .navbar-toggler-icon{
        top: 8px;
    }
    .logged-in #header .navbar-toggler .navbar-toggler-text{
        opacity: 1;
        left: unset !important;
        font-size: 16px;
        right: 0px !important;
        top: 14px !important;
        bottom: unset !important;
        transition: 0.3s linear;
        padding: 5px 17px 6.5px;
        border-radius: 6px;
        background-color: #727272;
        color: #ffffff;
    }
    .logged-in #header .navbar-toggler .navbar-toggler-icon span{
        background-color: #ffffff;
        box-shadow: none !important;
    }
    .logged-in #header .navbar-toggler .navbar-toggler-icon span:nth-child(1){
        height: 2.5px !important;
    }
    .logged-in #header .navbar-toggler .navbar-toggler-icon span:nth-child(2){
        height: 2.5px !important;
    }
    .logged-in #header .navbar-toggler .navbar-toggler-icon span:nth-child(3){
        height: 2.5px !important;
    }
    .logged-in #header.nav-scroll-bg .navbar-toggler .navbar-toggler-icon span:nth-child(2){
        height: 2px !important;
    }
    .logged-in button.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon{
        height: 28px !important;
    }
    .logged-in button.navbar-toggler[aria-expanded="true"] span span:nth-child(1){
        rotate: 45deg;
        transition: 0.3s;
        top: 13px;
        left: 4px;
        width: 20px !important;
        background: #80064e !important;
    }
    .logged-in button.navbar-toggler[aria-expanded="true"] span span:nth-child(3) {
        rotate: -45deg;
        top: -12px;
        left: 4px;
        width: 20px !important;
        transition: 0.3s;
        background: #80064e !important;
    }
    .logged-in #header #navbarSupportedContent ul.navbar-nav li.nav-item a.nav-link{
        font-weight: 500;
        color: #fff !important;
        text-align: center;
        padding-right: 27px;
        margin-top: 24px;
    }
}
@media (max-width:768.5px){

}
@media (max-width:576px){
    #header .navbar .container-fluid{
        flex-direction: column;
        align-items: start;
    }
    .navbar-nav .nav-link{
        font-size: 14px !important;
        padding: 2px 0;
    }
    .dropdown-menu {
        padding: 0px 6px !important;
    }
    .mobile-login {
        padding: 10px !important;
    }
    .mobile-login .h5{
        font-size: 16px !important;
    }
    nav input,
    nav button[type="submit"] {
        font-size: 14px;
    }
    nav button[type="submit"]{
        height: 29px;
    }
    #navbarSupportedContent ul.navbar-nav li.nav-item a.nav-link{
        padding: 3px 10px !important;
    }
    .navbar-light .navbar-toggler-icon span {
        height: 1.5px !important;
        margin: 2.2px 0px !important;
    }
    button.navbar-toggler[aria-expanded="true"] span span:nth-child(1){
        top: 6.75px !important;
    }
    button.navbar-toggler[aria-expanded="true"] span span:nth-child(3){
        top: -4.75px !important;
    }
    .navbar-toggler{
        padding: 0 !important;
    }
}   
@media (max-width:450px){
    header {
        padding: 10px 5px !important;
    }
    .nav-icon img{
        width: 48px !important;
    }
    h1{
        font-size: 13px !important;
    }
    .single-login-button{
        font-size: 10px !important;
    }
}
/*LOGGED IN NAVBAR END*/