.bg-imgs {
    background-image: url(https://webramin.storage.iran.liara.space/img/wooden-background.jpg);
    z-index: -1;
    background-size: cover;
    background-position: center center;
    height: 100vh;
}

main {
    margin-top: 4rem;
}

.rtl {
    direction: rtl;
}

.ltr {
    direction: ltr;
}

#mainNav {
    transition: all .5s ;
    box-shadow: 0px 0px 0px 0px var(--web-gray-900);
}

.nav-blur {
    backdrop-filter: blur(6px);
    border-bottom: solid 1px var(--bs-bg-body);
    background: rgba(255,255,255,0.5);
    transition: all .5s ;
    box-shadow: 0px 1px 5px 0px var(--web-gray-900) !important;
}

a.nav-link.active {
    color: #43b8ff !important;
}

.dropdown-menu.bg-transparent {
    backdrop-filter: blur(3px);
    background: #66666690;
}

.text-dark-pt {
    color: var(--web-body-bg);
}

.text-light-pt {
    color: var(--web-body-color);
}

#sips {
    height: 60px;
}

#sips svg {
    display: block;
    position: relative;
    left: 50%;
    bottom: 50%;
    transform: translateX(-50%);
}

#sips .divider-fill {
    fill: var(--web-disabled-color);
    transform-origin: bottom;
    transform: rotateY(360deg);
}

.toggle-bos {
    text-shadow: 0px 0px 10px;
    display: inline;
    cursor: pointer;
    transition-duration: .5s;
    background: linear-gradient(45deg, #9896ff, #818181);
    padding: 10px 15px;
}

.toggle-bos.active {
    background: linear-gradient(45deg, #42ff5b, #22ad34);
    padding: 100px;
}

.text-shadow-sm {
    --color: #161616;
    text-shadow: 0 0 4px var(--color), 0 0 2px var(--color), 0 0 1px var(--color);
}

.text-shadow-md, .text-shadow {
    --color: #161616;
    text-shadow: 0 0 4px var(--color)
}

.text-shadow-lg {
    --color: #161616;
    text-shadow: 0 0 8px var(--color);
}

.text-shadow-xl {
    --color: #161616;
    text-shadow: 0 0 16px var(--color);
}

.nav-link i.bi {
    display: inline-block;
}

.text {
    color: var(--web-navbar-brand-color);
}

html[data-bs-theme=light] .d-light-none {
    display: none !important;
}

html[data-bs-theme=dark] .d-dark-none {
    display: none !important;
}

#mainNav .nav-link {
    text-align: center;
}

.nav-link .bi {
    padding: 0 5px;
}

#btnTop {
    display: block;
    position: fixed;
    bottom: -150px;
    right: 0;
    margin: 0 2rem 2rem;
    z-index: 9999;
    opacity: 0.5;
    background: var(--web-body-color);
    padding: 1em;
    border-radius: 6px;
    color: var(--web-body-bg);
    backdrop-filter: blur(10px);
    transition: all 1s;
    box-shadow: 0 0 15px var(--web-body-color),inset 0 0 5px var(--web-gray-200-fg);
}

#btnTop:hover {
    opacity: 0.8;
}

#btnTop.active {
    bottom: 0;
    transition: all 0.4s;
}

.palet span {
    padding: 5px;
    margin: 10px;
    border-radius: 6px;
}

html[data-bs-theme=dark] .nav-link {
    transition: 0.5s;
}

html[data-bs-theme=dark] .nav-link:hover {
    text-shadow: 0 0 1px #000, 0 0 0px #fff, 0px 0px 0px #fff;
    transition: 0.5s;
}

html[data-bs-theme=dark] .nav-link.active:hover {
    text-shadow: none;
}

.add-scroll {
    right: 1000px !important;
    opacity: 0;
    transition: all .4s;
}

.add-scroll.active {
    opacity: 1;
    right: 0 !important;
    transition: all .4s;
}

.Preloader {
    position: fixed;
    /* display: flex; */
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(4px);
    top: 0;
    z-index: 9999;
    transition: all 1s;
    opacity: 1;
    display: none;
}

.Preloader span {
    border-radius: 26px;
    display: block;
    width: 10px;
    height: 20px;
    background-color: transparent;
    margin: 0 5px;
    animation: load 1.5s infinite ease;
    transition-duration: .1s;
}

.Preloader span:nth-child(2) {
    animation-delay: 0.2s;
}

.Preloader span:nth-child(3) {
    animation-delay: 0.4s;
}

.Preloader.hidden {
    display: none;
    opacity: 0;
}

@keyframes load {
    0%, 100% {
        height: 50px;
        background: #FFB700;
        opacity: .5;
    }

    50% {
        height: 100px;
        background: #FFB700;
        box-shadow: 0 0 10px #FFA300;
        opacity: 1;
    }
}

pre {
    box-shadow: 0 0 10px var(--web-gray-900);
}

.nt {
    color: var(--web-azure);
}

.ns {
    color: var(--web-pink);
}

.s {
    color: var(--web-gray-300);
}

@keyframes move-forever1 {
    0% {
        transform: translate(85px)
    }

    to {
        transform: translate(-90px)
    }
}

@keyframes move-forever2 {
    0% {
        transform: translate(-90px)
    }

    to {
        transform: translate(85px)
    }
}

@keyframes move-forever3 {
    0% {
        transform: translate(-90px)
    }

    to {
        transform: translate(85px)
    }
}

.section-divider {
    position: absolute;
    bottom: calc(100% - 1px);
    pointer-events: none;
    height: 6rem;
    fill: var(--web-disabled-bg);
    width: 100%;
    z-index: 0
}

.section-divider path {
    fill: var(--web-bg-body)
}

.section-divider .wave-1 {
    animation: move-forever1 30s linear infinite;
    animation-delay: -2s
}

.section-divider .wave-2 {
    animation: move-forever2 24s linear infinite;
    opacity: .5;
    animation-delay: -2s
}

.section-divider .wave-3 {
    animation: move-forever3 18s linear infinite;
    opacity: .3;
    animation-delay: -2s
}

[data-bs-theme="light"] .theme-switcher-light{
    color: var(--web-btn-active-color);
    background-color: var(--web-btn-active-bg);
    box-shadow: var(--web-btn-active-shadow);
}

[data-bs-theme="dark"] .theme-switcher-dark{
    color: var(--web-btn-active-color);
    background-color: var(--web-btn-active-bg);
    box-shadow: var(--web-btn-active-shadow);
}

[data-bs-theme="auto"] .theme-switcher-auto{
    color: var(--web-btn-active-color);
    background-color: var(--web-btn-active-bg);
    box-shadow: var(--web-btn-active-shadow);
}

.logo.logo-gray {
    background-image: url(https://webramin.storage.iran.liara.space/logo.svg);
    height: 32px;
    width: 120px;
    background-size: cover;
    filter: brightness(2);
    transition-duration: .4s;
}

.logo-webramin {
    background-image: url(https://webramin.storage.iran.liara.space/webramin.svg);
    width: 120px;
    height: 32px;
    background-size: cover;
    filter: contrast(0.5);
}

[data-bs-theme="dark"] .logo-webramin ,
[data-bs-theme="dark"] .logo.logo-gray {
    filter: brightness(6);
}