/*
Author       : EnvyTheme
Template Name: Restaurant
Version      : 0.1
*/
/*=============================================================
    CSS INDEX
    =============================
    01. DEFAULT STYLE
    02. NAVIGATION DESIGN
    03. START HOME SLIDER SECTION DESIGN
    04. START ABOUT US SECTION DESIGN
    05. START OUR MENU SECTION DESIGN
    06. START OUR GALLERY SECTION DESIGN
    07. START OUR TEAM SECTION DESIGN
    08. START OUR TESTIMONIALS SECTION DESIGN
    9. START OUR BLOG SECTION DESIGN
    10. START SUBSCRIBE SECTION DESIGN
    11. START CONTACT SECTION DESIGN
    12. START TOP FOOTER SECTION DESIGN
    13. START RESERVATION MODAL DESIGN
    14. START BACK TO TOP BUTTON SECTION DESIGN
  =============================================================*/
/*
* ------------------------------------------------------------
* 01.DEFAULT STYLE
* ------------------------------------------------------------
*/
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700');
@import url('https://fonts.googleapis.com/css?family=Oleo+Script:400,700');

/* Replace the current font imports at the top of style.css */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500&display=swap');

/* Replace the body font settings */
body {
    font-family: 'Montserrat', sans-serif;
    color: #112D4E;
    font-weight: 400;
}

/* For headings (more elegant serif font) */
h1, h2 {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* For section titles to make them more prominent */
.section-title h2 {
    font-size: 42px;
    letter-spacing: 1px;
}


/* Gallery Carousel Styles */


/* Gallery Carousel Container */
/* Gallery Carousel Container */
.gallery-carousel-container {
    margin-bottom: 30px;
}

/* Gallery Carousel Styles */
#galleryCarousel .single-portfolio {
    margin: 0 10px;
    height: 100%;
    flex: 1 1 33%; /* Default to 3 images per row on larger screens */
}

/* Image Style */
#galleryCarousel .single-portfolio img {
    width: 100%;
    height: 400px; /* Fixed height */
    object-fit: cover;
    border-radius: 8px;
}

/* For the overlay effect */
#galleryCarousel .single-portfolio .overly {
    height: 400px;
    border-radius: 8px;
}

/* Make sure carousel items are equal height */
#galleryCarousel .owl-stage {
    display: flex;
    flex-wrap: wrap;
}

#galleryCarousel .owl-item {
    display: flex;
    height: auto;
}

/* Navigation Buttons */
#galleryCarousel .owl-nav {
    position: absolute;
    top: -80px;
    right: 0;
}

#galleryCarousel .owl-nav button {
    background: #fff9f5 !important;
    color: #112D4E !important;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    margin-left: 10px;
    border: 1px solid #112D4E !important;
    transition: all 0.3s;
}

#galleryCarousel .owl-nav button:hover {
    background: #112D4E !important;
    color: white !important;
}

/* Dot Navigation */
#galleryCarousel .owl-dots {
    margin-top: 20px;
}

#galleryCarousel .owl-dot span {
    background: #112D4E !important;
    opacity: 0.3;
}

#galleryCarousel .owl-dot.active span {
    opacity: 1;
}

/* Responsive Design: Adjust the layout for smaller devices */
@media (max-width: 768px) {
    #galleryCarousel .single-portfolio {
        width: 48% !important; /* Adjust to show 2 images per row on tablets */
        margin: 10px 0;
    }

    

    #galleryCarousel .owl-stage {
        display: flex;
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    #galleryCarousel .single-portfolio {
        width: 48% !important; /* Adjust to show 2 images per row on small phones */
        margin: 10px 0;
    }

   

    #galleryCarousel .owl-nav {
        top: -60px;
    }
}
/* Add some margin for the buttons */
.mt-4 {
    margin-top: 30px;
}

/* Center the buttons */
.text-center {
    text-align: center;
}

