/*------------------------------------------------------------------
[Table of contents]
1. HTML5 display-role reset for older browsers
  1.1 css reset
  1.2 global css
2. Header css
3. Banner css
4. About css
5. Today's Special Menu css
6. Our Menu css
7. Video Menu css
8. Everyday's Menu css
9. Team css
10. Food Gallery css
11. Testimonial css
12. Blog css
13. Catering css
14. Reservation css
15. Footer css
16. Copyright css
17. Back To Top css
-------------------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css?family=maiandra-gd|Playball|Poppins|Chicle:300,400,500,600,700');

/* ==================================================
    1. HTML5 display-role reset for older browsers
===================================================== */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

a,
input,
button,
select,
textarea {
    outline: none;
}

::-webkit-input-placeholder {
    color: #581B32;
}

:-moz-placeholder {
    /* Firefox 18- */
    color: #581B32;
}

::-moz-placeholder {
    /* Firefox 19+ */
    color: #581B32;
}

:-ms-input-placeholder {
    color: #581B32;
}

a {
    outline: none;
    text-decoration: none;
    color: #b8a006;  /* stars */
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;   /* testemen stars */
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
}

a:hover,
a:active,
a:focus {
    text-decoration: none;
    color: #040404;
}

::-moz-selection {
    color: #fff;
    background: #d9d9d9;
}

::selection {
    color: #fff;
    background: #d9d9d9;
}


/* 1.1 css reset */

.clear {
    clear: both;
}

.no-padding {
    padding: 0 !important;
}

.no-margin {
    margin: 0 !important;
}

img {
    max-width: 100%;
    vertical-align: center;
}


/* 1.2 Global CSS */

body {
    margin: 0;
    font-size: 14px;
    color: #b9b7b7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    word-wrap: break-word;
    /*font-family: 'Playball', cursive;*/
    font-family: 'maiandra-gd', sans-serif;
    background-color:#8872C5            /* background color site */
}

h1 {
    font-size: 115px;
    line-height: 100px;
}

h2 {
    font-size: 44px;
    line-height: 64px;
    color: #fffc
}

h3 {
    font-size: 19px;
    line-height: 34px;
}

h4 {
    font-size: 18px;
    line-height: 27px;
}

h5 {
    font-size: 16px;
    line-height: 27px;
}

h6 {
    font-size: 14px;
    line-height: 27px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 10;
    font-weight: 400;
}

p {
    font-size: 14px;
    line-height: 27px;
    margin: 0 0 15px;
}

.mar-top-320 {
    margin-top: 320px;
}

.mar-bottom-25 {
    margin-bottom: 25px;
}

.pad-top-100 {
    padding-top: 170px;  /* отступ от названия галерии */
}

.pad-bottom-100 {
    padding-bottom: 1px;
}

.pad-bottom-70 {
    padding-bottom: 70px;
}

.no-pad-left {
    padding-left: 0;
}

.no-pad-right {
    padding-right: 0;
}

.pr {
    position: relative;
}

.parallax-fix {
    position: relative;
    background-size: cover !important;
    overflow: hidden;
    background-position: center center;
    background-repeat: no-repeat !important;
    transition-duration: .2s;
    -moz-transition-duration: .2s;
    -webkit-transition-duration: .2s;
    -o-transition-duration: .2s;
    transition-timing-function: ease-in;
    -moz-transition-timing-function: ease-in;
    -webkit-transition-timing-function: ease-in;
    -o-transition-timing-function: ease-in;
    background-attachment: fixed !important
}

.parallax-fix .row {
    position: relative;
    z-index: 2;
    height: 100%;
}

.block-title {
    color: #d9d9d9;
    margin: 0;
    text-align: center;
    font-family: 'maiandra-gd', cursive;
    letter-spacing: 1.62px;
}

.title-caption {
    letter-spacing: 0.16px;
    padding: 20px 120px;
}

.color-white {
    color: #fff;
}

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


/* ===================================
    2. Header CSS
====================================== */

.header-block {
    position: fixed;
    z-index: 11;
    width: 100%;
    top: 0;
    left: 0;
}

.header-block .navbar-default {
    border: 0;
    background-color: transparent;
    margin: 0;
}

