/*
Template Name:  Bake In 
Author URI: http://themeforest.net/user/bogdan_09
Author Name: Bogdan
Version: 1.0
*/


/* --- TABLE OF CONTENT

01. GENERAL LAYOUT
02. HEADER
03. FOOTER
		1. Footer General Styles
		2. Footer Social Icons
		3. Footer Gallery
		4. Footer List
04. HERO SECTIONS
05. MENU
06. BLOG
07. REGISTER
08. CONTACT
09. MOBILE DEVICES

--- */


/* ========================================================== */


/* 			            01. GENERAL LAYOUT                    */


/* ========================================================== */

#loader {
    position: fixed;
    /* Keep it fixed on screen */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    /* Make sure it's above everything */
    background-color: #fff;
    /* White background, change if needed */
    /* Use Flexbox to center the logo */
    display: flex;
    justify-content: center;
    /* Center horizontally */
    align-items: center;
    /* Center vertically */
}

.loader-logo {
    max-width: 150px;
    /* Adjust the size of your logo as needed */
    width: 30%;
    /* Example: use a percentage */
    height: auto;
    /* Maintain aspect ratio */
    /* --- Optional Animation: Choose ONE (or none) --- */
    /* Option A: Subtle Pulse Animation */
    animation: pulseLoader 1.5s infinite ease-in-out;
    /* Option B: Simple Spin Animation (Uncomment to use) */
    /* animation: spinLoader 2s linear infinite; */
    /* Option C: No Animation - Comment out or remove the 'animation' line */
}


/* Keyframes for Pulse Animation (if using Option A) */

