/*==================================
    Dark Theme  CSS
====================================*/
.switch-theme-mode {
    position: fixed;
    left: 32px;
    z-index: 999;
    bottom: 80px;
}

// /*================================================
// Default CSS
// =================================================*/
:root {
    --mainColor: #C59D5F;
    --optionalColor: #151B20;
    --backgroundColor: #0E1317;
    --whiteColor: #FFFFFF;
    --blackColor: #000000;
    --transition: all ease 0.7s;  
}

  
// /*=================================================
// The switch - the box around the slider 
// ====================================================*/
.switch {
    position: relative;
    display: inline-block;
    width: 35px;
    height: 35px;
}
  
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
}
  
.slider.round {
    border-radius: 50%;
}
  
.slider.round:before {
    border-radius: 50%;
}
  
.slider:before {
    position: absolute;
    content: "";
    height: 35px;
    width: 35px;
    left: 0px;
    bottom: 4px;
    top: 0;
    bottom: 0;
    margin: auto 0;
    -webkit-transition: 0.4s;
    transition: 0.4s;
    box-shadow: 0 0px 15px #2020203d;
    background: white url('../../assets/images/night.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-color: #041c22;
    background-size: 17px;
}
  
input:checked + .slider {
    background-color: transparent;
}
  
input:focus + .slider {
    box-shadow: 0 0 1px  transparent;
}
  
input:checked + .slider:before {
    transform: translateX(0);
    background: white url('../../assets/images/sunny.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
}

/*===========================================
Color CSS For Elements 
=============================================*/
.theme-dark {
    body {
        background-color: var(--optionalColor);
        color: #ffffff !important;
    }
    p {
        color: #ffffff !important;
        
        a {
            color: #ffffff !important;

            &:hover {
                color: var(--mainColor) !important;
            }
        }
    }
    .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
        color: var(--whiteColor) !important;

        a {
            color: var(--whiteColor) !important;

            &:hover {
                color: var(--mainColor) !important;
            }
        }
    }
    ul {
        li {
            color: var(--whiteColor) !important;
            p {
                color: var(--whiteColor) !important;
            }
            a {
                color: var(--whiteColor) !important;
            }
            span {
                color: var(--whiteColor) !important;
            }
        }
    }
    span {
        color: var(--whiteColor) !important;
    }

    .main-nav {
        background-color: var(--backgroundColor);
        &.main-two-nav {
            background-color: var(--backgroundColor);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .logo-light {
            display: block !important;
        }
        .logo-dark {
            display: none !important;
        } 
        nav {
            .navbar-nav {
                .nav-item {
                    .nav-link {
                        i {
                            color: var(--whiteColor);
                        }
                        &:hover {
                            color: var(--mainColor) !important;
                            img {
                                color: var(--mainColor) !important;
                            }
                        }
                        &.active {
                            color: var(--mainColor) !important;
                            img {
                                color: var(--mainColor) !important;
                            }
                        }
                    }
                    .dropdown-menu {
                        background-color: var(--blackColor);
                        .nav-item {
                            .nav-link {
                                color: var(--whiteColor) !important;
                                &:hover {
                                    color: var(--mainColor) !important;
                                }
                                &.active {
                                    color: var(--mainColor) !important;
                                }
                            }
                        }
                    }
                }
            }
        }
        .others-option-vg {
            .option-item { 
                button {
                    i {
                        color: var(--whiteColor);
                    }
                }
                .search-form {
                    .search-input {
                        background: var(--blackColor);
                        color: var(--whiteColor);

                        &::placeholder {
                            color: var(--whiteColor);
                        }
                    }
                }
                .search-btn {
                    color: var(--whiteColor);
                }
                .close-btn {
                    color: var(--whiteColor);
                }
            } 
        }
    }
    .banner-two-content {
        span {
            &::before {
                border-bottom-color: var(--optionalColor);
            }
            &::after {
                border-bottom-color: var(--optionalColor);
            }
        }
    }
    .single-banner-two-image {
        .banner-two-image {
            display: none;
        }
        .banner-two-dark {
            visibility: visible;
            display: block !important;
        }
    } 
    .submenu-area {
        &.submenu-two-area {
            background: var(--optionalColor);
            .submenu-right-content {
                ul {
                    li {
                        i {
                            color: var(--whiteColor);
                        }
                    }
                }
            }
        }
    }
    .features-area {
        background-color: var(--backgroundColor);
    }
    .single-features-card {
        background-color: var(--optionalColor);
    }
    .single-about-two-content {
        .about-natural {
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            &.about-natural-two {
                border-bottom: none;
            }
        }
    }
    .special-menu-tabs {
        .nav {
            &.nav-tabs {
                .nav-item {
                    .nav-link {
                        background: var(--backgroundColor);
                        color: var(--whiteColor);
                        border: none;
                        &:hover {
                            border: none;
                            background-color: var(--mainColor);
                            color: var(--whiteColor);
                        }
                        &.active {
                            background-color: var(--mainColor);
                        }
                    }
                }
            }
        }
    }
    .single-special-menu-content {
        .special-card {
            background-color: var(--backgroundColor);
            box-shadow: none;
        }
    }
    .visit-two-area {
        background-color: var(--backgroundColor);
    }
    .visit-two-form-content {
        background-color: var(--optionalColor);
        box-shadow: none;
        .form-group {
            .form-control {
                background-color: var(--backgroundColor);
                color: var(--whiteColor);

                &::placeholder {
                    color: var(--whiteColor);
                }
            }
            .form-select {
                background-color: var(--backgroundColor);
                color: var(--whiteColor);
            }
        }
    }
    .single-top-grade-card {
        .top-grade-content {
            background-color: var(--backgroundColor);
        }
        &:hover {
            .top-grade-content {
                background-color: var(--mainColor);
            }
        }
    }
    .single-team-restaurant-card {
        .team-restaurant-img {
            .team-restaurant-list-icon {
                li {
                    a {
                        background-color: var(--optionalColor);
                        color: var(--whiteColor);

                        &:hover {
                            background-color: var(--mainColor);
                            color: var(--whiteColor);
                        }
                    }
                }
            }
        }
        .restaurant-content {
            transition: var(--transition);
            h3 {
                transition: var(--transition);
            }
            p {
                transition: var(--transition);
            }
        }
        &:hover {
            .restaurant-content {
                background-color: var(--mainColor);
                h3 {
                    color: var(--whiteColor);
                }
                p {
                    color: var(--whiteColor);
                }
            }
        }
    }
    .location-map {
        .location-text {
            p {
                background-color: var(--backgroundColor);
                &::after {
                    border: solid transparent 7px;
                    border-bottom-color: var(--backgroundColor);
                }
            }
        }
    }
    .testimonials-two-area {
        background-color: var(--backgroundColor);
    }
    .testimonials-two-card {
        background-color: var(--optionalColor);
    }
    .blog-card-two-content {
        background-color: var(--backgroundColor);
        box-shadow: none;
    }
    .page-banner-content {
        h1 {
            color: var(--optionalColor) !important;
        }
        ul {
            li {
                color: var(--optionalColor) !important;
                a {
                    color: var(--optionalColor) !important;
                    &:hover {
                        color: var(--mainColor) !important;
                    }
                }
            }
        }
    }
    .about-area {
        &.about-page {
            .single-about-content {
                .speciallst-card {
                    background-color: var(--backgroundColor);
                }
            }
        }
    }
    .services-area {
        &.services-pages-area {
            background-color: var(--backgroundColor);
        }
    }
    .single-discover-card {
        &.services-card-page {
            background-color: var(--optionalColor);
        }
    }
    .single-team-restaurant-card {
        &.team-restaurant-card-pages {
            .restaurant-content {
                background-color: var(--optionalColor);
            }
        } 
    }
    .faqs-buy-one-area {
        background-color: var(--optionalColor);
    }
    .pagination-area {
        .page-numbers {
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--whiteColor);
            i {
                color: var(--whiteColor);
            }
        }
    }
    .testimonials-card {
        &.testimonials-card-page {
            box-shadow: none;
            background-color: var(--backgroundColor);
        }
    }
    .faqs-area {
        background-color: var(--backgroundColor);
    }
    .single-faq-item {
        .accordion-item {
            background-color: transparent;
            .accordion-header {
                .accordion-button {
                    background-color: var(--optionalColor);
                    color: var(--whiteColor);
                    &:not(.collapsed) {
                        background-color: var(--mainColor);
                        color: var(--whiteColor);
                        &::after {
                            color: var(--whiteColor);
                        }
                    }
                }
            }
        }
    }
    .faqs-img {
        .faqs-img-two {
            background-color: var(--backgroundColor);
        }
    }
    .shop-single-tab {
        .tab {
            &.top-selling-tab {
                .tabs {
                    border-bottom: 1px solid rgba(245, 245, 245, 0.1);
                }
            }
        }
    }
    .menu-details {
        .single-menu-details-contant {
            .quantity-list {
                li {
                    .pass-quantity {
                        .input-counter {
                            input {
                                color: var(--whiteColor);
                            }
                        }
                    }
                }
            }
        }
    }
    .additional-information {
        border: 1px solid rgba(245, 245, 245, 0.2);
        ul {
            li {
                border: 1px solid rgba(245, 245, 245, 0.2);
                &::after {
                    background-color: rgba(245, 245, 245, 0.2);
                }
                &:first-child {
                    border-top: 1px solid rgba(245, 245, 245, 0.2);
                }
            }
        }
    }
    .blog-details-from {
        .details-from {
            .form-control {
                background-color: var(--backgroundColor);
                border: 1px solid var(--backgroundColor);
                color: var(--whiteColor);

                &::placeholder {
                    color: var(--whiteColor);
                }
            }
        }
        .form-check {
            .form-check-input {
                background-color: transparent;
                border: 1px solid rgba(255, 255, 255, 0.1);
            }
            .form-check-label {
                color: var(--whiteColor);
            }
        }
    }
    .popular-menu-details {
        .single-popular-menu-details {
            background-color: var(--optionalColor);
        }
    }
    .widget {
        background-color: var(--backgroundColor);
    }
    .category-content {
        .details-list {
            li {
                a {
                    background-color: var(--backgroundColor);
                }
            }
        }
    }
    .widget_search form {
        .search-field {
            background-color: var(--optionalColor);
            color: var(--whiteColor);
            border: 1px solid var(--blackColor);

            &::placeholder {
                color: var(--whiteColor);
            }
        }
    }
    .my-account-area  {
        background-color: var(--backgroundColor);
    }
    .my-account-form {
        background-color: var(--optionalColor);
        box-shadow: none;
        .form-group {
            .form-label {
                color: var(--whiteColor);
            }
            .form-control {
                background-color: var(--backgroundColor);
                color: var(--whiteColor);

                &::placeholder {
                    color: var(--whiteColor);
                }
            }
        }
        .form-check {
            .form-check-input {
                background-color: transparent;
                border: 1px solid rgba(255, 255, 255, 0.2);
            }
            .form-check-label {
                color: var(--whiteColor);
                a {
                    color: var(--whiteColor);
                }
            }
        }
        .my-account-text {
            a {
                color: var(--whiteColor);
            }
        }
    }
    .privacy-area  {
        background-color: var(--backgroundColor);
    }
    .coming-soon-contant {
        background-color: var(--optionalColor);
        box-shadow: none;
    }
    .coming-soon-img {
        display: block !important;
        margin-left: auto;
        margin-right: auto;
    }
    .coming-img {
        display: none;
    }
    .coming-soon-contant #timer div {
        color: #fff;
    }
    .coming-soon-contant {
        .newsletter-form {
            .form-control {
                color: var(--whiteColor);
                &::placeholder {
                    color: var(--whiteColor);
                }
            }
        }
    }
    .portfolio-page-area  {
        background-color: var(--backgroundColor);
    }
    .portfolio-details-area {
        background-color: var(--backgroundColor);
    }
    .single-features-card {
        &.portfolio-details-card {
            background-color: transparent;
        }
    }
    .single-portfolio-details-content {
        ul {
            border-bottom: 1px solid rgba(230, 230, 230, 0.2);
        }
    }
    .carbonara-pasta-card {
        background-color: var(--optionalColor);
    }
    .shop-area {
        background-color: var(--backgroundColor);
    }
    .single-shop-cart {
        .shop-img {
            background-color: var(--optionalColor);
        }
    }
    .showing {
        .showingdowen-form {
            .form-select {
                border: none;
                background-color: var(--optionalColor);
                color: var(--whiteColor);
            }
        }
    }
    .related-products-area {
        .single-shop-cart {
            .shop-img {
                background-color: var(--backgroundColor);
            }
        }
    }
    .menu-details .menu-details-img {
        background-color: var(--backgroundColor);
        box-shadow: none;
    }
    .table-responsive {
        .table {
            &.table-bordered {
                thead {
                    background-color: var(--backgroundColor);
                    tr {
                        th {
                            color: var(--whiteColor);
                        }
                    }
                }
                tbody {
                    tr {
                        th {
                            color: var(--whiteColor);
                            a {
                                color: var(--whiteColor);
                            }
                            .table-icon {
                                background-color: var(--backgroundColor);
                            }
                            .pass-quantity {
                                .input-counter {
                                    input {
                                        color: var(--whiteColor);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .coupon-code {
        .coupon {
            .coupon-group-form {
                .form-control {
                    background-color: var(--backgroundColor);
                    border: none;
                    color: var(--whiteColor);

                    &::placeholder {
                        color: var(--whiteColor);
                    }
                }
            }
        }
    }
    .single-blog-details-content {
        .d-flex {
            .portfolio-details-list {
                ul {
                    li {
                        a {
                            &:hover {
                                background-color: var(--mainColor);
                                transform: translateY(-5px);
                            }
                        }
                    }
                }
            }
            .portfolio-details-list-two {
                ul {
                    li {
                        a {
                            &:hover {
                                background-color: var(--mainColor);
                                transform: translateY(-5px);
                            }
                        }
                    }
                }
            }
        }
    }
    .checkout {
        background-color: var(--backgroundColor);
        box-shadow: none;
    }
    .checkout-from {
        .form-label {
            color: var(--whiteColor);
        }
        .form-select {
            background-color: var(--backgroundColor);
            border-radius: 0px;
            color: var(--whiteColor);
        } 
        .form-group {
            .form-control {
                background-color: var(--backgroundColor);
                border: none;
                color: var(--whiteColor);

                &::placeholder {
                    color: var(--whiteColor);
                }
            }
        }
        .payment-method {
            p {
                color: var(--whiteColor);
                label {
                    color: var(--whiteColor);
                }
            }
        }
    }
    .single-checkout-cart {
        .table-responsive {
            background-color: var(--backgroundColor);
            border-bottom: none;
            .table {
                border-bottom: none !important;
                &.table-bordered {
                    thead {
                        border: none;
                        tr {
                            border: none;
                            th {
                                border: none !important;
                            }
                        }
                    }
                    tbody {
                        border: none;
                        tr {
                            th {
                                border-left: none;
                                border-right: none;
                            }
                        }
                        .card-subtotal {
                            border: none;
                            th {
                                color: var(--whiteColor);
                               border: none;
                            }
                        }
                    }
                }
            }
        }
    }
    .bg-albastor {
        box-shadow: none;
        background-color: var(--backgroundColor);
    }

    .bg-albastor .bill-details .bill-item-wrap .payment-box .payment-method p label {
        color: var(--whiteColor);
    }
    .single-blog-card.blog-card-page {
        box-shadow: none;
        background-color: var(--backgroundColor);
    }
    .discover-more {
        color: var(--whiteColor) !important;
    }
    .blog-categories {
        background-color: var(--backgroundColor);
    }
    .blog-tags {
        background-color: var(--backgroundColor);
    }
    .blog-tags ul li a {
        background-color: var(--optionalColor);
    }
    .single-blog-details-content .blog-details-card {
        background-color: var(--backgroundColor);
    }
    .single-blog-details-content .blog-details-form .details-from .form-control {
        background-color: var(--backgroundColor);
        border: none;
        color: var(--whiteColor);

        &::placeholder {
            color: var(--whiteColor);
        }
    }
    .single-blog-details-content .blog-details-form .form-check .form-check-label {
        color: var(--whiteColor);
    }
    .single-blog-details-content .blog-details-form .form-check .form-check-input {
        background-color: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .contact-form-box {
        background-color: var(--backgroundColor);
        box-shadow: none;
    }
    .single-contact-form {
        .form-group {
            .form-control {
                background-color: var(--optionalColor);
                border: none;
                color: var(--whiteColor);

                &::placeholder {
                    color: var(--whiteColor);
                }
            }
        }
    }
    .single-contact-form .form-group .form-check .form-check-label {
        color: var(--whiteColor);
        a {
            color: var(--whiteColor);
        }
    }
    .single-contact-form .form-group .form-check .form-check-input {
        background-color: transparent;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    .contact-form-content .contact-widget .contact-item a {
        color: var(--whiteColor);
    }

    .single-banner-content {
        span {
            color: var(--mainColor) !important;
            background: rgba(255, 255, 255, 0.12) !important;
        }
        
    }

   // Responsive CSS
    @media only screen and (max-width: 767px) {

    }

    @media only screen and (min-width: 768px) and (max-width: 991px) {
      
    }
        
    @media only screen and (min-width: 992px) and (max-width: 1199px) {
        
    }

    @media only screen and (min-width: 1200px) and (max-width: 1399px) {
        
    }
    @media only screen and (min-width: 1600px) {
        .single-banner-two-image .banner-two-dark img {
            max-width: 100%;
        }
    }

}