.header-block .navbar-brand {
    margin: 0 !important;
    padding: 23px 0 21px;
    display: inline-block;
    line-height: normal;
    font-size: 100%;
    height: 100%;
}

.header-block .menuBar ul li a {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1.6px;
    padding: 43px 0px 15px;
    position: relative;
    margin: 0 20px;
    -webkit-transition: color 0.4s;
    transition: color 0.4s;
    font-weight: 500;    
    font-size: 16px;
}

.header-block .menuBar ul li:last-child a {
    margin-right: 0;
}

.header-block .menuBar ul li:first-child a {
    margin-left: 0;
}

.header-block .menuBar ul li a:hover,
.header-block .menuBar ul li a:focus,
.header-block .menuBar ul li.active a {
    color: #f098e0;
    background-color: transparent;
}

.header-block .menuBar ul li.active a,
.header-block .menuBar ul li.active a:hover,
.header-block .menuBar ul li.active a:focus {
    color: #f098e0;
    background-color: transparent;
}

.header-block .menuBar ul li.active a::after,
.header-block .menuBar ul li.active a::before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
}

.header-block .menuBar ul li.active a::before {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.header-block .menuBar ul li a:hover::before,
.header-block .menuBar ul li a:focus::before {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
}

.header-block .menuBar ul li a::before,
.header-block .menuBar ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
    -webkit-transform-origin: center left;
    transform-origin: center left;
    -webkit-transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
    transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.header-block .menuBar ul li a::before {
    background: #b5b5b5;
    -webkit-transition-delay: 0.4s;
    transition-delay: 0.4s;
}

.header-block .menuBar ul li a::after {
    background: #f098e0;
}

.navbar-brand>img {
    max-width: 251px;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

.fixed .navbar-brand>img {
    max-width: 150px;
}

.fixed .menuBar ul li a {
    padding: 30px 0px 13px;
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

.fixed {
    background-color: #8872C5;             /* Код шапки */
    -webkit-transition: all 0.5s ease-in;
    -moz-transition: all 0.5s ease-in;
    -ms-transition: all 0.5s ease-in;
    transition: all 0.5s ease-in;
}

.fixed .navbar-brand {
    padding: 14px 0 12px;
}

.menuBar {
    padding: 0 50px;
}
/* ===================================
    3. Banner CSS
====================================== */

.banner {
    display: inline-block;
    height: 768px;
    height: 100vh;
    min-height: 800px;
    background-color:#827b5b00;
    background-position: center top;
    background-size: cover;
    padding: 0;
    overflow: hidden;
    width: 100%;
    position: relative;
    vertical-align: top;
}

.banner .container {
    height: 100%;
}

.banner .col-lg-12 {
    height: 100%;
}

.banner-text {
    display: table;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.banner-cell {
    display: table-cell;
    vertical-align: middle;
    color: #fff;
}

.banner-text h1 {
    font-family: 'chicle', cursive;
    letter-spacing: 2.7px;
    position: relative;
    display: inline-block;
}

.banner-text h1 img {
    position: absolute;
    top: 58px;
    left: -15px;
}

.banner-text h3 {
    font-size: 34px;
    color: #cdcdcd;
    font-family: 'Galada', cursive;
}

.banner-text p {
    color: #e3e3e3;
    font-size: 20px;
    font-family: 'maiandra-gd', sans-serif;
    font-weight: 600;
    margin-bottom: 33px;
}

.orange-btn {
    min-width: 219px;
    padding: 16.5px 20px;
    display: inline-block;
    text-align: center;
    font-weight: 800;
    color: #fff;
    font-size: 18px;
    letter-spacing: 1.08px;
    text-transform: uppercase;
    position: relative;
}

.orange-btn.empty-btn {
    background-color: transparent;
    border-color: #d9d9d9;
    color: #d9d9d9;
}

.orange-btn:hover {
    color: #d9d9d9;
}

.orange-btn.empty-btn:hover {
    color: #fff;
}

.banner-buttons .empty-btn {
    margin-left: 16px;
}

.banner-buttons .orange-btn {
    margin-top: 34px;
}

.orange-btn:before {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    border: 2px solid transparent;
}

.orange-btn.empty-btn:before {
    border: 2px solid #d9d9d9;
}

.orange-btn:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #d9d9d9;
}

.orange-btn.empty-btn:after {
    background: transparent;
    width: 0%;
}

.orange-btn:hover:before {
    border-color: #d9d9d9;
}

.orange-btn:hover:after {
    width: 0%;
}

.orange-btn.empty-btn:hover:after {
    background: #d9d9d9;
    width: 100%;
}

.banner-text h2 {
    color: #d9d9d9;
    font-family: 'Chicle', cursive;
    position: relative;
    top: -14px;
    margin-bottom: 7px;
}

.side-img {
    width: 75px;
    display: inline-block;
    height: 14px;
}

.side-img i {
    margin: 0;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    margin-bottom: 1px;
    border: 0;
    border-top: 1px solid #d9d9d9;
    height: 1px;
    display: inline-block;
    width: 75px;
    float: left;
}

.side-img i:first-child,
.side-img i:last-child {
    width: 65px;
}

.side-img.left-side-img i:first-child,
.side-img.left-side-img i:last-child {
    width: 65px;
    margin: 0 0 1px 10px;
}


/* ===================================
    4. About CSS
====================================== */

.about-block .block-title {
    text-align: left;
}

.about-block h3 {
    font-weight: 100;
    color: #581B32;
    position: relative;
    letter-spacing: 0.72px;
    padding: 6px 0 25px;
    
}


.about-block p {
    font-size: 20px;
    letter-spacing: 0.5px;
}



.about-block p:last-of-type {
    margin: 10;
}

.about-block {
    margin-bottom: 15px;
    /* background-color: rgba(0, 0, 0, 0.35); */
}


/* ===================================
    5. Today's Special Menu CSS
====================================== */

/* Стили для блока с карточками */
.special-menu-block {
    display: inline-block;
    width: 100%;
    position: relative;
    vertical-align: top;
    max-height: 518px;
    background-position: center top;
    background-size: cover;
}

/* Основные стили для карточки */
.spcl-menu {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.spcl-menu .item {
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
    width: 30%; /* Ширина каждой карточки */
    margin-bottom: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Эффект при наведении на карточку */
.spcl-menu .item:hover {
    transform: translateY(-10px); /* Поднимание карточки вверх */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* Увеличение тени */
}

/* Изображение карточки */
.spcl-menu .item figure img {
    width: 100%;
    height: 200px; /* Высота изображения */
    object-fit: cover; /* Обрезка изображения */
}

/* Стили для текста внутри карточки */
.spcl-text {
    padding: 20px;
    text-align: center;
}

.spcl-text p {
    color: #581B32;
    line-height: 23px;
    padding-top: 4px;
    margin-bottom: 2px;
}

.spcl-menu-btm {
    margin-top: 10px;
    border-top: 1px dashed rgba(113, 113, 113, 0.33);
    padding-top: 15px;
}

.spcl-menu-btm .stars {
    list-style-type: none;
    padding: 0;
    margin-top: 10px;
}

.spcl-menu-btm .stars li {
    display: inline-block;
    color: #e39918;
    font-size: 18px;
}

/* Убираем ненужные отступы */
.spcl-menu .col-lg-4 {
    padding: 0 9px;
}



/* ===================================
    6. Our Menu CSS
====================================== */

.our-menu-block:after {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    /* background-image: url('../images/back-172.png'); */
    background-repeat: no-repeat;
    background-position: bottom left;
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.menu-list h3 {
    color: #581B32;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.menu-list h5 {
    letter-spacing: 0.16px;
}

.menu-list ul {
    padding: 10px 0 0;
    margin: 0;
    list-style-type: none;
}

.menu-list ul li {
    padding-top: 30px;
}

.menu-list ul li figure {
    display: inline-block;
    width: 75px;
    border-radius: 50%;
    overflow: hidden;
    float: left;    
    margin-top: 9px;
}

.menu-list ul li figure img {
    border-radius: 50%;
    overflow: hidden;
}

.menu-list ul li .menu-info {
    display: table;
    padding-left: 20px;
    position: relative;
}

.menu-info h5 {
    font-weight: 800;
    color: #581B32;
    display: inline-block;
    background-color: #fff;
    z-index: 1;
    position: relative;
    padding-right: 5px;
}

.menu-info h5.menu-price {
    position: absolute;
    top: 3px;
    right: 0;
    padding-left: 5px;
    color: #d9d9d9;
}

.menu-info:before {
    content: '';
    background-image: url(../images/dots.jpg);
    background-repeat: repeat-x;
    position: relative;
    display: block;
    height: 3px;
    top: 15px;
}

/* .our-menu-block .col-lg-6:first-of-type,
.our-menu-block .col-lg-6:first-of-type+div {
    margin: 18px 0 40px;
} */

.our-menu-list {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    border: 10px solid #d9d9d9;
    padding: 30px;
    margin-top: 68px;
    background-image: url('../images/menu-separator.png');
    background-repeat: no-repeat;
    background-position: center center;
}

.our-menu-list:before {
    content: '';
    display: inline-block;
    background-position: top left;
    width: 166px;
    min-height: 241px;
    position: absolute;
    background-size: 100%;
    bottom: 100%;
    background-repeat: no-repeat;
    right: -15px;
}

.no-pad-left .menu-list {
    padding-right: 35px;
}

.no-pad-right .menu-list {
    padding-left: 20px;
}



/* ===================================
    8. Everyday's Menu CSS
====================================== */

.tab-content .item figure {
    margin-bottom: 100px;
}

.tab-menu .nav-tabs>li.active>a,
.tab-menu .nav-tabs>li.active>a:focus,
.tab-menu .nav-tabs>li.active>a:hover {
    border: 0;
    background-color: transparent;
    color: #fff;
}

.tab-menu .nav-tabs > li {
    float: left;
    display: inline-block;
    margin: 0;
    background-color: #eaeaea;
    overflow: visible;
}

.tab-menu .nav-tabs {
    border: 0;
    text-align: center;
    margin: 13px auto;
    display: inline-block;
}

.tab-menu .nav>li>a:focus,
.tab-menu .nav>li>a:hover {
    background-color: transparent;
}

.tab-menu .nav-tabs>li>a {
    border: 0;
    color: #581B32;
    font-size: 24px;
    font-family: 'maiandra-gd', cursive;
    letter-spacing: 1.62px;
    text-transform: capitalize;
    margin: 0 15px;
    overflow: visible;    
    font-weight: 400;
}

.tab-menu .nav-tabs>li:first-child>a {
    /* margin-right: 0; */
}

.tab-menu .nav-tabs>li:last-child>a {
    /*margin-right: 0;*/
}

.tab-menu .tab-content > .tab-pane {
    display: block;
    width: 100%;
    position: absolute;
    height: 0;
    top: 0;
}

.tab-menu .tab-content > .active {
    height: auto;
    position: static;
}

.tab-menu .nav-tabs>li>a:after {
    /* content: ''; */
    width: 8px;
    height: 54px;
    background-color: #fff;
    display: inline-block;
    position: absolute;
    top: 0;
    right: -19px;
    transform: skew(-15deg);
    z-index: 1;
}

.tab-menu .nav-tabs>li:last-child>a:after {
    width: 0;
}

.tab-menu .owl-controls {
    position: absolute;
    top: 40%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 100%;
}

.tab-menu .owl-controls .owl-prev {
    font-size: 0;
    float: left;
    position: relative;
    left: -90px;
}

.tab-menu .owl-controls .owl-next {
    font-size: 0;
    float: right;
    position: relative;
    right: -90px;
}

.tab-menu .owl-nav .owl-prev:before {
    font-family: FontAwesome;
    content: "\f053";
    display: inline-block;
    font-size: 22px;
    color: #ffffff;
    width: 47px;
    height: 47px;
    background-color: #d9d9d9;
    text-align: center;
    line-height: 47px;
}

.tab-menu .owl-nav .owl-next:before {
    font-family: FontAwesome;
    content: "\f054";
    display: inline-block;
    font-size: 22px;
    color: #ffffff;
    width: 47px;
    height: 47px;
    background-color: #d9d9d9;
    text-align: center;
    line-height: 47px;
}

.tab-menu .owl-carousel .owl-stage-outer {
    padding: 0 0 30px;
}

.tab-content {
    position: relative;
}

.tab-menu .nav-tabs > li:first-child {
    border-bottom-left-radius: 50px;
    border-top-left-radius: 50px;
    position: relative;
    left: 7px;
}

.tab-menu .nav-tabs > li:last-child {
    border-bottom-right-radius: 50px;
    border-top-right-radius: 50px;
    position: relative;
    left: -7px;
}

.tab-menu .nav-tabs > li.active {
    background-color: #d9d9d9;
}

.tab-menu {
    text-align: center;
}

.tab-menu li:nth-child(2) a {
    -webkit-transform: skewX(15deg);
    -moz-transform: skewX(15deg);
    -ms-transform: skewX(15deg);
    -o-transform: skewX(15deg);
    transform: skewX(15deg);
}

.tab-menu li:nth-child(2) {
    -webkit-transform: skewX(-15deg);
    -moz-transform: skewX(-15deg);
    -ms-transform: skewX(-15deg);
    -o-transform: skewX(-15deg);
    transform: skewX(-15deg);
    border-left: 5px solid #ffffff;
    border-right: 5px solid #ffffff;
    position: relative;
    z-index: 1;
}


/* ===================================
    9. Team CSS
====================================== */

/* .team-block {
    display: inline-block;
    background-image: url('../images/1920800.jpg');
    background-position: center top;
    background-size: cover;
    width: 100%;
    position: relative;
    vertical-align: top;
}
 */
/* .team-block:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.50);
    position: absolute;
    top: 0;
    left: 0;
} */

.team-info {
    display: table;
    padding: 47px 20px 20px;
    background-color: #000000;
}

.team-text figure {
    display: inline-block;
    float: center;
    max-width: 202px;
    overflow: hidden;
}

.team-text {
    background-color: #000000;
    overflow: hidden;
}

.team-info h3 {
    text-transform: uppercase;
}

.team-info h4 {
    font-weight: 700;
    padding-bottom: 20px;
    position: relative;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.team-info strong {
    font-weight: 600;
}

.social-icons {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.social-icons li {
    display: inline-block;
    margin-right: 14px;
    font-size: 18px;
}

.team-info h4:after {
    content: '';
    display: block;
    width: 25px;
    height: 5px;
    background-color: #e3e3e3;
    position: absolute;
    bottom: 0;
    left: 0;
}

#owl-team {
    margin-top: 25px;
}

/* .test-video-box figure {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #CCAA51;
} */


.owl-carousel .owl-video-play-icon {
    /*background-color: #717171;*/
    background-image: none;
}

.team-video {
    width: 100%;
    height: 100%;
    background-color: #000;
    display: none;
}

.owl-team-box {
    position: relative;
}

.owl-team-box .owl-controls {
    position: absolute;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    width: 100%;
    z-index: -1;
}

.owl-team-box .owl-controls .owl-prev {
    font-size: 0;
    float: left;
    position: relative;
    left: -90px;
    display: block !important;
}

.owl-team-box .owl-controls .owl-next {
    font-size: 0;
    float: right;
    position: relative;
    right: -90px;
    display: block !important;
}

.owl-team-box .owl-nav .owl-prev:before {
    font-family: FontAwesome;
    content: "\f053";
    display: inline-block;
    font-size: 22px;
    color: #ffffff;
    width: 47px;
    height: 47px;
    background-color: #d9d9d9;
    text-align: center;
    line-height: 47px;
}

.owl-team-box .owl-nav .owl-next:before {
    font-family: FontAwesome;
    content: "\f054";
    display: inline-block;
    font-size: 22px;
    color: #ffffff;
    width: 47px;
    height: 47px;
    background-color: #d9d9d9;
    text-align: center;
    line-height: 47px;
}


/* ===================================
    10. Food Gallery CSS
====================================== */

/* Контейнер карусели */
.carousel {
    position: relative;
    width: 100%;
    height: 400px;  /* Установим стандартную высоту */
    margin-top: 48px;
    margin-bottom: 48px;
    overflow: hidden;  /* Обрезаем все, что выходит за пределы */
}

/* Слайды карусели */
.carousel .carousel-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;  /* Слайды не будут на весь экран, ширина 80% */
    max-width: 834px; /* Максимальная ширина слайда */
    height: 100%; /* Высота будет пропорциональна */
    transform: translate(-50%, -50%); /* Центрируем слайды */
    opacity: 0;  /* Начальная прозрачность */
    visibility: hidden;  /* Слайды скрыты по умолчанию */
    transition: transform 0.4s ease, opacity 0.4s ease; /* Уменьшаем время анимации */
}

/* Изображения внутри слайдов */
.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;  /* Чтобы изображение покрывало всю область */
    border-radius: 7px;
}

/* Активный слайд */
.carousel-item.active {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);  /* Простой масштаб */
    z-index: 1;
}

/* Следующий слайд */
.carousel-item.next {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.8); /* Уменьшаем размер для следующего */
    z-index: 0;
}

/* Предыдущий слайд */
.carousel-item.prev {
    opacity: 0.3;
    transform: translate(-50%, -50%) scale(0.8); /* Уменьшаем размер для предыдущего */
    z-index: 0;
}

/* ===================================
    11. Testimonial CSS
====================================== */

* .testimonial-block {
    display: inline-block;
    background-image: url('../images/back-750.png');
    background-position: center top;
    background-size: cover;
    width: 100%;
    position: relative;
    vertical-align: top;
}
.testimonial-block {
    background: url('path/to/your/background.jpg') center center no-repeat;
    background-size: cover;
    position: relative;
    padding: 50px 0;
    color: #ffffff;
}

.testimonial-block .block-title {
    font-size: 2em;
    margin-bottom: 20px;
}

.testimonial-slider .item {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.testimonial-slider .item p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.testimonial-slider .stars {
    list-style: none;
    padding: 0;
    display: inline-block;
}

.testimonial-slider .stars li {
    display: inline-block;
    margin: 0 2px;
}

.owl-carousel .owl-nav button {
    background: none;
    border: none;
    font-size: 30px;
    color: #ffffff;
    transition: 0.3s;
}

.owl-carousel .owl-nav button:hover {
    color: #f098e0;
}

.owl-dot {
    display: none !important;
}



/* ===================================
    12. Blog CSS
====================================== */

.blog-box h4 {
    text-transform: uppercase;
    font-weight: 600;
    margin: 27px 0 11px;
}

.blog-box p {
    font-size: 16px;
    margin: 15px 0 0;
    letter-spacing: 0.16px;
}

.blog-box {
    position: absolute;
    top: -45px;
    left: -30px;    
    max-width: 570px;
}

.blog-box figure {
    background-color: #000;
    position: relative;
}

.blog-box figure img {
    opacity: 0.5;
}

.blog-box figure:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 97%;
    height: 94%;
    border: 2px solid #fff;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.blog-row {
    display: inline-block;
    width: 100%;
    height: 80%;
    background-color: #fff;
    border: 10px solid #eaeaea;
    padding: 20px;
    margin-bottom: 80px;
}

.blog-row:last-of-type {
    margin-bottom: 20px;
}

.blog-date {
    display: inline-block;
    float: left;
    margin: 0 24px;
    background-color: #d9d9d9;
    color: #fff;
    width: 63px;
    height: 74px;
    text-align: center;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.14px;
    padding: 15px 0;
    position: relative;
}

.blog-text {
    display: table;
}

.blog-date span {
    display: block;
    font-size: 28px;
    font-weight: 600;
    line-height: 28px;
}

.blog-date:before {
    content: '';
    display: inline-block;
    position: absolute;
    width: 85%;
    height: 85%;
    border: 1px dotted #fff;
    top: 6px;
    left: 5px;
}

.blog-text h4 {
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 10px;
}

.blog-text hr {
    border-top: 1px dashed rgba(113, 113, 113, 0.20);
}

.blog-text p {
    font-size: 16px;
}

.blog-text p:last-of-type {
    margin: 0;
}

.blog-row-right .blog-box {
    left: auto;
    right: -30px;
}

.blog-row-right .blog-date {
    margin-left: 0;
}

.blog-row-right .blog-text {
    margin-right: 30px;
}

.blog-row:first-of-type {
    margin-top: 28px;
}


/* ===================================
    13. Catering CSS
====================================== */

/* .catering-block {
    display: inline-block;
    background-image: url('../images/back-500.png');
    background-position: center top;
    background-size: cover;
    width: 100%;
    position: relative;
    vertical-align: top;
} */

.catering-block:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    /* background-color: rgba(0, 0, 0, 0.60); */
    position: absolute;
    top: 0;
    left: 0;
}

.catering-block .orange-btn {
    padding: 22px 26px;
}

.catering-block .block-title {
    margin: 20px 0 47px;
}

.catering-block .col-lg-12 {
    margin: 10px 0;
}


/* ===================================
    14. Reservation CSS
====================================== */

.reservation-block .form-box input,
.reservation-block .form-box select {
    width: 100%;
    border: 2px solid #eaeaea;
    height: 61px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 600;
    color: #581B32;
    letter-spacing: 0.224px;
    padding: 5px 30px;
    border-radius: 0;
    opacity: 1;
    position: relative;
}

.reservation-block .form-box {
    margin-bottom: 30px;
}

.reservation-block .col-lg-6 .form-box {
    margin-bottom: 10px;
}

.reservation-block .form-box select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: #fff url(../images/selectDown.png) no-repeat right 23px center;
    background-size: 14px;
    cursor: pointer;
}

.reservation-block .form-box select::-ms-expand{
    display: none;
}

#reservation:before {
    content: '';
    display: inline-block;
    position: absolute;
    background-image: url('http://placehold.it/562x786');
    background-repeat: no-repeat;
    background-position: bottom -70px left -70px;
    width: 100%;
    height: 100%;
    background-size: 25%;
    top: 0;
    left: 0;
}