@keyframes pulseLoader {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


/* Keyframes for Spin Animation (if using Option B) */

@keyframes spinLoader {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}


/* --- End New Loader Styles --- */


/* --- Optional: Clean up old CSS --- */


/* You can find and remove or comment out the old CSS rules
   related to .sk-three-bounce, .sk-child, .sk-bounce1, etc.
   if they are no longer needed anywhere else. They might be
   in style.css or animate.css or another linked file. */

ul,
ol {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    color: #777;
    font-size: 14px;
    line-height: 24px;
    margin-bottom: 20px;
}

ul li,
ol li {
    font-size: 14px;
    line-height: 28px;
}

ul li i {
    vertical-align: middle;
}

ul.features-list li {
    float: left;
    font-size: 14px;
    line-height: 24px;
    margin: 10px 0;
}

ul.features-list li img {
    max-width: 55px;
    margin-right: 20px;
    float: left;
}

p {
    font-size: 14px;
    line-height: 24px;
    font-weight: 400;
    color: #777;
    margin-bottom: 25px;
}

p.hero-text {
    position: relative;
    text-align: center;
    font-size: 18px;
    line-height: 30px;
    padding: 30px 0;
    color: #eee;
}
section.image-section {
    background-color: #F6B419; /* A warm, very light beige/off-white */
    padding-top: 80px;    /* Add some space above the inner image container */
    padding-bottom: 80px; /* Add some space below the inner image container */
}

p.hero-text:before {
    position: absolute;
    content: "";
    background-color: #F6B419;
    height: 3px;
    width: 50px;
    top: 0px;
    left: 50%;
    margin-left: -25px;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: ui-monospace;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: #454545;
}

h1 {
    font-size: 42px;
}

h2 {
    font-size: 34px;
}

h3 {
    font-size: 28px;
}

h4 {
    font-size: 18px;
}

h5 {
    font-size: 16px;
}

h6 {
    font-size: 14px;
}

h2.section-title {
    color: #252525;
    text-transform: uppercase;
    font-size: 42px;
    line-height: 50px;
    margin: 0 0 20px 0;
}

h3.section-title {
    color: #252525;
    text-transform: uppercase;
    font-size: 36px;
    line-height: 42px;
    letter-spacing: 2px;
    margin: 0 0 30px 0;
}

h2.section-title.white,
h3.section-title.white {
    color: #fff;
}

h2.section-title.small-margin,
h3.section-title.small-margin {
    margin: 0 0 20px 0;
}

h2.section-title.no-margin,
h3.section-title.no-margin {
    margin-bottom: 0;
}

span.comic-text {
    font-size: 80px;
    line-height: 60px;
    color: #F6B419;
    font-family: 'Great Vibes', cursive;
}

p.section-subtitle {
    font-size: 16px!important;
}

p.section-subtitle.grey {
    color: #bbb;
}

.separator_wrapper,
.separator_wrapper_white {
    margin-bottom: 10px;
}

.separator_wrapper::after,
.separator_wrapper::before {
    background-color: #E74C3C;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 60px;
    height: 1px;
    margin-top: -6px;
}

.separator_wrapper_white::after,
.separator_wrapper_white::before {
    background-color: #ddd;
    display: inline-block;
    vertical-align: middle;
    content: "";
    width: 60px;
    height: 1px;
    margin-top: -6px;
}

h3.medium-text {
    font-size: 32px;
    margin-top: 10px;
}

h3.large-text {
    font-size: 48px;
    line-height: 1.1;
    font-weight: 400;
}

iframe {
    max-width: 100%;
    border: none;
}

.width-100 {
    width: 100%;
}

.medium {
    font-weight: 400;
}

.bold {
    font-weight: 700;
}

.lyla {
    color: #9E5FBA;
}

.green {
    color: #16A085;
}

.blue {
    color: #3498db;
}

.red {
    color: #E74C3C;
}

.grey {
    color: #ddd;
}

.white {
    color: #fff;
}

.section-white {
    background-color: #fff;
    padding: 90px 0;
}

.section-grey {
    background-color: #f5f5f5;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    padding: 90px 0;
}

.section-grey.small-padding,
.section-white.small-padding {
    padding: 50px 0;
}

.section-grey.no-padding-bottom,
.section-white.no-padding-bottom,
.section-dark.no-padding-bottom,
.section-blue.no-padding-bottom {
    padding: 90px 0 0 0;
}

.section-grey.small-padding-bottom,
.section-white.small-padding-bottom,
.section-dark.small-padding-bottom,
.section-blue.small-padding-bottom {
    padding: 90px 0 60px 0;
}

.section-grey.no-padding,
.section-white.no-padding,
.section-dark.no-padding,
.section-blue.no-padding {
    padding: 0;
}

.section-white.about-padding {
    padding: 85px 0 100px 0;
}

.section-dark.portfolio-padding {
    padding: 60px 0 75px 0;
}

.section-dark {
    background-color: #393f43;
    padding: 90px 0;
}

.section-blue {
    background-color: #34b1c4;
    padding: 90px 0;
}


/* margin and padding classes */

.margin-right-25 {
    margin-right: 25px !important;
}

.margin-top-110 {
    margin-top: 110px !important;
}

.margin-top-100 {
    margin-top: 100px !important;
}

.margin-top-90 {
    margin-top: 90px !important;
}

.margin-top-80 {
    margin-top: 80px !important;
}

.margin-top-70 {
    margin-top: 70px !important;
}

.margin-top-60 {
    margin-top: 60px !important;
}

.margin-top-50 {
    margin-top: 50px !important;
}

.margin-top-40 {
    margin-top: 40px !important;
}

.margin-top-30 {
    margin-top: 30px !important;
}

.margin-top-20 {
    margin-top: 20px !important;
}

.margin-top-10 {
    margin-top: 10px !important;
}

.margin-top-5 {
    margin-top: 5px !important;
}

.margin-top-0 {
    margin-top: 0px !important;
}

.margin-bottom-0 {
    margin-bottom: 0px !important;
}

.margin-bottom-10 {
    margin-bottom: 10px !important;
}

.margin-bottom-20 {
    margin-bottom: 20px !important;
}

.margin-bottom-30 {
    margin-bottom: 30px !important;
}

.margin-bottom-40 {
    margin-bottom: 40px !important;
}

.margin-bottom-50 {
    margin-bottom: 50px !important;
}

.margin-bottom-60 {
    margin-bottom: 60px !important;
}

.margin-bottom-70 {
    margin-bottom: 70px !important;
}

.margin-bottom-80 {
    margin-bottom: 80px !important;
}

.margin-bottom-90 {
    margin-bottom: 90px !important;
}

.margin-bottom-100 {
    margin-bottom: 100px !important;
}

.margin-bottom-110 {
    margin-bottom: 110px !important;
}

.margin-bottom-120 {
    margin-bottom: 120px !important;
}

.margin-bottom-130 {
    margin-bottom: 120px !important;
}

.margin-bottom-140 {
    margin-bottom: 140px !important;
}

.padding-top-0 {
    padding-top: 0px !important;
}

.padding-top-10 {
    padding-top: 10px !important;
}

.padding-top-20 {
    padding-top: 20px !important;
}

.padding-top-30 {
    padding-top: 30px !important;
}

.padding-top-40 {
    padding-top: 40px !important;
}

.padding-top-50 {
    padding-top: 50px !important;
}

.padding-top-60 {
    padding-top: 60px !important;
}

.padding-top-70 {
    padding-top: 70px !important;
}

.padding-top-80 {
    padding-top: 80px !important;
}

.padding-top-90 {
    padding-top: 90px !important;
}

.padding-top-100 {
    padding-top: 100px !important;
}

.padding-top-110 {
    padding-top: 110px !important;
}

.padding-bottom-110 {
    padding-bottom: 110px !important;
}

.padding-bottom-100 {
    padding-bottom: 100px !important;
}

.padding-bottom-90 {
    padding-bottom: 90px !important;
}

.padding-bottom-80 {
    padding-bottom: 80px !important;
}

.padding-bottom-70 {
    padding-bottom: 70px !important;
}

.padding-bottom-60 {
    padding-bottom: 60px !important;
}

.padding-bottom-50 {
    padding-bottom: 50px !important;
}

.padding-bottom-40 {
    padding-bottom: 30px !important;
}

.padding-bottom-30 {
    padding-bottom: 30px !important;
}

.padding-bottom-20 {
    padding-bottom: 20px !important;
}

.padding-bottom-10 {
    padding-bottom: 10px !important;
}

.padding-bottom-0 {
    padding-bottom: 0px !important;
}


/* carousel */

.carousel.carousel1 .carousel-indicators {
    position: inherit;
    right: 0px;
}

.carousel.carousel1 .item .lead {
    font-size: 20px;
}

.carousel.carousel1 .carousel-indicators li {
    background-color: transparent;
    border: 2px solid #F6B419;
    width: 14px;
    height: 14px;
}

.carousel.carousel1 .carousel-indicators li.active {
    background-color: #F6B419;
}

.carousel.carousel3 .carousel-indicators {
    position: inherit;
    right: 0px;
}

.carousel.carousel3 .item .lead {
    font-size: 20px;
}

.carousel.carousel3 .carousel-indicators li {
    background-color: #f9f9f9;
    border: 3px solid #e0e0e0;
    width: 14px;
    height: 14px;
}

.carousel.carousel3 .carousel-indicators li.active {
    background-color: #e0e0e0;
}

.carousel.carousel-fade .item {
    -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -ms-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
    opacity: 0;
}

.carousel.carousel-fade .active.item {
    opacity: 1;
}

.carousel.carousel-fade .active.left,
.carousel.carousel-fade .active.right {
    left: 0;
    z-index: 2;
    opacity: 0;
    filter: alpha(opacity=0);
}

.carousel.carousel-fade .next,
.carousel.carousel-fade .prev {
    left: 0;
    z-index: 1;
}

.carousel.carousel-fade .carousel-control {
    z-index: 3;
}

.carousel-indicators {
    bottom: auto;
    left: auto;
    margin: 0;
    right: 16px;
    top: 16px;
    width: auto;
    line-height: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

.carousel-indicators li {
    vertical-align: top;
    border: none;
    width: 8px;
    height: 8px;
    margin: 0 0 0 6px;
    background-color: #2c3e50;
    background-color: rgba(44, 62, 80, 0.5);
}

.carousel-indicators li.active {
    background-color: #fff;
    width: 8px;
    height: 8px;
    margin: 0 0 0 6px;
}


/* end carousel */


/* -----  Photos Hover Animations ----- */

.popup-wrapper {
    display: block;
    position: relative;
    overflow: hidden;
}

.popup-gallery {
    display: inline-block;
    position: relative;
}

.popup-gallery::after {
    display: block;
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.first-gallery {
    margin-bottom: 15px;
}

.popup-gallery img {
    z-index: 10;
    width: 100%;
    height: auto;
}

.popup-gallery:hover img {
    opacity: 0.25;
}

.popup-gallery a span.eye-wrapper,
.popup-gallery a span.eye-wrapper2 {
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    display: block;
    overflow: hidden;
    z-index: 2;
    height: 100%!important;
    top: 0%;
    margin-top: 0px;
    left: 0%;
    right: 0%;
    color: #fff;
    text-align: center;
    font-weight: 300;
    opacity: 0;
}

.popup-gallery a span.eye-wrapper i.eye-icon,
.popup-gallery a span.eye-wrapper2 i.eye-icon {
    position: absolute;
    display: inline-block;
    font-size: 48px;
    z-index: 3;
    top: 50%!important;
    margin-top: -24px!important;
    left: 0%;
    right: 0%;
}

.popup-gallery a:hover span {
    opacity: 1;
}

.popup-gallery img,
.popup-gallery a span {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.image-wrapper {
    display: inline-block;
    position: relative;
}

.image-wrapper:before {
    display: block;
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    border: 1px solid rgba(255, 255, 255, 0.7);
}


/* ----- Instagram Feed ----- */

#instafeed {
    position: relative;
    display: block;
    overflow: hidden;
}

#instafeed a {
    position: relative;
    display: inline-block;
    width: 12.5%;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

#instafeed a img {
    display: inline-block;
    width: 100%;
}

#instafeed a:hover:before {
    background-color: rgba(0, 0, 0, 0.3);
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

#instafeed a:before {
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.instagram-text {
    position: absolute;
    z-index: 100;
    top: 158px;
    left: 50%;
    margin-left: -158px;
    width: 100%;
    max-width: 315px;
    padding: 26px 0 29px 0;
    text-align: center;
    background-color: #000;
}

.instagram-text a.instagram-icon {
    color: #fff;
    font-size: 32px;
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.instagram-text a.instagram-icon:hover {
    color: #f8bf2c;
}

.instagram-text p {
    color: #fff;
    margin: 10px 0 0 0;
}


/* ----- Buttons ----- */

.btn,
btn:hover {
    -webkit-transition: all 0.25s ease-in-out;
    -moz-transition: all 0.25s ease-in-out;
    -ms-transition: all 0.25s ease-in-out;
    -o-transition: all 0.25s ease-in-out;
    transition: all 0.25s ease-in-out;
}

.btn-margin {
    display: inline-block;
    margin: 10px 10px;
}

.btn-white-transparent {
    color: #fff;
    background-color: transparent;
    border-color: #fff;
    font-family: 'Great Vibes', cursive;
    font-weight: 700;
    padding: 16px 32px;
    font-size: 13px;
    letter-spacing: 2px;
}

.btn-white-transparent:hover,
.btn-white-transparent:focus,
.btn-white-transparent:active,
.btn-white-transparent.active,
.open .dropdown-toggle.btn-white-transparent {
    color: #F6B419;
    background-color: #fff;
    border-color: #fff;
}

.btn-yellow,
.btn-yellow-small,
.btn-yellow-x-small {
    position: relative;
    color: #fff;
    background-color: #F6B419;
    border-color: #F6B419;
    font-family: 'Great Vibes', cursive;
    font-weight: 700;
    padding: 18px 32px;
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 2px;
}

.btn-yellow-small {
    padding: 14px 28px;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1px;
}

.btn-yellow-x-small {
    color: #fff!important;
    padding: 12px 26px;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 1px;
}

.btn-yellow:before,
.btn-yellow-small:before {
    display: block;
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    left: 4px;
    border: 1px solid #fff;
}

.btn-yellow-x-small:before {
    display: block;
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border: 1px solid #fff;
}

.btn-yellow:hover,
.btn-yellow:focus,
.btn-yellow:active,
.btn-yellow.active,
.open .dropdown-toggle.btn-yellow,
.btn-yellow-small:hover,
.btn-yellow-small:focus,
.btn-yellow-small:active,
.btn-yellow-small.active,
.open .dropdown-toggle.btn-yellow-small,
.btn-yellow-x-small:hover,
.btn-yellow-x-small:focus,
.btn-yellow-x-small:active,
.btn-yellow-x-small.active,
.open .dropdown-toggle.btn-yellow-x-small {
    color: #fff;
    background-color: #F39C12;
}


/* ----- Page Loader ----- */

#loader {
    background: #eeece3;
    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 90000;
    left: 0%;
    top: 0%;
}

.sk-three-bounce {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    left: 50%;
    margin-left: -40px;
    width: 80px;
    text-align: center;
}

.sk-three-bounce .sk-child {
    width: 20px;
    height: 20px;
    background-color: #cf564b;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
    animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
}

.sk-three-bounce .sk-bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.sk-three-bounce .sk-bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes sk-three-bounce {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes sk-three-bounce {
    0%,
    80%,
    100% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    40% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}


/* ========================================================== */


/* 			                02. HEADER                        */


/* ========================================================== */

#navbar-collapse-02 li.selected a {
    color: #F6B419!important;
}

#navbar-collapse-02 .current a {
    color: #F6B419!important;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.navbar-fixed-top {
    background-color: transparent!important;
    transition: background-color 1s ease 0s;
}

.navbar-fixed-top.opaque {
    background-color: rgba(17, 17, 17, 0.95)!important;
    transition: background-color 1s ease 0s;
}

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:hover {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.navbar-default .navbar-nav>li>a.purchase {
    position: relative;
    color: #454545;
    background-color: #f8bf2c;
    border: 2px solid #f8bf2c;
    margin-left: 15px;
    margin-right: 15px;
    padding: 8px 20px;
    font-weight: 700!important;
    text-transform: none;
    webkit-border-radius: 3px 3px;
    -moz-border-radius: 3px 3px;
    border-radius: 3px 3px;
}

.navbar-default .navbar-nav>li>a.purchase:hover {
    color: #fff!important;
    background-color: transparent;
    border: 2px solid #fff;
}

.navbar-default .navbar-nav>li.social>a {
    padding-left: 10px;
    padding-right: 10px;
}

.navbar-default .navbar-nav>li.social>a.first {
    border-left: 1px solid rgba(255, 255, 255, 0.7);
    padding-left: 30px;
    margin-left: 15px;
}

.navbar-default .navbar-nav>li.social>a.last {
    padding-right: 15px;
}

.navbar-default .navbar-nav>li.social>a i {
    font-size: 18px;
    line-height: 22px!important;
    color: #fff;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.navbar-default .navbar-nav>li.social>a:hover i {
    color: #f8bf2c;
}


/* ========================================================== */


/* 			                03. FOOTER                        */


/* ========================================================== */


/* ----- 1. Footer General Styles ----- */

.footer {
    width: 100%;
    position: relative;
    background: url(../images/footer-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0 auto;
}

.footer-top {
    padding: 65px 0 15px 0;
    border-bottom: 2px dotted #999;
}

.footer-bottom {
    padding: 30px 0 20px 0;
}

a.top-scroll {
    position: relative;
    padding: 7px 14px;
    font-size: 20px;
    line-height: 20px;
    color: #fff!important;
    background-color: #F6B419;
    border-color: #F6B419;
    transition: all .50s ease-in-out;
    -moz-transition: all .50s ease-in-out;
    -webkit-transition: all .50s ease-in-out;
}

a.top-scroll:before {
    display: block;
    content: '';
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border: 1px solid #fff;
}

a.top-scroll:hover {
    background-color: #F39C12;
}

.footer h4 {
    font-size: 16px;
    position: relative;
    padding-bottom: 20px;
    color: #fff;
}

.footer h4::after {
    position: absolute;
    content: "";
    background-color: #F6B419;
    height: 3px;
    width: 40px;
    bottom: -1px;
    left: 0;
}

.footer p,
.footer a {
    color: #ddd;
}

.footer-bottom p {
    color: #999;
}

.footer-bottom p a {
    font-size: 16px;
    color: #999;
    text-decoration: underline;
}

.footer p a:hover {
    color: #F6B419;
}

p.contact_info {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
}

p.contact_info a {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 20px;
}

p.contact_info i {
    font-size: 18px;
    padding-right: 5px;
    vertical-align: middle;
}


/* ----- 2. Footer Social Icons ----- */

ul.footer_social {
    display: block;
    float: right;
    margin: 0;
}

ul.footer_social li {
    display: inline-block;
    margin: 0 0 10px 10px;
    color: #999;
    line-height: 100%!important;
}

ul.footer_social li a i {
    display: inline-block;
    padding: 0;
    font-size: 22px!important;
    line-height: 22px!important;
    color: #999;
    transition: all .5s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

ul.footer_social li a i:hover {
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
    color: #F6B419;
}


/* ----- 3. Footer Gallery ----- */

ul.footer-gallery {
    position: relative;
    display: block;
    margin: 0;
}

ul.footer-gallery li {
    display: inline-block;
    border: 5px solid #292929;
    margin: 5px 2px 2px 2px;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

ul.footer-gallery li.popup-gallery::after {
    display: none;
}

ul.footer-gallery li a img {
    position: relative;
    display: inline-block;
    width: 71px;
}


/* ----- 4. Footer List ----- */

ul.footer-list {
    display: block;
    margin: 0;
}

ul.footer-list li {
    padding: 5px 0;
    border-bottom: 1px solid #999;
}

ul.footer-list li.first {
    padding-top: 0;
}

ul.footer-list li a:hover {
    color: #F6B419;
}


/* ========================================================== */


/* 			              04. HERO SECTIONS                   */


/* ========================================================== */

.menu-hero-section {
    width: 100%;
    position: relative;
    background: url(../images/5.jpg) 50% top no-repeat fixed;
    background-size: cover;
    color: white;
    margin: 0 auto;
    padding: 300px 0 90px 0;
}

.menu-hero-section .image-overlay {
    background: rgba(17, 17, 17, 0.75);
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.about-hero-section {
    width: 100%;
    position: relative;
    background: url(http://placehold.it/1920x1280) 50% top no-repeat fixed;
    background-size: cover;
    color: white;
    margin: 0 auto;
    padding: 210px 0 90px 0;
}

.about-hero-section .image-overlay {
    background: rgba(17, 17, 17, 0.75);
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.gallery-hero-section {
    width: 100%;
    position: relative;
    background: url(../images/9.JPG) 50% top no-repeat fixed;
    background-size: cover;
    color: white;
    margin: 0 auto;
    padding: 210px 0 90px 0;
}

.gallery-hero-section .image-overlay {
    background: rgba(17, 17, 17, 0.75);
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

#locationModal .modal-content {
    /* Example: Match your site's theme */
    background-color: #ffffff;
    /* Or a dark color if your theme is dark */
    border: 2px solid #f8bf2c;
    /* Example: Use your accent yellow */
    border-radius: 10px;
    /* Example: Rounded corners */
    box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}

#locationModal .modal-header {
    background-color: #f8bf2c;
    /* Example: Accent color header */
    color: #000000;
    /* Example: Black text on yellow */
    border-bottom: none;
    border-top-left-radius: 8px;
    /* Match content radius */
    border-top-right-radius: 8px;
    /* Match content radius */
    padding: 15px 20px;
}

#locationModal .modal-header .close {
    color: #000000;
    /* Example: Dark close button */
    opacity: 0.7;
    font-size: 25px;
    text-shadow: none;
}

#locationModal .modal-header .close:hover {
    opacity: 1;
}

#locationModal .modal-title {
    font-family: 'Great Vibes', cursive;
    /* Example: Match your site font */
    font-weight: 700;
    text-align: center;
}

#locationModal .modal-body {
    padding: 30px 20px;
    /* More padding */
    color: #333;
    /* Example: Text color */
    font-family: 'Great Vibes', cursive;
    /* Example: Match your site font */
}

#locationModal .modal-body p {
    margin-bottom: 25px;
    font-size: 1.1em;
}

#locationModal .btn-location {
    font-family:  'Great Vibes', cursive;
    font-weight: 700;
    padding: 15px 30px;
    /* Make buttons larger */
    width: 80%;
    /* Make buttons wider */
    max-width: 300px;
    /* Max width */
    margin-left: auto;
    margin-right: auto;
    display: block;
    /* Ensure they take width */
    border-radius: 5px;
    /* Example */
    transition: all 0.3s ease;
    /* Smooth transition */
}

#locationModal .btn-ghazir {
    background-color: #F6B419;
    /* Your yellow */
    color: #000000;
    /* Black text */
    border: 1px solid black;
}

