/* ----------------------------------------------
:: Template Name: scary - Dark and Scary Restaurant Theme
:: Template Author: Colorlib
:: Modified by: [Your Name]
:: Version: v2.0
:: Last Updated: [Date]
---------------------------------------------- */

/* Fonts */

@import url('https://fonts.googleapis.com/css?family=Creepster|Metal+Mania|Open+Sans:300,400,600,700|Work+Sans:400,500,600,700');
@font-face {
    font-family: 'ZuumeRegular';
    src: url('/fonts/zuume/Zuume-Regular.ttf');
}

@font-face {
    font-family: 'ZuumeBold';
    src: url('/fonts/zuume/Zuume-Bold.ttf');
}

@font-face {
    font-family: 'Madjoe';
    src: url('/fonts/madjoe.ttf');
}

.spooky-font {
    font-family: 'Madjoe' !important;
}

.standard-font {
    font-family: 'ZuumeRegular' !important;
}

.standard-font-bold {
    font-family: 'ZuumeBold' !important;
}

/* Import CSS */

@import 'css/bootstrap/bootstrap.min.css';
@import 'css/others/animate.css';
@import 'css/others/magnific-popup.css';
@import 'css/others/owl.carousel.min.css';
@import 'css/others/font-awesome.min.css';
@import 'css/others/pe-icon-7-stroke.css';

/* Base CSS */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #121212; /* Dark background */
    color: #e0e0e0; /* Light text */
}

h1,
h2,
h3,
h4,
h5,
h6 , .nav-link{
    font-family: 'ZuumeBold', sans-serif;
    font-weight: 700;
    color: #ff0000; /* Red text for headings */
    line-height: 1.3;
    letter-spacing: 0.1em;

}

p {
    font-size: 18px;
    line-height: 1.5;
    font-weight: 400;
}

a,
a:hover,
a:focus,
a:active {
    color: #ff0000; /* Red links */
    text-decoration: none;
    transition-duration: 500ms;
    font-weight: 600;
    outline: none;
}

/* Section Paddings */
.section-padding-150 { padding: 150px 0; }
.section-padding-150-0 { padding-top: 150px; padding-bottom: 0; }
.section-padding-0-150 { padding-top: 0; padding-bottom: 150px; }
.section-padding-120-0 { padding-top: 120px; padding-bottom: 0; }
.section-padding-0-120 { padding-top: 0; padding-bottom: 120px; }
.section-padding-100 { padding: 100px 0; }
.section-padding-100-0 { padding-top: 100px; padding-bottom: 0; }
.section-padding-0-100 { padding-top: 0; padding-bottom: 100px; }

img {
    max-width: 100%;
    height: auto;
}

/* Spacing Utility Classes */
.mt-15 { margin-top: 15px; }
.mt-30 { margin-top: 30px; }
.mt-40 { margin-top: 40px; }
.mt-50 { margin-top: 50px; }
.mt-100 { margin-top: 100px; }
.mt-150 { margin-top: 150px; }

.mr-15 { margin-right: 15px; }
.mr-30 { margin-right: 30px; }
.mr-50 { margin-right: 50px; }
.mr-100 { margin-right: 100px; }

.mb-15 { margin-bottom: 15px; }
.mb-30 { margin-bottom: 30px; }
.mb-50 { margin-bottom: 50px; }
.mb-100 { margin-bottom: 100px; }

.ml-15 { margin-left: 15px; }
.ml-30 { margin-left: 30px; }
.ml-50 { margin-left: 50px; }
.ml-100 { margin-left: 100px; }

/* Scroll to Top Button */
#scrollUp {
    bottom: 30px;
    font-size: 18px;
    right: 30px;
    width: 40px;
    background-color: #ff0000; /* Red button */
    color: #fff;
    text-align: center;
    height: 40px;
    line-height: 44px;
    border-radius: 3px;
    font-size: 36px;
}

.scary-table {
    display: table;
    height: 100%;
    width: 100%;
}

.scary-table-cell {
    display: table-cell;
    vertical-align: middle;
}

/* Section Heading */
.section-heading {
    position: relative;
    margin-bottom: 70px;
}

.section-heading h2 {
    font-size: 36px;
    font-weight: 700;
    line-height: 1;
    color: #ff0000; /* Red text for headings */
    margin-bottom: 0;
}

/* Preloader */
#preloader {
    overflow: hidden;
    background-color: #121212;
    height: 100%;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99999;
}

#preloader .preload-icons {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin-top: -25px;
    margin-left: -25px;
    background-color: transparent;
    text-align: center;
    line-height: 50px;
}

.scary-load {
    animation: scary-load 6000ms linear infinite;
    border: 2px solid #ff0000; /* Red border */
    border-radius: 50%;
    height: 70px;
    width: 70px;
    position: relative;
    margin: -35px;
}

@keyframes scary-load {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Overlay Backgrounds */
.bg-overlay:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8); /* Darker overlay */
    z-index: -1;
}

