body{
    background: url(../images/bg_banner.webp) center / cover no-repeat;
    background-attachment: fixed;
    font-family: 'Crossten';
}


header {
    padding: 36px 3vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
header nav{
    display: flex;
    align-items: center;
    gap: 50px;
}
header  .logo{
    padding-right: 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
header  .logo img{
    height: 40px;
}
header  .links{
    display: flex;
    align-items: center;
    gap: 50px;
}
header  .links a{
    font-size: 20px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
    transition: all .3s;
}
header  .links a:hover{
    color: rgb(255, 255, 255);
}
header  .batns{
    display: flex;
    align-items: center;
    gap: 16px;
}

.batn{
    color: white;
    font-size: 18px;
    background-color: #A343FF;
    padding: 18px 30px;
    border-radius: 100px;
    box-shadow: 0 0px 1px 5px rgb(139 139 139 / 5%), 0px 3px 0px 3px rgb(213 213 213 / 25%) inset, 0px -3px 1px 3px #2b2b2b4a inset;
    transition: all .3s;
    font-weight: 500;
}
.batn:hover{
     background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0px 1px 5px rgb(139 139 139 / 5%);
}
.batn.gray{
    background-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0px 1px 5px rgb(139 139 139 / 5%);
}
.batn.gray:hover{
    box-shadow: 0 0px 1px 5px rgb(139 139 139 / 5%), 0px 3px 0px 3px rgb(213 213 213 / 25%) inset, 0px -3px 1px 3px #2b2b2b4a inset;
    background-color: #A343FF;
}

.offcanvas ul{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
}
.offcanvas ul a{
    color: #fff;
    font-size: 20px;
}
.offcanvas .btn-close {
    filter:invert();
}
 
.offcanvas{
      background: url(../images/bg_banner.webp) left / cover no-repeat;
    background-attachment: fixed;
}
.offcanvas ul .batn{
    font-size: 16px;
}
@media (max-width:1680px){
    header .logo img {
    height: 33px;
}
header .links a {
    font-size: 18px;
}
header nav {
    gap: 40px;
}
header .links {
    gap: 40px;
}
.batn {
    font-size: 16px;
    padding: 15px 24px;
}
 header {
    padding: 26px 3vw;
}
}



@media (max-width:1440px){
        header .logo img {
        height: 28px;
    }
        header .links a {
        font-size: 16px;
    }
    header {
    padding: 18px 3vw;
}
    .batn {
        font-size: 14px;
        padding: 13px 22px;
    }
}


@media (max-width:1280px){
        header .logo img {
        height: 23px;
    }
    header .logo {
    padding-right: 20px;
}
    header nav {
        gap: 30px;
    }
        header .links {
        gap: 30px;
    }
        header .links a {
        font-size: 15px;
    }
    
}
@media (max-width:450px){
    header .links{
        display: none;
    }
    header .batns .batn.gray{
        display: block;
    }
    header .batns .batn{
        display: none;
    }
    header .batns .bar{
        display: block !important;
        color: white;
        font-size: 20px;
    }
}