#reservation {
    position: relative
}

.reserve-book-btn {
    margin: 42px 0 65px;
}

.reservation-block .form-box input::-webkit-input-placeholder {
   color: #581B32; 
   opacity: 1;
}

.reservation-block .form-box input:-moz-placeholder {
   color: #581B32;   
   opacity: 1;
}

.reservation-block .form-box input::-moz-placeholder {
   color: #581B32;   
   opacity: 1;
}

.reservation-block .form-box input:-ms-input-placeholder {  
   color: #581B32;   
   opacity: 1;
}


/* ===================================
    15. Footer CSS
====================================== */

/* Основной блок футера */
.footer-block {
    background-image: url('../images/1920800.jpg');
    background-position: center;
    background-size: cover;
    width: 100%;
    padding: 50px 0;
    position: relative;
    color: #fff;
    z-index: 1;
}

/* Темный фон для читаемости текста */
.footer-block:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

/* Контейнер для футера */
.container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Контейнер для всех элементов футера */
.footer-content {
    display: flex;
    justify-content: space-between; /* Контейнер будет распределять колонки по краям */
    align-items: flex-start;
    gap: 50px; /* Пространство между колонками */
    flex-wrap: wrap;
}

/* Настройки для каждой колонки */
.footer-column {
    /* flex: 1 1 0%; */ /* Каждая колонка будет занимать 45% пространства */
    box-sizing: border-box;
}