/* Buttons */
.scary-btn {
    font-family: 'Madjoe', 'Work Sans', sans-serif;
    border: 1px solid #b2b2b2;
    font-weight: 500;
    background-color: #1a1a1a; /* Dark button */
    color: #fff !important;
    transition: background-color 500ms;
}

.scary-btn:hover,
.scary-btn:focus {
    background-color: #ff0000; /* Red on hover */
    color: #fff;
}

.scary-btn > span {
    width: 8px;
    height: 8px;
    background-color: #ff0000;
    display: inline-block;
    border-radius: 50%;
    margin-right: 10px;
}

/* Search Area */
.scary-search-form {
    width: 100%;
    position: fixed;
    z-index: 99999;
    height: 100px;
    background-color: #000;
    top: -200px;
    left: 0;
    transition-duration: 500ms;
    overflow-x: hidden;
}

.scary-search-form form input {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background-color: #1a1a1a; /* Dark input background */
    color: #fff;
    padding: 0 20px;
    font-size: 14px;
}

#closeBtn {
    width: 30px;
    height: 30px;
    position: absolute;
    background-color: transparent;
    border-radius: 50%;
    right: 30px;
    color: #fff;
    cursor: pointer;
    text-align: center;
    opacity: 0.5;
    transition-duration: 500ms;
}

#closeBtn:hover {
    opacity: 1;
}

/* Header & Menu Area */
.header_area {
    position: fixed;
    width: 100%;
    z-index: 9999;
    background-color: #121212; /* Dark background */
    height: 100px;
    top: 0;
    left: 0;
    transition-duration: 700ms;
}

.sticky .header_area {
    background-color: #000;
    height: 70px;
    z-index: 9999;
}

.navbar-brand,
.navbar-expand-lg .navbar-nav .nav-link {
    color: #fff;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-item.active .nav-link {
    color: #ff0000; /* Red on hover */
}

.dropdown-item {
    background-color: #1a1a1a;
    color: #fff;
}

.dropdown-item:hover {
    background-color: #ff0000; /* Red on hover */
    color: #fff;
}

/* Hero Area */
.scary-hero-area {
    width: 100%;
    position: relative;
    background-position: center center;
    background-size: cover;
    overflow-x: hidden;
}

.single-hero-slides:after {
    background-color: rgba(0, 0, 0, 0.8); /* Darker overlay */
}

.hero-content h2,
.hero-content p {
    color: #fff; /* White text */
}

.scary-hero-area .owl-next {
    background-color: #ff0000; /* Red next button */
    color: #fff;
}

.scary-hero-area .owl-prev {
    background-color: #ff0000; /* Red prev button */
    color: #fff;
}

.owl-dot {
    background-color: #ff0000; /* Red dots */
}

.owl-dot.active {
    background-color: #ffffff; /* White dot for active */
}

/* Cool Facts */
.cool-facts-area {
    width: 100%;
    background-color: #1a1a1a; /* Dark background */
    padding: 120px 0;
    position: relative;
}

.cool-fact h2 {
    color: #ff0000; /* Red for numbers */
}

.cool-fact h4 {
    color: #ffffff; /* White text */
}

.cool-fact p {
    color: #bbbbbb; /* Gray text */
}

/* Features */
.features-area {
    width: 100%;
    background-color: #1a1a1a; /* Dark background */
    position: relative;
}

.features-title h2 {
    color: #ff0000; /* Red text */
}

.features-content {
    color: #ffffff; /* White text */
}

.features-content h4 {
    color: #ff0000; /* Red for headings */
}

/* About Us */
.about-us-content h2,
.about-us-content h4 {
    color: #ff0000; /* Red text */
}

.about-us-content p {
    color: #c0c0c0; /* Lighter gray text */
}

/* Testimonials */
.testimonials-area {
    background-color: #121212; /* Dark background */
    color: #ffffff; /* White text */
}

.single-testimonial-area .testimonial-info h5 {
    color: #ff0000; /* Red for name */
}

.single-testimonial-area .testimonial-info p {
    color: #c0c0c0; /* Gray text */
}

/* Our Team */
.our-team-area {
    background-color: #1a1a1a; /* Dark background */
    color: #ffffff; /* White text */
}

.team-title h2 {
    color: #ff0000; /* Red text */
}

.team-member h4 {
    color: #ffffff; /* White text */
}

.team-member p {
    color: #bbbbbb; /* Gray text */
}

/* Menu */
.menu-area {
    background-color: #121212; /* Dark background */
    color: #ffffff; /* White text */
}

.menu-title h2 {
    color: #ff0000; /* Red text */
}

.menu-content h4 {
    color: #ffffff; /* White text */
}

.menu-content p {
    color: #bbbbbb; /* Gray text */
}

/* Reservations */
.reservation-area {
    background-color: #1a1a1a; /* Dark background */
    color: #ffffff; /* White text */
}

.reservation-title h2 {
    color: #ff0000; /* Red text */
}

.reservation-form input,
.reservation-form select {
    background-color: #1a1a1a; /* Dark background */
    color: #ffffff; /* White text */
}

.reservation-form button {
    background-color: #ff0000; /* Red button */
    color: #ffffff; /* White text */
}

