@import "fonts.css";
@import "helper.css";
@import "icons.css";
@import "bulk-style.css";
@import "reset-bootstrap.css";





body {
    font-family: YekanBakh, sans-serif !important;
    color: #111;
    font-size: 15px;
    direction: rtl;
    text-align: right;
}

.bg-image-dark {
    background-color: #242925;
    background-image: url("../images/Rectangle46.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: right;
    background-attachment: fixed;
}

.bg-main {
    /*background-image: url("../images/background.jpg");*/
    background-size: contain;
    background-position: center;
    background-attachment: fixed;
    background-repeat: no-repeat;
    /*overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;*/
}

.backdrop {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    background-color: black;
    opacity: .6;
    z-index: 0;
}

.content {
    z-index: 99999;
    position: relative;
}

* {
    margin: 0;
    padding: 0;
    outline: none !important;
}

:root {
    --colorMain: #B8103B;
    --colorMainDark: #020E1A;
    --colorInfo: #4E95FF;
    --colorGreen: #239F40;
    --animate-delay: 0.5s;
}

::-moz-selection {
    color: #fff;
    background: var(--colorMain);
}

::selection {
    color: #fff;
    background: var(--colorMain);
}

.custom-container {
    width: 1500px;
}

a {
    text-decoration: none !important;
}

.bg-yellow {
    background-color: var(--colorMain);
}
.text-yellow {
   color: var(--colorMain);
}

.right-0 {
    right: 0 !important;
}

.btn-success {
    background-color: var(--colorGreen);
}

.text-info {
    color: var(--colorInfo) !important;
}

.special-input {
    background-color: transparent;
    border: 1px solid white !important;
    transition: .2s ease-in;
}

.special-input::placeholder {
    background-color: transparent;
    border: unset;
    color: white;
}

.special-input:focus {
    background-color: transparent;
    border: 2px solid white !important;
}

.toggle-password {
    background-color: transparent;
    border: 1px solid white !important;
    cursor: pointer;
    border-top-left-radius: unset !important;
    border-bottom-left-radius: unset !important;
}

.btn-blue {
    background-color: #2C2CE4;
    color: white;
}

.btn-danger {
    background-color: #FF4545 !important;
}

.float-right {
    float: right;
}

.contactus-section {
    height: 64vh;
}

.section404 {
    height: 67vh;
}

#password {
    border-top-right-radius: unset !important;
    border-bottom-right-radius: unset !important;
}
.cart-container {
    height: 67vh;
}


.active-btn-left {
    border-bottom: 7px solid var(--colorMain);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 0;
}

.active-btn-right {
    border-bottom: 7px solid var(--colorMain);
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 0;
}

.background-left {
    background-position: left !important;
    background-image: url("../images/Rectangle47.png") !important;
}

.card-item {
    border: none;
}

.card-item img {
    margin: 0 auto;
}

.text-justify {
    text-align: justify;
}

input[type=radio] {
    accent-color: var(--colorGreen);
}

.text-success {
    color: var(--colorGreen) !important;
}
.cart-empty {
    height: 63vh;
}


th, td {
    padding: 10px !important;
}

tr {
    vertical-align: baseline;
}

.card {
    min-height: 100%;
}

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
}

#loading {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: block;
    justify-content: center;
    align-items: center;
    z-index: 999999999;
    overflow: hidden;
}