/* Контакты */
.contact-us i, .opening-hours i {
    font-size: 20px;
    margin-right: 10px;
    color: rgba(255, 255, 255, 0.6);
}

/* Стили для заголовков */
.footer-title {
    font-size: 24px;
    margin-bottom: 20px;
    font-family: 'Maiandra GD', cursive;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Стили для часов работы */
.opening-hours h6 {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
}

/* Стили для списка */
.footer-column ul {
    padding-left: 0;
    list-style-type: none;
}

.footer-column ul li {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 16px;
}

.footer-column ul li a {
    color: #fff;
    text-decoration: none;
}

.footer-column ul li a:hover {
    color: #dbd3c1;
}

/* ===================================
    16. Copyright CSS
====================================== */

.copyright-block {
    border-top: 2px dotted #fff;
}

.copyright-block .copy-title {
    text-transform: uppercase;
    letter-spacing: 0.84px;
    padding: 11px 0 26px;
    margin: 0;
}

.social-media-icons ul li {
    display: inline-block;
    font-size: 23px;
    vertical-align: top;
}

.social-media-icons ul li a {
    padding: 0 23px;
}

.social-media-icons {
    margin-top: 35px;
}

.copy-title a {
    color: #fff;
}

.copy-title a:hover {
    color: #B6B0B0;
}


/* ===================================
    17. Back To Top CSS
====================================== */

.back-to-top {
    display: inline-block;
    height: 40px;
    width: 40px;
    position: fixed;
    bottom: -30px;
    right: 30px;
    z-index: 10;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    white-space: nowrap;
    background-color: #d9d9d9;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    transition: all 0.8s ease;
    text-align: center;
    line-height: 40px;
}

.back-to-top:hover,
.back-to-top:focus,
.back-to-top:active {
    background-color: #ffffff;
}

.back-to-top i {
    color: #fff;
    font-size: 16px;
}

.back-to-top.cd-is-visible {
    visibility: visible;
    opacity: 1;
    bottom: 30px;
}

.back-to-top.cd-is-visible,
.back-to-top.cd-fade-out,
.no-touch .back-to-top:hover {
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

/* Стили для баннера */
#banner {
    position: relative;
    height: 100vh; /* Высота баннера - вся видимая область */
    overflow: hidden;
}

/* Видео фон */
.video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2; /* Видео будет на самом фоне */
}