/* Footer */
.footer-area {
    background-color: #000; /* Dark background */
    color: #ffffff; /* White text */
}

.footer-social a {
    color: #ff0000; /* Red social icons */
}

.footer-nav li a {
    color: #ffffff; /* White text */
}

.footer-nav li a:hover {
    color: #ff0000; /* Red on hover */
}

.copyright {
    background-color: #121212; /* Dark background */
    color: #bbbbbb; /* Gray text */
}

.metal-mania-regular {
  font-family: "Metal Mania", system-ui;
  font-weight: 400;
  font-style: normal;
}
.scary-button {
    background-color: #2c2c2c; /* Dark background */
    color: #fff; /* White text for contrast */
    border: 2px solid #ff0000; /* Red border for a striking look */
    border-radius: 5px; /* Slightly rounded corners */
    font-family: 'Madjoe', cursive; /* Scary font from Google Fonts */
    font-size: 1.2em; /* Slightly larger text */
    padding: 10px 20px; /* Adequate padding */
    text-transform: uppercase; /* All caps text */
    letter-spacing: 2px; /* Spaced out letters */
    box-shadow: 0 0 10px #ff0000; /* Glowing red shadow */
    cursor: pointer; /* Pointer cursor on hover */
    transition: all 0.3s ease; /* Smooth transition for effects */
}

.scary-button:hover {
    background-color: #ff0000; /* Red background on hover */
    color: #000; /* Black text on hover */
    box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000; /* More intense glow on hover */
    transform: scale(1.05); /* Slightly enlarge on hover */
}

.scary-button:active {
    transform: scale(0.95); /* Slightly shrink when clicked */
}

.scary-input {
    background-color: #2c2c2c; /* Dark background */
    color: #fff; /* White text for contrast */
    border: 2px solid #ff0000; /* Red border */
    border-radius: 5px; /* Slightly rounded corners */
    font-family: 'ZuumeRegular', cursive; /* Scary font from Google Fonts */
    font-size: 1em; /* Font size */
    padding: 10px; /* Padding inside the input */
    box-shadow: 0 0 10px #ff0000; /* Glowing red shadow */
    outline: none; /* Remove default outline */
    transition: all 0.3s ease; /* Smooth transition for effects */
    width: 100%; /* Full width */
    box-sizing: border-box; /* Include padding in width calculation */
}

.scary-input::placeholder {
    color: #ffcccc; /* Lighter red placeholder text */
    opacity: 0.7; /* Slightly transparent placeholder */
    font-style: italic; /* Italicize placeholder text */
}

.scary-input:focus {
    background-color: #ff0000; /* Red background on focus */
    color: #000; /* Black text on focus */
    box-shadow: 0 0 20px #ff0000, 0 0 40px #ff0000; /* More intense glow on focus */
}
  #intro {
      background-image: url("/img/7.png"); background-repeat: no-repeat; background-position:center ;
      height: 100vh;
    }

    /* Height for devices larger than 576px */
    @media (min-width: 992px) {
      #intro {
        margin-top: -58.59px;
      }
    }

.bg-luminate-accent {
   background-color: #11A4DD !important;
  }

  .luminate-btn {
    color: white !important;
    background-color:#000B2B !important;
  border: 2px solid #addef3;
  font-family: 'League Spartan', sans-serif;
}

.luminate-alt-btn {
  color: #000B2B !important;
  background-color:white !important;
  border: 2px solid #000B2B;
    font-family: 'League Spartan', sans-serif;
}

li {
    list-style: none;
}

/* Icon 1 */

.animated-icon3 {
width: 30px;
height: 20px;
position: relative;
margin: 0px;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .5s ease-in-out;
-moz-transition: .5s ease-in-out;
-o-transition: .5s ease-in-out;
transition: .5s ease-in-out;
cursor: pointer;
}

.animated-icon3 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
border-radius: 9px;
opacity: 1;
left: 0;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: .25s ease-in-out;
-moz-transition: .25s ease-in-out;
-o-transition: .25s ease-in-out;
transition: .25s ease-in-out;
background: #000000;
}

/* Icon 4 */

.animated-icon3 span:nth-child(1) {
top: 0px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3 span:nth-child(2) {
top: 10px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3 span:nth-child(3) {
top: 20px;
-webkit-transform-origin: left center;
-moz-transform-origin: left center;
-o-transform-origin: left center;
transform-origin: left center;
}

.animated-icon3.open span:nth-child(1) {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
top: 0px;
left: 8px;
}

.animated-icon3.open span:nth-child(2) {
width: 0%;
opacity: 0;
}

.animated-icon3.open span:nth-child(3) {
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
top: 21px;
left: 8px;
}
.bg-white {background-color: #FFF; color:#000}

#menu-icon {
    transition: opacity 0.3s ease, transform 0.3s ease;
    width:60px;
}

.hidden {
    opacity: 0;
    transform: scale(0.9);
}

.navbar-dark .navbar-toggler{border: 0px}
.breadcrumb{background-color: #403a3c; color:#FFF;}
.fc-list-heading-main {color:#000;}

body{font-size: 1.1rem;}
h2{text-decoration: underline;}