a {
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
    text-decoration: none;
}
a:focus, .btn:focus {
    text-decoration: none;
    outline: none;
    box-shadow: none;
}
a:focus, a:hover, a:active {
    color: #112D4E;
    text-decoration: none;
}
h1, h2 {
    font-family: 'Oleo Script', cursive;

}
h1, h2, h3, h4, h5, h6 {
    color: #112D4E;

}
p {
    color: #112D4E;
    font-size: 15px;
    line-height: 26px;
    margin-bottom: 15px;
}
img {
    max-width: 100%;
}
section {
   padding: 100px 0 105px; 
}
.d-table {
    display: table;
    width: 100%;
    height: 100%;
}
.d-tablecell {
    display: table-cell;
    vertical-align: middle;
}
.section-title {
    text-align: center;
    margin-bottom: 60px;
}
.section-title h2 {
    margin: 0;
    font-size: 40px;
    font-weight: bold;
}
.section-title .bar {
	background-color: #112D4E;
	height: 1px;
	margin: 30px auto;
	max-width: 325px;
	position: relative;
}
.section-title .bar::before {
	background-image: url("../../assets/img/middle-arrow.png");
	content: "";
	position: absolute;
	width: 30px;
	height: 30px;
	left: 0;
	right: 0;
	margin: auto;
	top: -14px;
}
.section-title p {
	max-width: 800px;
	margin: auto;
}
.gray-bg {
    background: #DBE2EF;
}
.default-button {
    background: #DBE2EF;
	color: #112D4E;
	display: inline-block;
	padding: 10px 25px;
	border-radius: 100px;
	text-transform: uppercase;
	font-weight: 500;
}
.default-button:hover {
    background: #112D4E;
	color: #fff4f1;
}
.mt-20 {
    margin-top: 20px;
}
.preloader-wrap {
    background: #fff;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: 9999;
}
.loader {
	position: absolute;
	margin: auto;
	top: 40%;
	left: 0;
	right: 0;
}
.loader{
    width: 150px;
    height: 150px;
    margin: auto;
    overflow: hidden;
    position: relative;
}
.loader .loader-inner{ height: 100%; }
.loader,
.loader .loader-inner{
    padding: 8px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #fff4f1;
    border-left-color: #112D4E;
    -webkit-animation: loading-1 linear 3.5s infinite;
    animation: loading-1 linear 3.5s infinite;
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
    animation-timing-function: cubic-bezier(0.55, 0.38, 0.21, 0.88);
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}
@-webkit-keyframes loading-1{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
@keyframes loading-1{
    0%{
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    50%{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
    100%{
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
/*
* ------------------------------------------------------------
* 02.NAVIGATION STYLE
* ------------------------------------------------------------
*/
/* Updated Navigation Styles */
/* Update the navbar styles */
.navbar {
    background: transparent !important;
    color: #112D4E;
    border: none;
    margin: 0;
    padding: 20px 0;
    transition: all 0.3s ease;
    position: fixed;
    width: 100%;
    z-index: 999;
}

/* Navbar when scrolled */
.navbar.scrolled {
    background: #DBE2EF !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 0px !important;
}

@media (min-width: 768px) {
    .navbar.scrolled {
        background: #DBE2EF !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        padding: 20px 0 !important;
    }  }
  

/* Logo styles - default (white version for transparent navbar) */
.navbar .navbar-brand img {
    filter: brightness(0) invert(1); /* This makes the logo white */
    transition: all 0.3s ease;
}

/* Logo styles - when scrolled (original version) */
.navbar.scrolled .navbar-brand img {
    filter: none; /* Revert to original logo */
}

/* Navbar links - default (white text for transparent navbar) */
.navbar .navbar-nav > li > a {
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

/* Navbar links - when scrolled (dark text) */
.navbar.scrolled .navbar-nav > li > a {
    color: #112D4E !important;
    text-shadow: none;
}

/* Active/hover states */
.navbar .navbar-nav > .active > a, 
.navbar .navbar-nav > .active > a:focus, 
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > li > a:focus, 
.navbar .navbar-nav > li > a:hover {
    color: white !important;
    border-bottom: 2px solid white;
}

.navbar.scrolled .navbar-nav > .active > a, 
.navbar.scrolled .navbar-nav > .active > a:focus, 
.navbar.scrolled .navbar-nav > .active > a:hover,
.navbar.scrolled .navbar-nav > li > a:focus, 
.navbar.scrolled .navbar-nav > li > a:hover {
    color: #112D4E !important;
    border-bottom: 2px solid #112D4E;
}

/* Logo visibility adjustments */
.navbar .navbar-brand img {
    transition: all 0.3s ease;
}
/* Logo toggle styles */
.navbar-brand {
    position: relative;
}

.navbar-brand .logo-dark {
    display: none;
    padding-bottom: -20px;
}

.navbar-brand .logo-light {
    display: block;
}

.navbar.scrolled .navbar-brand .logo-dark {
    display: block;
}

.navbar.scrolled .navbar-brand .logo-light {
    display: none;
}

.navbar .navbar-brand > img {
	width: 120px;
}
.navbar .navbar-nav > li > a {
	color: #112D4E;
	font-size: 15px;
	text-transform: uppercase;
	font-weight: 500;
	padding: 5px 0;
	margin: 10px 12px;
	border-bottom: 2px solid transparent;
}
.navbar .navbar-nav > .active > a, 
.navbar .navbar-nav > .active > a:focus, 
.navbar .navbar-nav > .active > a:hover {
	color: #112D4E;
	background-color: transparent;
	border-bottom: 2px solid #fd2eb3;
}
.navbar .navbar-nav > li > a:focus, 
.navbar .navbar-nav > li > a:hover {
	border-bottom: 2px solid #112D4E;
}
.menu-shrink {
    background-color: #fff;
    padding: 20px 0;
    box-shadow: 0 0 10px #112D4E;
}
.navbar-toggle {
    border: none;
    background: transparent !important;
}
.navbar-toggle:hover {
    background: transparent !important;
}
.navbar .navbar-toggle .icon-bar {
	background-color: #112D4E;
}
.navbar-toggle .icon-bar {
    width: 22px;
    transition: all 0.2s;
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
}
.navbar-toggle .top-bar {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform-origin: 10% 10%;
}
.navbar-toggle .middle-bar {
    opacity: 0;
}
.navbar-toggle .bottom-bar {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform-origin: 10% 90%;
}
.navbar-toggle.collapsed .top-bar {
    transform: rotate(0);
    -webkit-transform: rotate(0);    
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
}
.navbar-toggle.collapsed .middle-bar {
    opacity: 1;
}
.navbar-toggle.collapsed .bottom-bar {
    transform: rotate(0);
    -webkit-transform: rotate(0);
    -moz-transform: rotate(0);
    -ms-transform: rotate(0);
}
.navbar .reservations a {
	background: #fd2eb3 !important;
	color: #fff !important;
	padding: 5px 15px !important;
	border-radius: 100px;
    border: none !important;
}
.navbar .reservations a:hover {
    background: #1a1a1a !important;
	color: #fff !important;
    border: none !important;
}
/*
* ------------------------------------------------------------
* 03.HOME SLIDER STYLE
* ------------------------------------------------------------
*/

.video-bg {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    z-index: -1;
}

.home-slider .item-bg-1 {
    background-image: url("/assets/img/gifs/cocoGelato.gif");
}
.home-slider .item-bg-2 {
    background-image: url("/assets/img/gallery/tricolor3.webp");
}
.home-slider .item-bg-3 {
    background-image: url("/assets/img/gallery/kinder.webp");
}

.home-slider .single-item {
    height: 100vh; /* This should already make it full viewport height */
    min-height: 100vh; /* Add this to ensure it doesn't shrink */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
}

/* Make sure the overlay covers properly */
.home-slider .single-item::before {
    background: #000;
    position: absolute;
    content: "";
    height: 100%;
    width: 100%;
    opacity: .6;
    top: 0;
}

/* Ensure the content container fills the space */
.home-slider .d-table {
    height: 100vh;
    min-height: 100vh;
}

/* Adjust text content positioning */
.slider-text-content {
    width: 100%;
    max-width: 100%;
    padding: 0 20px; /* Add some padding on mobile */
}
/* Ensure the slider container has no extra padding/margin */
.home-slider {
    margin: 0;
    padding: 0;
}


.slider-text-content {
    margin: auto;
    max-width: 1170px;
    padding: 0 15px;
    position: relative;
}
.slider-text-content h1 {
    font-size: 80px;
    margin: 0;
    color: #fff;
    font-weight: bold;
}
.slider-text-content p {
    color: #fff;
    font-size: 28px;
    font-weight: 500;
    margin: 30px 0 40px;
    line-height: 36px;
}
.slider-text-content .slider-btn-one {
	color: #fff4f1;
	font-size: 16px;
	border: 1px solid #fff4f1;
	display: inline-block;
	padding: 6px 20px;
    margin-right: 15px;
}
.slider-text-content .slider-btn-one:hover {
    background-color: #DBE2EF;
    color: #112D4E;
}
.slider-text-content .slider-btn-two {
    background: #DBE2EF;
	color: #112D4E;
	font-size: 16px;
	border: 1px solid #112D4E;
	display: inline-block;
	padding: 6px 20px;
}
.slider-text-content .slider-btn-two:hover {
    background: #DBE2EF;
	color: #112D4E;
    border: 1px solid #112D4E;
}
.home-slider .owl-prev {
    background: #DBE2EF;
	color: #112D4E;	
    position: absolute;
	height: 40px;
	width: 40px;
	text-align: center;
	line-height: 40px;
	top: 50%;
	font-size: 25px;
    left: 0;
}
.home-slider .owl-next {
    background: #DBE2EF;
	color: #112D4E;
    	position: absolute;
	height: 40px;
	width: 40px;
	text-align: center;
	line-height: 40px;
	top: 50%;
	font-size: 25px;
    right: 0;
}
.home-slider .owl-prev:hover, .home-slider .owl-next:hover {
    background-color: #010101;
}
/*
* ------------------------------------------------------------
* 04.ABOUT US SECTION STYLE
* ------------------------------------------------------------
*/
.about-images {
    position: relative;
    text-align: center;
}
.about-images img {
	border: 8px solid #f1f1f1;
	border-radius: 50%;
    box-shadow: 0 0 5px #000;
}
.about-images .about-little-img {
	position: absolute;
	right: 0;
	bottom: 0;
    height: 150px;
    width: 150px;
}
.about-text {
	padding-left: 15px;
}
.about-text h2 {
	font-size: 35px;
	margin-bottom: 20px;
	position: relative;
	padding-bottom: 15px;
}
.about-text h2::before {
	background: #112D4E;
	position: absolute;
	height: 3px;
	left: 0;
	content: "";
	width: 30px;
	bottom: 0;
}
.about-text .button-content {
    margin-top: 30px;
}
.about-text .button-content .black-btn {
    margin-right: 10px;
}
.black-btn {
    background-color: #000;
}
.black-btn:hover {
    background-color: #fd2eb3;
}
/*
* ------------------------------------------------------------
* 05.MENU SECTION STYLE
* ------------------------------------------------------------
*/
.menu-item-content .menu-title {
	margin: 0 0 50px;
	font-size: 25px;
	position: relative;
	padding-bottom: 20px;
	border-bottom: 1px dashed #112D4E;
    color: #112D4E;

}
.menu-item-content .menu-title::after {
    background: #112D4E;
    position: absolute;
    height: 3px;
    left: 0;
    content: "";
    width: 30px;
    bottom: -1px;
}
.single-menu-list {
	position: relative;
	padding: 20px 15px 15px 120px;
	background: #fff;
	box-shadow: 0 0 2px #112D4E;
    margin-bottom: 30px;
    transition: .5s;
    -webkit-transition: .5s;
    border-radius: 4px;
}
.single-menu-list:hover {
    box-shadow: 0 0 10px #ddd;
}
.single-menu-list img {
	width: 90px;
	position: absolute;
	left: 15px;
	top: 17px;
	border-radius: 50%;
}
.single-menu-list .item-price {
	position: absolute;
	right: 15px;
    background: #DBE2EF;
    color: #112D4E;
	font-weight: 600;
	padding: 0 5px;
	border-radius: 5px;
}
.single-menu-list h4 {
	margin: 0 0 10px;
	border-bottom: 1px dashed #ddd;
	padding-bottom: 8px;
	padding-right: 55px;
	font-size: 15px;
	text-transform: uppercase;
	font-weight: bold;
    color: #112D4E;
}
.single-menu-list p {
	margin: 0;
	font-size: 14px;
	line-height: 25px;
    color: #112D4E;

}

.section-title h2 {
	
    color: #112D4E;

}
/*
* ------------------------------------------------------------
* 06.OUR GALLERY SECTION STYLE
* ------------------------------------------------------------
*/
.single-portfolio {
    margin-bottom: 30px;
}
.single-portfolio a {
    display: block;
    position: relative;
}
.single-portfolio .overly {
	background-color: #112D4E;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;
	right: 0;
	text-align: center;
    opacity: .9;
    transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    transition: .5s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -o-transition: .3s;
}
.single-portfolio:hover .overly {
    transform: scale(1);
}
.single-portfolio .overly i {
    color: #fff;
    font-size: 30px;
}
/*
* ------------------------------------------------------------
* 07.OUR TEAM SECTION STYLE
* ------------------------------------------------------------
*/
.our-team-section {
    padding: 100px 0 70px;
}
.single-member {
    margin-bottom: 30px;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}
.single-member img {
	border: 6px solid #fd2eb3;
	border-radius: 50%;
	max-width: 310px;
	margin: auto;
    width: 100%;
}
.single-member .member {
	margin: 30px 0 10px;
	font-weight: bold;
	font-size: 20px;
	text-transform: uppercase;
}
.single-member .member-role {
	color: #fd2eb3;
	font-size: 15px;
	font-weight: bold;
}
.single-member p {
	margin: 20px 0 0;
}
/*
* ------------------------------------------------------------
* 08.OUR TESTIMONIALS SECTION STYLE
* ------------------------------------------------------------
*/
.testimonial-item {
	text-align: center;
	background: #f0f4f7;
	padding: 30px 32px 30px;
    border-bottom: 2px solid #dedede;
    transition: .3s;
    -webkit-transition: .3s;
}
.testimonial-item:hover {
    border-bottom: 2px solid #fd2eb3;
}
.testimonial-item .client-pic {
	width: 100px;
	height: 100px;
	border: 3px solid #fd2eb3;
	border-radius: 50%;
	margin: auto;
	position: relative;
}
.testimonial-item .client-pic i {
	background: #fd2eb3;
	color: #fff;
	height: 30px;
	width: 30px;
	display: inline-block;
	line-height: 30px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	bottom: 0;
}
.testimonial-item .client-pic img {
    width: 100%;
    border-radius: 50%;
}
.testimonial-item p {
	color: #3B3B3B;
	max-width: 800px;
	margin: 20px auto 0;
}
.testimonial-item p strong {
    margin-top: 10px;
    display: inline-block;
}
.owl-theme .owl-nav.disabled + .owl-dots {
    margin-top: 10px; 
}
.owl-theme .owl-dots {
    text-align: center;
    margin-top: 20px;
    -webkit-tap-highlight-color: transparent; 
}
.owl-theme .owl-dots .owl-dot {
    display: inline-block;
    zoom: 1;
    display: inline; 
}
.owl-theme .owl-dots .owl-dot span {
    width: 12px;
    height: 12px;
    margin: 5px 7px;
    background: #D6D6D6;
    display: block;
    transition: opacity 200ms ease;
    -ms-transform: rotate(50deg); /* IE 9 */
    -webkit-transform: rotate(50deg); /* Safari */
    transform: rotate(50deg);
}
.owl-theme .owl-dots .owl-dot.active span, 
.owl-theme .owl-dots .owl-dot:hover span {
    background: #fd2eb3; 
}
/*
* ------------------------------------------------------------
* 9.OUR BLOG SECTION STYLE
* ------------------------------------------------------------
*/
.our-blog {
    padding: 100px 0 70px;
}
.single-article {
    margin-bottom: 30px;
}
.single-article h3 {
	margin: 25px 0 10px;
	line-height: 30px;
}
.single-article img {
    width: 100%;
}
.single-article a:hover img {
    opacity: .6;
}
.single-article h3 a {
	color: #333;
	font-size: 20px;
	font-weight: 600;
}
.single-article h3 a:hover {
    color: #fd2eb3;
}
.single-article .default-button {
	margin-top: 10px;
	font-size: 14px;
	padding: 8px 25px;
}
.page-header-section {
	background-color: #f5f5f5;
	padding: 60px 0;
	margin-top: 65px;
}
.page-header-section h1 {
	color: #fd2eb3;
	margin: 0;
	font-size: 30px;
}
.page-header-section .header-breadcrumb {
    text-align: right;
    background-color: transparent;
    margin: 0;
    padding: 0;
}
.page-header-section .header-breadcrumb li {
	text-transform: uppercase;
    list-style-type: none;
    display: inline-block;
    position: relative;
    top: 8px;
}
.page-header-section .header-breadcrumb li a {
	color: #fd2eb3;
}
.blog-main-area {
    padding: 70px 0;
}
.blog-main-area .single-blog {
    background-color: transparent;
    padding: 0;
    box-shadow: none;
}
.blog-main-area .single-blog:hover {
    box-shadow: none;
}
.blog-main-area .single-blog .article-text {
	padding: 20px 0 0;
}
.blog-main-area .single-blog .article-text .heading {
	font-size: 25px;
}
.post-date {
	background-color: #fd2eb3;
	color: #fff;
	position: absolute;
	top: 15px;
	left: 15px;
	padding: 5px;
	text-align: center;
	line-height: 20px;
}
.search-box {
    margin-bottom: 30px;
}
.search-box form {
    position: relative;
}
.search-box .form-control {
	background: #f0f4f7;
	border-color: #f0f4f7;
	border-radius: 0;
	height: 45px;
    box-shadow: inset 0 0px 1px rgba(0,0,0,.075);
}
.search-box .form-control:hover {
    border-color: #fd2eb3;
}
.search-box .search-btn {
    background-color: #fd2eb3;
    color: #fff;
	position: absolute;
	top: 0;
	right: 0;
	height: 45px;
	font-size: 20px;
    border-radius: 0;
    transition: .3s;
    -webkit-transition: .3s;
}
.search-box .search-btn:hover {
    opacity: .7;
}
.sidebar-area .title {
	color: #1a1a1a;
	font-weight: 600;
	font-size: 20px;
	margin: 0 0 25px;
	border-bottom: 1px dashed #ddd;
	padding: 0 0 10px;
    position: relative;
}
.sidebar-area .title::before {
	background-color: #fd2eb3;
	content: "";
	height: 2px;
	width: 40px;
	position: absolute;
	bottom: -1px;
	left: 0;
}
.recent-post-box {
    margin-bottom: 30px;
}
.recent-post-box .recent-post {
	position: relative;
	padding: 0 0 5px 100px;
	overflow: hidden;
	margin-bottom: 15px;
}
.recent-post-box .recent-post img {
	position: absolute;
	width: 80px;
    height: 62px;
	left: 0;
	top: 5px;
}
.recent-post-box .recent-post:hover img {
    opacity: .7;
}
.recent-post-box .recent-post h4 {
    line-height: 25px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
}
.recent-post-box .recent-post h4 a {
    color: #1a1a1a;
}
.recent-post-box .recent-post h4 a:hover {
    color: #fd2eb3;
}
.recent-post-box .recent-post .post-dt {
	color: #6b6b6b;
	font-size: 14px;
	text-transform: uppercase;
	margin: 0;
}
.recent-post-box .recent-post .comments {
    color: #6b6b6b;
	font-size: 14px;
	text-transform: uppercase;
}
.recent-post-box .recent-post .comments:hover {
    color: #fd2eb3;
}
.recent-post-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.recent-post-box ul li {
    line-height: 25px;
    margin-bottom: 10px;
}
.recent-post-box ul li:last-child {
    margin-bottom: 0;
}
.recent-post-box ul li a {
	color: #1a1a1a;
	font-weight: 600;
	font-size: 14px;
}
.recent-post-box ul li a:hover {
    color: #fd2eb3;
}
.recent-post-box ul li .post-dt {
    color: #6b6b6b;
    font-size: 14px;
    text-transform: uppercase;
    margin: 0;
}
.categories-box {
    margin-bottom: 30px;
}
.categories-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.categories-box ul li {
	line-height: 35px;
	position: relative;
	border-bottom: 1px dashed #ddd;
}
.categories-box ul li a {
    color: #1a1a1a;
    display: block;
}
.categories-box ul li a:hover {
    color: #fd2eb3;
}
.categories-box ul li a span {
	position: absolute;
	right: 0;
	top: 0;
}
.tags-box {
   margin-bottom: 30px; 
}
.tags-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.tags-box ul li {
	display: inline-block;
	margin: 0 5px 8px 0;
}
.tags-box ul li a {
	color: #6b6b6b;
	border: 1px solid #ddd;
	padding: 3px 10px;
	display: inline-block;
	font-size: 14px;
}
.tags-box ul li a:hover {
    background-color: #fd2eb3;
    border: 1px solid #fd2eb3;
    color: #fff;
}
.pagination-area {
	text-align: center;
    margin-top: 30px;
}
.pagination-area .pagination {
	margin: 0;
}
.pagination-area .pagination > li > a {
	background-color: #f0f4f7;
	float: none;
	margin: 2px;
	color: #1a1a1a;
	border-radius: 50%;
	display: inline-block;
	height: 40px;
	width: 40px;
	padding: 0;
	line-height: 38px;
}
.pagination-area .pagination > .active > a {
	background-color: #fd2eb3;
	border-color: #fd2eb3;
    color: #fff;
}
.pagination-area .pagination > li > a:focus, 
.pagination-area .pagination > li > a:hover {
	color: #fff;
	background-color: #fd2eb3;
	border-color: #fd2eb3;
}
.blog-details-content {
    margin-bottom: 40px;
}
.blog-details-content .post-image {
    position: relative;
}
.blog-details-content .post-image img {
    width: 100%;
}
.blog-details-textarea .title {
	font-weight: 600;
	line-height: 28px;
	font-size: 25px;
	margin: 30px 0 20px;
}
.blog-details-textarea p {
    margin-bottom: 25px;
}
.post-admin {
	color: #6b6b6b;
	text-transform: uppercase;
	font-size: 14px;
	margin-bottom: 15px;
}
.post-admin a {
	color: #fd2eb3;
}
.sharing-link {
	list-style: none;
	padding: 0;
	margin: 30px 0 0;
}
.sharing-link li {
	display: inline-block;
	margin: 0 5px 10px 0px;
}
.sharing-link li a i {
	color: #888;
	border: 1px solid #888;
	display: block;
	height: 30px;
	width: 30px;
	text-align: center;
	line-height: 28px;
	border-radius: 3px;
	font-size: 14px;
    transition: .3s;
    -webkit-transition: .3s;
}
.sharing-link li a i:hover {
    background-color: #fd2eb3;
    border: 1px solid #fd2eb3;
    color: #fff;
}
.comments-area .title {
    color: #1a1a1a;
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 30px;
    text-transform: uppercase;
    border-bottom: 1px dashed #ddd;
    padding: 0 0 15px;
    position: relative;
}
.comments-area .title::before {
    background-color: #fd2eb3;
    content: "";
    height: 2px;
    width: 40px;
    position: absolute;
    bottom: -1px;
    left: 0;
}
.comments-area .single-comments {
    margin-bottom: 30px;
}
.comments-area .single-comments .media {
    margin: 0;
    display: flex;
}
.comments-area .single-comments .media-object {
	height: 80px;
	width: 80px;
	max-width: 800px;
	border-radius: 50%;
    border: 1px solid #fd2eb3;
}
.comments-area .single-comments .media-left {
    padding-right: 20px;
}
.comments-area .single-comments .media-body h4 {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 5px;
}
.comments-area .single-comments .media-body .reply {
    color: #6b6b6b;
    text-transform: uppercase;
    font-size: 13px;
}
.comments-area .single-comments .media-body .reply:hover {
    color: #fd2eb3;
}
.comments-area .single-comments .mt {
    margin-top: 30px !important;
}
.comments-area .single-comments .bg {
	background-color: #f0f4f7;
	padding: 10px 15px 10px 15px;
	border-radius: 3px;
}
.comments-area .single-comments .c-date {
    color: #6b6b6b;
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 10px;
}
.comments-form {
    margin-top: 40px;
}
.comments-form .title {
    color: #1a1a1a;
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 30px;
    text-transform: uppercase;
    border-bottom: 1px dashed #ddd;
    padding: 0 0 15px;
    position: relative;
}
.comments-form .title::before {
    background-color: #fd2eb3;
    content: "";
    height: 2px;
    width: 40px;
    position: absolute;
    bottom: -1px;
    left: 0;
}
.comments-form .form-group {
    margin-bottom: 20px;
}
.comments-form .form-control {
    background-color: #f0f4f7;
	border-radius: 0;
	border-color: #f0f4f7;
    border-bottom-color: #caced1;
	height: 42px;
    box-shadow: inset 0 0 1px rgba(0,0,0,.075);
}
.comments-form .form-control:focus {
	border-color: #001F91;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0, 31, 145,.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0, 31, 145,.6);
}
.comments-form textarea.form-control {
    height: auto !important;
}
.comments-form .form-control::-moz-placeholder {
	color: #676767;
}
.comments-form .default-button {
	padding: 8px 25px;
	font-size: 14px;
}
/*
* ------------------------------------------------------------
* 10.OUR SUBSCRIBE SECTION STYLE
* ------------------------------------------------------------
*/
.subscribe-section {
    background-image: url("../../assets/img/background-desc-prod-2x.jpg");
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}
.animations-container {
    display: flex;
    max-width: 65%;
    justify-content: space-between;
    padding-bottom: 20px;
  }
@media (max-width: 499px) {
    .subscribe-section {
        background-image: url("../../assets/img/background-mobile-1x.png");
        background-size: cover;
        background-position: center center;
        background-attachment: fixed;
    }
}
  
.subscribe-form {
    position: relative;
    max-width: 600px;
    margin: auto;
}
.subscribe-form h2 {
    color: #fff;
    margin: 0 0 40px;
    text-align: center;
    font-size: 40px;
}
.subscribe-form form {
    position: relative;
}
.subscribe-form .form-control {
    border-radius: 100px;
    height: 45px;
    padding: 7px 25px;
}
.subscribe-form .subscribe-btn {
    position: absolute;
    top: 0;
    right: 0;
    background: #fd2eb3;
    color: #fff;
    height: 45px;
    border-radius: 100px;
    border-color: #fd2eb3;
    padding: 6px 25px;
    text-transform: uppercase;
}
.subscribe-form .subscribe-btn:hover {
    background: #010101;
    border-color: #010101;
}
/*
* ------------------------------------------------------------
* 11.OUR SUBSCRIBE SECTION STYLE
* ------------------------------------------------------------
*/
.contact-form .form-control {
	height: 40px;
	border-radius: 0;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
	box-shadow: none;
	margin-bottom: 20px;
}
.contact-form textarea.form-control {
    height: auto !important;
}
.contact-form .form-control:focus {
    border-color: #fd2eb3;
}
.contact-form .default-button {
	padding: 8px 25px;
	font-size: 15px;
}
.contact-form {
	background: #f5f5f5;
	padding: 20px;
}
.contact-info h3 {
	margin: 0 0 20px;
	font-size: 22px;
	border-bottom: 1px solid #ddd;
	padding-bottom: 15px;
}
.contact-info p {
    margin-bottom: 20px;
}
.contact-info ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.contact-info ul li {
	position: relative;
	padding: 6px 0 6px 45px;
    margin-bottom: 10px;
}
.contact-info ul li i {
	display: inline-block;
	position: absolute;
	left: 0;
	background: #112D4E;
	color: #fff;
	height: 30px;
	width: 30px;
	line-height: 30px;
	text-align: center;
	top: 0;
    border-radius: 50%;
}
#rc-imageselect, .g-recaptcha {
    transform: scale(0.77);
    -webkit-transform: scale(0.77);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
} 
#contact_send_status {
	color: red;
	margin: 0 0 10px;
}
/*
* ------------------------------------------------------------
* 12.TOP FOOTER SECTION STYLE
* ------------------------------------------------------------
*/
.footer-top {
    padding-top: 50px;
}

.footer-content .social-links {
    margin-top: 15px;
}
.footer-content .social-links li {
    display: inline-block;
    margin-right: 3px;
}
.footer-content .social-links li a i {
	color: #112D4E;
	font-size: 16px;
	border: 1px solid #112D4E;
	height: 35px;
	width: 35px;
	display: inline-block;
	text-align: center;
	line-height: 35px;
	border-radius: 50%;
}
.footer-content .social-links li a i:hover {
    background-color: #112D4E;
    color: #fff;
}
.footer-logo {
    font-family: 'Oleo Script', cursive;
    color: #112D4E;
    font-size: 35px; 
}
.footer-logo:hover {
    color: #112D4E;
}
.footer-content p {
	margin: 10px 0 0;
	font-size: 14px;
	color: #112D4E;
}
.footer-content h4 {
    margin: 15px 0 20px;
}
.footer-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-content .open-hours li {
    line-height: 35px;
    color: #112D4E;
}
.footer-content .contact-list li {
    line-height: 35px;
}
.footer-content .instagram-img {
	text-align: right;
	margin-top: 15px;
}
.footer-content .instagram-img li {
	display: inline-block;
	margin-bottom: 4px;
	width: 80px;
}
.footer-bottom {
    background: #112D4E;
    padding: 15px 0;
}
.footer-bottom p {
    color: #fff;
    margin: 0;
    text-align: center;
}
.footer-bottom p a {
    color: #fff;
}
/*
* ------------------------------------------------------------
* 13. RESERVATION MODAL STYLE
* ------------------------------------------------------------
*/
.reservation-modal {
    padding: 0 !important;
}
.reservation-modal .modal-header {
	padding: 0 15px 0 0;
	border-bottom: 1px solid transparent;
}
.reservation-modal .close {
    font-size: 65px;
    font-weight: normal;
    line-height: 1;
    color: #ff4f5e;
    opacity: 1;
    position: absolute;
    right: 10px;
    top: 0;
    background: transparent;
    border: none;
    z-index: 1;
}
.reservation-modal .close:hover {
    opacity: .6;
    outline: 0;
}
.reservation-modal .modal-dialog {
    margin: auto;
    height: 100%;
    width: 100%;
    max-width: 100%;
}
.reservation-modal .modal-content {
    border-radius: 0;
    border-color: #fff;
    height: 100%;
    width: 100%;
    overflow: auto;
}
.reservation-form {
	max-width: 630px;
	margin: 0 auto 0;
}
.reservation-form .form-header {
	text-align: center;
	margin-bottom: 30px;
}
.reservation-form .form-header h2 {
	text-align: center;
	margin: 0 0 15px;
    font-size: 35px;
}
.reservation-form .form-control {
    height: 55px;
    border-radius: 5px;
}
.reservation-form textarea.form-control {
    height: auto !important;
}
.reservation-form .default-button {
	padding: 12px 25px;
	font-size: 15px;
}
label {
    margin-bottom: 10px;
}
.form-group {
    margin-bottom: 20px;
}
.form-control:focus {
    border-color: unset;
    box-shadow: unset;
}
/*
* ------------------------------------------------------------
* 14.BACK TO TOP BUTTON STYLE
* ------------------------------------------------------------
*/
.back-to-top {
    position: fixed;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    display: none;
}
.back-to-top i {
    background: #DBE2EF;
	color: #112D4E;    border-radius: 1px;
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    width: 35px;
    display: inline-block;
}
.back-to-top i:hover {
    background-color: #010101;
    color: #ffffff;
}
.contact-list  a:hover{   
    color: #010101;
}
.contact-info a:hover{
    color: #010101;
}
.hidden-table {
    display: none;
}

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Montserrat:wght@300;500&display=swap');

.gelato-premium-marquee {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
    padding: 30px 0;
    background: #DBE2EF;
}

/* Gallery Navigation Buttons */
.gallery-navigation {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 15px;
}

.gallery-btn {
    background: #DBE2EF;
    color: #112D4E;
    border: 1px solid #112D4E;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 500;
    transition: all 0.3s;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 14px;
}

.gallery-btn:hover {
    background: #112D4E;
    color: white;
    text-decoration: none;
}

.gallery-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Remove default button styles */
.gallery-section .btn {
    background: none;
    border: none;
    box-shadow: none;
}

.gallery-section .btn-primary, 
.gallery-section .btn-success {
    background: none;
    color: inherit;
}

.marquee-track {
    display: inline-flex;
    animation: marquee 620s linear infinite;
}

.marquee-content {
    flex-shrink: 0;
    font: 400 6vw 'DM Serif Display', serif;
    color: #112D4E;
    letter-spacing: 1.5px;
    position: relative;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.05);
    
    /* Gelato-inspired texture */
    background: linear-gradient(
    to right,
    #2774ae,#002E5D,#002E5D
  );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    
    /* Creamy shadow */
    text-shadow: 
        0 2px 4px rgba(230, 123, 123, 0.2),
        0 4px 8px rgba(230, 123, 123, 0.1);
}

/* Delicate dot separator */
.marquee-content::after {
    content: '•';
    position: absolute;
    right: 80px;
    color: #f5c9c9;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    font-size: 1.2em;
}

/* Creamy underline effect */
.gelato-premium-marquee::before {
    content: '';
    position: absolute;
    bottom: 25px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(
    to right,
    #2774ae,#002E5D,#002E5D
  );
}

@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-100% - 100px)); }
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .marquee-content { 
        font-size: 5vw;
        padding-right: 80px;
    }
    .marquee-content::after { right: 60px; }
}
@media (max-width: 768px) {
    .marquee-content { 
        font-size: 7vw;
        padding-right: 30px;
    }
    .marquee-content::after { right: 40px; }
}
@media (max-width: 480px) {
    .marquee-content { 
        font-size: 9vw;
        padding-right: 10px;
    }
    .marquee-content::after { right: 30px; }
    .gelato-premium-marquee { padding: 20px 0; }
}