/* Настройка видео */
.video-background video {
    object-fit: cover; /* Видео растягивается на весь экран */
    width: 100%;
    height: 100%;
}

/* Эффект наложения градиента и блюра */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(136, 114, 197, 0.3), rgba(136, 114, 197, 0.6)); /* Плавный переход от верхнего цвета к нижнему, с меньшей прозрачностью */
    backdrop-filter: blur(5px); /* Уменьшаем эффект блюра */
    z-index: -1; /* Overlay будет поверх видео, но ниже текста */
    transition: background 1s ease; /* Плавный переход только для фона */
}

/* Плавный переход при наведении на баннер */
#banner:hover .overlay {
    background: linear-gradient(to bottom, rgba(136, 114, 197, 0.4), rgba(136, 114, 197, 0.8)); /* Увеличиваем насыщенность цветов при наведении */
    backdrop-filter: blur(8px); /* Немного увеличиваем блюр при наведении */
}

/* Стили для текста */
.banner-text {
    position: relative;
    z-index: 1; /* Текст будет поверх всего */
    color: rgb(213, 132, 34);
}

h1, h2 {
    text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); /* Тень для текста */
}

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

body {
    height: 100vh;
    overflow: auto;
    position: relative;
}

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

body {
    height: 200vh; /* Увеличиваем высоту страницы, чтобы был эффект прокрутки */
    overflow-y: scroll;
    position: relative;
}