#locationModal .btn-ghazir:hover {
    background-color: #F6B419;
    /* Darker yellow */
    color: #000000;
}

#locationModal .btn-byblos {
    background-color: black;
    /* Example: Dark grey */
    color: #ffffff;
    /* White text */
    border: 1px solid #F6B419;
}

#locationModal .btn-byblos:hover {
    background-color: black;
    /* Darker grey */
    color: #ffffff;
}

#locationModal .modal-footer {
    border-top: 1px solid #eee;
    /* Example */
    text-align: center;
    padding: 15px 20px;
}

#locationModal .modal-footer .btn-default {
    background-color: #F6B419;
    color: black;
}


/* Ensure modal appears above fixed navbar if needed */

.modal {
    z-index: 1050;
    /* Bootstrap default is often 1050, adjust if navbar is higher */
}

.modal-backdrop {
    z-index: 1040;
    /* Bootstrap default, ensure it's below modal */
}

.reservation-hero-section {
    width: 100%;
    position: relative;
    background: url(../images/12.JPG) top no-repeat fixed;
    background-size: cover;
    color: white;
    margin: 0 auto;
    padding: 300px 0px 99px 0px;
}

.reservation-hero-section .image-overlay {
    background: rgba(17, 17, 17, 0.75);
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.hero-gallery-section {
    width: 100%;
    position: relative;
    background: url(http://placehold.it/1920x1280) 50% top no-repeat fixed;
    background-size: cover;
    color: white;
    margin: 0 auto;
    padding: 210px 0 90px 0;
}

.hero-gallery-section .image-overlay {
    background: rgba(17, 17, 17, 0.75);
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.contact-hero-section {
    width: 100%;
    position: relative;
    background: url(http://placehold.it/1920x1280) 50% top no-repeat fixed;
    background-size: cover;
    color: white;
    margin: 0 auto;
    padding: 210px 0 90px 0;
}

.contact-hero-section .image-overlay {
    background: rgba(17, 17, 17, 0.75);
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.contact2-hero-section {
    width: 100%;
    position: relative;
    background: url(http://placehold.it/1920x1280) 50% top no-repeat fixed;
    background-size: cover;
    color: white;
    margin: 0 auto;
    padding: 90px 0 90px 0;
}

.contact2-hero-section .image-overlay {
    background: rgba(255, 255, 255, 0.95);
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.image-section {
    width: 100%;
    position: relative;
    background: url(../images/section2img.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    margin: 0 auto;
    padding: 190px 0 140px 0;
}

.image-section .image-overlay {
    background: rgba(34, 34, 34, 0.40);
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.image-section-inside {
    position: relative;
    z-index: 100;
}


/* ========================================================== */


/* 					          05. MENU                        */


/* ========================================================== */


/* ----- 1. Featured Menu ----- */

.featured-menu-section {
    width: 100%;
    position: relative;
    background: url(http://placehold.it/1920x1280) 50% 0 no-repeat fixed;
    background-size: cover;
    color: white;
    margin: 0 auto;
    padding: 120px 0 80px 0;
}

.featured-menu-section .image-overlay {
    background: rgba(0, 0, 0, 0.50);
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}


/* ----- 2. Menu Homepage ----- */

.home-menu-section {
    width: 100%;
    position: relative;
    background: url(http://placehold.it/1920x1280) 50% 0 no-repeat fixed;
    background-size: cover;
    color: white;
    margin: 0 auto;
    padding: 120px 0;
}

.home-menu-section .image-overlay {
    background: rgba(0, 0, 0, 0.40);
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.menu-wrapper {}

.home-menu-list {
    display: block;
    clear: both;
}

.home-menu-list h5 {
    font-size: 18px;
    line-height: 24px;
    vertical-align: bottom;
    font-family:  'Great Vibes', cursive;
    font-weight: 700;
    color: #FFF;
    float: left;
    letter-spacing: 2px;
    max-width: 70%;
    padding-right: 10px;
    margin-bottom: 10px;
}

.home-menu-list p.price {
    color: #F6B419;
    font-size: 18px;
    line-height: 30px;
    font-weight: 700;
    display: inline-block;
    vertical-align: bottom;
    float: right;
    padding-top: 8px;
    padding-left: 10px;
    margin-bottom: 10px;
}

.dot-line {
    border-bottom: 2px dotted #fff;
    height: 29px;
    overflow: hidden;
    display: block;
}

p.home-menu-ingredients {
    display: block;
    clear: both;
    width: 100%;
    color: #eee;
}


/* ----- 3. Menu First Version ----- */

.first-menu-section {
    width: 100%;
    position: relative;
    background: url(http://placehold.it/1920x1280) 50% 0 no-repeat fixed;
    background-size: cover;
    color: white;
    margin: 0 auto;
    padding: 120px 0;
}

.first-menu-section .image-overlay {
    background: rgba(0, 0, 0, 0.60);
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

.menu-wrapper {
    display: inline-block;
    padding-right: 20px;
    margin-bottom: 10px;
}

h2.menu-section-title {
    font-size: 28px;
    position: relative;
    margin-bottom: 50px;
    margin-right: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}

h2.menu-section-title::after {
    position: absolute;
    content: "";
    background-color: #f8c12c;
    height: 3px;
    width: 50px;
    bottom: -1px;
    left: 0;
}

.menu-image {
    float: left;
    width: 20%;
}

.menu-image a img {}

.menu-description {
    float: left;
    padding-left: 5%;
    width: 75%;
}

.menu-list {
    display: block;
    clear: both;
}

.menu-list h5 {
    font-size: 18px;
    line-height: 22px;
    vertical-align: bottom;
    font-family: 'Great Vibes', cursive;
    font-weight: 700;
    float: left;
    letter-spacing: 2px;
    max-width: 70%;
    padding-right: 12px;
    margin: 5px 0;
}

.menu-list p.price {
    color: #F6B419;
    font-size: 18px;
    line-height: 18px;
    font-weight: 700;
    display: inline-block;
    vertical-align: bottom;
    float: right;
    padding-top: 7px;
    padding-left: 12px;
    margin-bottom: 5px;
}

.menu-dot-line {
    border-bottom: 2px dotted #F6B419;
    height: 22px;
    overflow: hidden;
    display: block;
}

p.menu-ingredients {
    display: block;
    clear: both;
    width: 100%;
}


/* ========================================================== */


/* 						      06. BLOG                        */


/* ========================================================== */

.blog-item {
    position: relative;
    text-align: center;
    margin-bottom: 30px;
    background-color: #fff;
    transition: all .50s ease-in-out;
    -moz-transition: all .50s ease-in-out;
    -webkit-transition: all .50s ease-in-out;
}

.blog-item-pic {
    display: inline-block;
    position: relative;
}

.blog-item-pic:before {
    display: block;
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    bottom: 10px;
    left: 10px;
    border: 1px solid rgba(255, 255, 255, 0.7);
}

.blog-item-inner {
    padding: 1px 25px 20px 25px;
}

.blog-item-inner p {
    margin: 10px 0 20px 0;
}

h3.blog-title {
    margin-top: 20px;
    margin-bottom: 1px;
}

h3.blog-title a {
    font-family:  'Great Vibes', cursive;
    font-weight: 700;
    font-size: 21px;
    color: #252525;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}

h3.blog-title a:hover {
    color: #F6B419;
    transition: all .25s ease-in-out;
    -moz-transition: all .25s ease-in-out;
    -webkit-transition: all .25s ease-in-out;
}


/* ========================================================== */


/* 					       07. REGISTER                       */


/* ========================================================== */

.register-inner {
    padding: 40px 0;
}

#register-form {
    padding: 25px 0 20px 0;
}

input.register-input {
    width: 100%;
    height: 52px;
    padding-left: 4%;
    padding-right: 4%;
    margin-bottom: 20px;
    color: #999;
    border: 1px solid #e1e1e1;
    background-color: transparent;
    font-size: 14px;
}

select.register-input {
    width: 100%;
    height: 52px;
    padding-left: 4%;
    padding-right: 4%;
    margin-bottom: 20px;
    color: #999;
    border: 1px solid #e8e8e8;
    background-color: transparent;
    font-size: 14px;
}

input.register-submit {
    position: relative;
    display: inline-block;
    color: #fff;
    border: 1px solid #F6B419;
    background-color: #F6B419;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
    width: 100%;
    padding: 16px 0;
    text-transform: uppercase;
    transition: all .50s ease-in-out;
    -moz-transition: all .50s ease-in-out;
    -webkit-transition: all .50s ease-in-out;
}

input.register-submit:hover {
    color: #fff;
    background-color: #F39C12;
    border: 1px solid #F39C12;
    transition: all .50s ease-in-out;
    -moz-transition: all .50s ease-in-out;
    -webkit-transition: all .50s ease-in-out;
}

input.white-input::-webkit-input-placeholder,
select.white-input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #999;
}

input.white-input:-moz-placeholder,
select.white-input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #999;
}

input.white-input::-moz-placeholder,
select.white-input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #999;
}

input.white-input:-ms-input-placeholder,
select.white-input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #999;
}

#register-form input.register-input:focus,
#register-form select.register-input:focus {
    border-color: #e8e8e8;
    outline: none;
}

p.register_success_box {
    text-align: center;
    display: inline-block;
    color: #454545;
    font-size: 16px;
    font-style: italic;
    margin: 20px 0 30px 0;
    padding: 20px 20px;
    border: 1px solid #fff;
    webkit-border-radius: 5px 5px 5px 5px;
    -moz-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}


/* ========================================================== */


/* 						    08. CONTACT                       */


/* ========================================================== */

#contact-form {
    margin: 0 auto;
    width: 100%;
    max-width: 960px;
    text-align: center;
    padding: 30px 0 10px 0;
}

input.contact-input {
    width: 100%;
    height: 55px;
    padding-left: 2%;
    padding-right: 2%;
    margin-bottom: 20px;
    color: #656565;
    border: 2px solid #454545;
    background-color: transparent;
    font-size: 14px;
    float: left;
}

textarea {
    height: 205px;
    margin-bottom: 20px;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #656565;
    border: 2px solid #454545;
    background-color: transparent;
    font-size: 14px;
    float: left;
}

input.contact-submit {
    color: #fff;
    border: 2px solid #F6B419;
    background-color: #F6B419;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    margin-top: 10px;
    padding: 16px 30px;
    position: relative;
    text-transform: uppercase;
    transition: all .50s ease-in-out;
    -moz-transition: all .50s ease-in-out;
    -webkit-transition: all .50s ease-in-out;
}

input.contact-submit:hover {
    color: #F6B419;
    background-color: transparent;
    border: 2px solid #F6B419;
    transition: all .50s ease-in-out;
    -moz-transition: all .50s ease-in-out;
    -webkit-transition: all .50s ease-in-out;
}

input.white-input::-webkit-input-placeholder,
textarea.white-input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #656565;
}

input.white-input:-moz-placeholder,
textarea.white-input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #656565;
}

input.white-input::-moz-placeholder,
textarea.white-input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #656565;
}

input.white-input:-ms-input-placeholder,
textarea.white-input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #656565;
}

#contact-form input.contact-input:focus,
#contact-form textarea.contact-commnent:focus {
    border-color: #F6B419;
    outline: none;
}

p.contact_success_box {
    text-align: center;
    display: inline-block;
    color: #454545;
    font-size: 20px;
    font-style: italic;
    padding: 20px 20px;
}

.wow:first-child {
    visibility: hidden;
}


/* ========================================================== */


/* 		    Background Images - max-width: 1024px             */


/* ========================================================== */

@media only screen and (max-width: 1024px) {
    .image-section,
    .featured-menu-section,
    .home-menu-section,
    .first-menu-section,
    .menu-hero-section,
    .about-hero-section,
    .gallery-hero-section,
    .reservation-hero-section,
    .hero-gallery-section,
    .contact-hero-section,
    .contact2-hero-section,
    .footer {
        background-attachment: scroll!important;
        background-size: cover!important;
        background-repeat: no-repeat!important;
    }
}


/* ========================================================== */


/* 					    19. MOBILE DEVICES                    */


/* ========================================================== */

@media handheld,
only screen and (max-width: 800px) {
    .menu-hero-section {
        background: url(../images/55.jpg) 50% top no-repeat fixed;
    }
    .menu-category {
        font-size: 11px;
    }
    .navbar-collapse .navbar-nav>li.social-group-mobile.visible-xs {
        padding-top: 15px;
        /* Add space above the icons */
        padding-bottom: 10px;
        /* Add space below the icons */
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        /* Optional separator line */
        margin-top: 2 0px;
        /* Optional margin */
        text-align: center;
        /* Center the icons horizontally */
    }
    .loader-logo {
        max-width: 100px;
        /* Smaller maximum width for mobile */
        width: 25%;
        /* Smaller relative width for mobile */
    }
    /* Style the individual mobile social icon links */
    .navbar-collapse .navbar-nav>li.social-group-mobile.visible-xs>a.social-link-mobile {
        display: inline-block;
        /* Make icons sit side-by-side */
        padding: 5px 18px;
        /* Space around each icon */
        font-size: 1.8em;
        /* Make icons a bit larger and easier to tap */
        color: #f8bf2c;
        /* Use your brand yellow color */
        transition: color 0.3s ease;
        /* Smooth hover effect */
    }
    .navbar-collapse .navbar-nav>li.social-group-mobile.visible-xs>a.social-link-mobile:hover {
        color: #ffffff;
        /* White color on hover */
    }
    .navbar-collapse {
        margin-top: 15%;
        background-color: #000;
        opacity: 0.8;
        /* White color on hover */
    }
    /* Make the "Order Now" button more prominent in the mobile menu */
    .navbar-collapse .navbar-nav>li>a.purchase {
        background-color: #f8bf2c;
        /* Yellow background */
        color: #333 !important;
        /* Dark text color, !important may be needed to override defaults */
        font-weight: bold;
        text-align: center;
        margin: 15px 15px 10px 15px;
        /* Add vertical and horizontal margin */
        padding-top: 10px;
        /* Vertical padding */
        padding-bottom: 10px;
        /* Vertical padding */
        border-radius: 5px;
        /* Slightly rounded corners */
        display: block;
        /* Ensure it takes full width within padding */
    }
    .navbar-collapse .navbar-nav>li>a.purchase:hover,
    .navbar-collapse .navbar-nav>li>a.purchase:focus {
        background-color: #e0ab26;
        /* Slightly darker yellow on hover/focus */
        color: #000 !important;
    }
    /* Optional: Limit the height of the collapsed menu and allow scrolling
       if it's still too tall for some screens */
    .navbar-collapse {
        max-height: calc(90vh - 50px);
        /* Example: Limit height (adjust 50px based on your header height) */
        overflow-y: auto;
        /* Add scrollbar ONLY if content overflows */
        border-top: none;
        /* Remove potential double borders */
    }
    .navbar-nav {
        margin-top: 0;
        /* Remove potential extra margin */
        margin-bottom: 0;
    }
    .footer {
        text-align: center;
    }
    .footer h4::after {
        left: 50%;
        margin-left: -20px;
    }
    ul.footer_social {
        float: none;
        margin-top: 25px;
    }
    .instagram-text {
        display: none;
    }
}