.bg-progressbar {
    background-image: linear-gradient(to right, #FAFF0F, #FF0000, #FF4545, #FF4A76, #FF60BF, #D170FF, #4E95FF, #7CFFD8, #DCFFC1);
    animation: colorAnimation .5s infinite;
    width: 100%;
}

.theme-switcher {
    background-color: #514f4f;
}

.theme-switcher i {
    cursor: pointer;
}

.theme-switcher .night-sw {
    background-color: #000;
    padding: 3px;
    border-radius: 7px;
}

@keyframes colorAnimation {
    0% {
        background-image: linear-gradient(to right, #FAFF0F, #FF0000, #FF4545, #FF4A76, #FF60BF, #D170FF, #4E95FF, #7CFFD8, #DCFFC1);
    }
    10% {
        background-image: linear-gradient(to right, #FF0000, #FF4545, #FF4A76, #FF60BF, #D170FF, #4E95FF, #7CFFD8, #DCFFC1, #FAFF0F);
    }
    20% {
        background-image: linear-gradient(to right, #FF4545, #FF4A76, #FF60BF, #D170FF, #4E95FF, #7CFFD8, #DCFFC1, #FAFF0F, #FF0000);
    }
    30% {
        background-image: linear-gradient(to right, #FF4A76, #FF60BF, #D170FF, #4E95FF, #7CFFD8, #DCFFC1, #FAFF0F, #FF0000, #FF4545);
    }
    40% {
        background-image: linear-gradient(to right, #FF60BF, #D170FF, #4E95FF, #7CFFD8, #DCFFC1, #FAFF0F, #FF0000, #FF4545, #FF4A76);
    }
    50% {
        background-image: linear-gradient(to right, #D170FF, #4E95FF, #7CFFD8, #DCFFC1, #FAFF0F, #FF0000, #FF4545, #FF4A76, #FF60BF);
    }
    60% {
        background-image: linear-gradient(to right, #4E95FF, #7CFFD8, #DCFFC1, #FAFF0F, #FF0000, #FF4545, #FF4A76, #FF60BF, #D170FF);
    }
    70% {
        background-image: linear-gradient(to right, #7CFFD8, #DCFFC1, #FAFF0F, #FF0000, #FF4545, #FF4A76, #FF60BF, #D170FF, #4E95FF);
    }
    80% {
        background-image: linear-gradient(to right, #DCFFC1, #FAFF0F, #FF0000, #FF4545, #FF4A76, #FF60BF, #D170FF, #4E95FF, #7CFFD8);
    }
    100% {
        background-image: linear-gradient(to right, #FAFF0F, #FF0000, #FF4545, #FF4A76, #FF60BF, #D170FF, #4E95FF, #7CFFD8, #DCFFC1);
    }
}

.lang-switcher {
    cursor: pointer;
    background-color: transparent;
}
.mobile-menu { display: none;}
.lang-switcher:focus {
    background-color: transparent;
}
.lang-switcher option {
    color: black;
}

.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    background-color: var(--colorMainDark);
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.bg-dark {
    background-color: var(--colorMainDark) !important;
}

.main-menu-toggle {
    color: var(--colorMain);
    width: 35px;
    height: 35px;
    justify-content: center;
    align-items: center;
    font-size: 28px;
    border: 2px solid;
    cursor: pointer;
    border-radius: 4px;
    display: none
}

p { color: whitesmoke;}

.blog-h1 {
    bottom: 110px;
    right: 32px;
}

.blog-date {
    bottom: 110px;
    right: 32px;
}

.category p {
    color: black;
}

.menu-item-toggle,.mobile-menu-heading {
    z-index: 1;
    align-items: center;
    position: absolute;
    top: 0
}
.menu-item-toggle {
    display: none;
    justify-content: center;
    left: 0;
    cursor: pointer;
    background: #eee;
    width: 50px;
    height: 50px
}

.mobile-menu-heading {
    padding: 0 15px;
    height: 56px;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: space-between
}

.mobile-menu-heading-back {
    display: flex;
    width: 56px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0,0,0,.05);
    color: #111;
    cursor: pointer
}

.mobile-menu-heading-name {
    font-weight: 700;
    font-size: 14px;
    color: var(--colorMain)
}

.anchor-down,.btn-label-orange .iconly {
    font-size: 24px
}

.menu-backdrop {
    display: none;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: fixed;
    z-index: 999999;
    background: var(--colorMain);
    opacity: .6
}

.gift-card {
    cursor: pointer;
}

.gift-card:hover .front-side {
    cursor: unset;
    background-color: white;
    transition: .4s ease-in-out;
    opacity: .2;
}

.gift-card:hover .back-side {
    display: block !important;
    position: absolute;
    top: 0;
}

.card-blur {
    border: 1px solid #ffffff66;
    background: linear-gradient( to right bottom, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0.4) );
}

::-webkit-scrollbar {
    display: none;
}

.custom-header {
    max-width: 100%;
    padding-right: 4%;
    padding-left: 4%;
}

.text-right {
    text-align: right;
}

.rounded-5 {
    border-radius: 35px !important;
}
.menu-items li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    position: relative;
    padding: 7px 16px;
    transition: 350ms;
    z-index: 1;
    border-radius: 50px;
}
.cart-counter {
    background-color: transparent;
    border: none;
}
.menu-items {
    margin: 0;
    padding: 0;
    position: relative;
    z-index: 51;
    display: none;
}

.blog-item-lg {
    width: 389px;
    border-radius: 39px !important;
    height: 76vh;
}

.blog-item-sm {
    height: 38vh;
    border-radius: 39px !important;
    width: 389px;
}

.blog-item-sm img , .blog-item-lg img{
    object-fit: cover;
}

.w-20 {
    width: 20% !important;
}

.discount-box input {
    border-top-left-radius: unset !important;
    border-bottom-left-radius: unset !important;
    border-left: unset;
}

.discount-box .input-group-text {
    border-top-right-radius: unset !important;
    border-bottom-right-radius: unset !important;
    background-color: white;
}

.nav-pills .nav-link.active > div > span {
    color: white !important;
}

.navbar-toggler {
    color: var(--colorMain);
    border-color: var(--colorMain);
    background: var(--colorMain);
}

footer {
    justify-content: space-between;
}

.dash {
    content: '';
    width: 0.5px;
    height: 100%;
    background-color: #E7E7E7;
    display: inline-block;
}

header {
    justify-content: center;
}



/* Media Query */
@media (max-width: 1500px) {

    .custom-container {
        width: 1200px !important;
    }

}

@media (max-width: 1200px) {
    .blog-h1 {
        bottom: 49px;
        right: 13px;
        font-size: 18px;
    }

    .contactus-section, .section404, .cart-container, .cart-empty {
        height: auto !important;
    }
    .btn-profile { display: none; }
    .blog-date {
        bottom: 53px;
        right: 13px;
        font-size: 10px;
    }
    .custom-container {
        width: calc(100% - 60px) !important;
    }

    .check-box-image {
        height: auto;
    }

    .check-box-image img {
        width: 100%;
        height: auto;
    }

    .custom-header {
        z-index: 999999999;
    }

    nav {
        position: absolute !important;
        top: 9px;
        right: 0;
    }

    .navbar-toggler-icon {
        width: 1.2rem;
        height: 1.8rem;
    }

    .logo-box {
        margin-right: 20px;
    }

    #navbarColor01 {
        background-color: var(--colorMain);
        margin-top: 5px;
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 12px;
        z-index: 999999999999999999999;
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
    }

    .nav-link {
        font-weight: 700;
    }

    .mx-sm-2 {
        margin-left: 0.5rem!important;
        margin-right: 0.5rem!important;
    }

    .auth-btn {
        font-size: 12px !important;
        margin-right: 5px;
    }

    body {
        font-size: 14px !important;
    }
    header { margin-bottom: unset !important;}
    .mb-4 { margin-bottom: unset !important; }
    .video-wrapper { display: none;}
    .bg-main { background-size: cover !important; }

    .font-25 {
        font-size: 23px !important;
    }
    .category img {
        width: 55px !important;
    }
    .header-logo {
        width: 75px !important;
    }
    .theme-switcher i{
        font-size: 18px !important;
    }

    .px-3 {
        padding-left: 0.5rem!important;
        padding-right: 0.5rem!important;
    }
    .py-2 {
        padding-top: 0.25rem!important;
        padding-bottom: 0.25rem!important;
    }
}

.header-logo {
    width: auto;
}

.main-card {
    cursor: pointer;
}

.bg-dark {
    background-color: #242925 !important;
    color: #fff;
}

@media (max-width: 992px) {
    .video-wrapper {
        display: none;
    }

    .blog-item-lg {
        width: 284px;
    }

    .auth-btn span{
        display: none;
    }

    .menu-items li {
        display: block;
        border-bottom: 1px solid #eee;
        height: 50px;
    }

    .menu-items li a {
        color: #111;
        padding: 0;
        line-height: 50px;
    }

    .menu-items.open {
        opacity: 1;
        visibility: visible;
        right: 0;
        z-index: 9999999;
        display: block;
    }
    .bg-image-dark, .background-left {
        background-image: unset !important;
    }

    .avatar {
        width: 55px !important;
    }

    .mt-sm-2 { margin-top: 6px; }

    .menu-items {
        color: #111;
        top: 0;
        right: -290px;
        padding: 10px;
        visibility: hidden;
        opacity: 1;
        transition: 350ms;
    }
    .menu-items, .menu-items li ul {
        position: fixed;
        width: 290px;
        background: #fff;
        height: 100%;
        overflow-x: auto;
    }
    header {
        justify-content: space-between;
    }

    .font-16 {
        font-size: 13px !important;
    }
    .px-5 {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
    }
    /*.content{ height: 74vh;}*/

    .main-menu-toggle {
        display: inline-flex;
    }

    .d-grid {
        overflow-x: scroll;
    }

    .bg-main {
        background-size: cover !important;
    }

    .header-logo {
        width: 50px !important;
    }

    .lang-switcher {display: none !important;}

    .custom-container {
        width: calc(100% - 60px) !important;
    }

    .site-header {
        padding: 0 20px;
        height: 80px;
    }


    .footer {
        padding-left: 1rem!important;
        padding-right: 1rem!important;
    }

    footer > div > span , footer > div > a {
        font-size: 14px;
    }

    footer {
        justify-content: center !important;
    }

    footer ul {
        margin-top: 5px;
    }

    .profile-btn , .icon-shopping-bag {
        font-size: 1.5rem !important;
    }

    .profile-btn > span { display: none;}


    .menu-toggle, .mobile-profile-button {
        display: block;
    }

    .profile-button, .call-button, .header-separator {
        display: none;
    }

    .main-menu {
        position: fixed;
        right: 0;
        top: 100%;
        width: 100%;
        height: 100%;
        border-radius: 0;
        margin: 0;
        flex-direction: column;
        justify-content: start;
        padding: 15px;
        visibility: hidden;
        opacity: 0;
        transition: 300ms;
    }

    .main-menu.open {
        top: 0;
        visibility: visible;
        opacity: 1;
    }

    .main-menu li {
        display: block;
        width: 100%;
    }

    .main-menu li a {
        display: block;
        text-align: right;
        padding: 14px 0;
        border-bottom: 1px solid #ffffff30;
        border-radius: 0;
    }

    .main-menu li:last-of-type a {
        border-bottom: none;
    }

    .main-menu li a:before {
        font-family: 'icomoon' !important;
        content: "\e92f";
        float: left;
        margin-left: 15px;
        color: rgba(255, 255, 255, 0.51);
    }

    .main-menu-head {
        display: flex;
        padding-bottom: 15px;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        border-bottom: 1px solid #ffffff2e;
        margin-bottom: 15px;
    }

    .main-menu-head .call-button,
    .main-menu-head .profile-button {
        display: flex;
        border-radius: 5px;
        background: #fff !important;
        flex-shrink: 0;
    }

    .main-menu-head .profile-button {
        margin-right: 8px;
    }

    .fancy-phone-number {
        font-size: 14px;
    }

    .main-menu-head .header-box .iconly-el {
        width: 24px;
        height: 24px;
        line-height: 24px;
    }

    .main-menu-head .header-box-title {
        font-size: 12px;
        height: 34px;
    }

    .main-menu-head .header-box {
        padding: 8px;
    }

    .main-menu nav {
        width: 100%;
    }

    .main-menu ul {
        width: 100%;
        margin-bottom: 20px;
    }

    .main-menu-footer {
        display: block;
        text-align: center;
        padding: 15px 0;
        margin-top: auto;
        color: #fff;
        font-size: 13px;
        font-weight: 200;
    }

    .mobile-search-button {
        background: #ffffff38;
        border-radius: 5px;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        margin-bottom: 15px;
        padding: 15px;
    }
}
#cart-horz{
    grid-auto-flow: column;
}

@media (max-width: 768px) {
    .header-logo {
        width: 35px !important;
        margin-right: 10px !important;
    }

    .form-title .title {
        font-size: 25px
    }

    .custom-container {
        width: calc(100% - 40px) !important;
    }

    .search-box-container {
        width: 100%;
    }
    #cart-horz{
        grid-auto-flow: unset;
    }

}

@media (max-width: 576px) {

    .copyright {
        border-radius: 10px;
    }

    .custom-container {
        width: calc(100% - 30px) !important;
    }

    .search-button {
        margin-right: auto;
    }

    .search-button {
        display: none;
    }

    .phone-number {
        font-size: 25px;
    }

    .doctors-carousel {
        padding: 0 46px;
    }
    #cart-horz{
        grid-auto-flow: unset;
    }
}