#video-menu {
    position: relative;
    color: white;
    padding-top: 1px;
    padding-bottom: 100px;
  }
  
  .video-menu-block {
    position: relative;
    text-align: center;
  }
  
  .block-title {
    font-size: 36px;
    font-weight: bold;
    color: #a48e50;
    margin-bottom: 30px;
  }
  
  
  .video-container {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
  }
  
  .video-container iframe {
    width: 100%;
    height: 450px;
    border: none;
  }
  
  .text-align-center {
    text-align: center;
  }
  
  .parallax-fix {
    position: relative;
    z-index: 1;
  }

/* Основные стили для чата */
#chat-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 300px;
    background-color: #f1f1f1;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 1000; /* Чат поверх всех окон */
}

.chat-header {
    background-color: #96C5F7;
    color: white;
    padding: 10px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-body {
    padding: 15px;
    font-size: 14px;
    color: #333;
}

.chat-footer {
    padding: 10px;
    text-align: center;
}

#whatsapp-btn {
    background-color: #25D366;
    color: white;
    padding: 10px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#whatsapp-btn:hover {
    background-color: #128C7E;
}

/* Кнопка для открытия чата */
#open-chat {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #96C5F7;
    color: white;
    padding: 15px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1001; /* Кнопка чата поверх всех элементов */
}

/* Кнопка закрытия */
#close-chat {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
}