/* Menu Section Styling */
.menu-section {
    padding: 80px 0;
}

.menu-carousel-title {
    text-align: center;
    margin-bottom: 30px;
    color: #112D4E;
    font-family: 'Cormorant Garamond', serif;
    font-size: 32px;
    font-weight: 600;
    position: relative;
    padding-bottom: 15px;
}

.menu-carousel-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 2px;
    background: #112D4E;
}

.menu-carousel-container {
    background: linear-gradient(
    to right,
    #2774ae,#002E5D,#002E5D
  );
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(230, 123, 123, 0.1);
    margin-bottom: 50px;
    position: relative;
}

.menu-carousel-container::after {
    content: '';
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 1px;
    background: rgba(230, 123, 123, 0.2);
}

.menu-carousel .menu-item {
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    background: #fff;
    border-radius: 8px;
    margin: 10px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.menu-carousel .menu-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(230, 123, 123, 0.2);
}

.menu-carousel .menu-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
    border: 1px solid #f5e1e1;
}

.menu-carousel .menu-item h4 {
    color: #112D4E;
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}

.menu-carousel .menu-item p {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
    min-height: 60px;
}

.menu-carousel .menu-item .price {
    color: #112D4E;
    font-weight: bold;
    font-size: 18px;
    display: block;
    margin-top: 10px;
}

/* Carousel Navigation */
.carousel-navigation {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    gap: 15px;
}

.carousel-btn {
    background: #DBE2EF;
    color: #112D4E;
    border: 1px solid #112D4E;
    padding: 8px 20px;
    border-radius: 30px;
    font-weight: 500;
    transition: all 0.3s;
    cursor: pointer;
}

.carousel-btn:hover {
    background: #112D4E;
    color: white;
}

.carousel-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .menu-carousel-container {
        padding: 20px;
    }
    
    .menu-carousel .menu-item {
        padding: 15px;
    }
    
    .menu-carousel .menu-item img {
        height: 150px;
    }
    
    .menu-carousel-title {
        font-size: 28px;
    }
}