/*******************************/
/********* General CSS *********/
/*******************************/



@font-face {
  font-family: 'uni';
  src: url('../fonts/Kinetika-Ultra.woff2') format('woff2'),
    url('../fonts/Kinetika-Ultra.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'gi';
  src: url('../fonts/Dual.woff2') format('woff2'),
    url('../fonts/Dual.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'bit';
  src: url('../fonts/AstonScriptPro-Bold.woff2') format('woff2'),
    url('../fonts/AstonScriptPro-Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}




:root {
  --color1: #2c140c;
  --color2: #baa66f;
  --color3: #dfd6c1;
  --color4: white;
  --color6: #f1f1f1;
  --color7: rgb(3, 3, 3);
  --color8: #666;
  --color9: #6f5215;
  --color-black: black;
  /* --color4:#dcdce4;
  --color5:#dce4de;
  --color6:white; */
}


@media screen and (max-width: 768px) {

  .width-unset {
    max-width: unset;
    width: unset;
  }

  .page-header a {
    color: var(--color4) !important;
  }

  .navbar-dark .navbar-nav .nav-link {
    width: fit-content;
    color: var(--color4);
    font-size: 20px;
  }

  .navbar-dark .navbar-nav .nav-link.active {
    border-bottom: 1px solid var(--color2) !important;
    background-image: none !important;
    color: var(--color2) !important;
    text-shadow: 3px 3px 1px var(--color2_dark), 1px 1px 16px white;
  }




  .container-fluid-header {
    height: 95vh !important;
  }

  .border-right-set {
    border-right: none !important;
  }


  .no-bg {
    height: 370px;
  }

  .pamper-home p {
    line-height: 40px !important;
    margin-top: 2rem;
    font-size: 26px !important;
    margin-left: 0rem !important;
  }


}

/* //New */

.hero-text h1,
.hero-text p,
.hero-text a {
  text-align: center;
}

.fs-18 {
  font-size: 18px !important;
}

.bold {
  font-weight: bold !important;
}


.positon-relative {
  position: relative;
}


.bg-white {
  background: transparent !important;
}

body {
  /* font-weight: 500; */
  color: #000;
  background: white;
  /* font-family: 'gi'; */
  text-align: justify;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--color1);
}


a {
  color: var(--color2);
  transition: 0.3s;
}

a:hover,
a:active,
a:focus {
  color: var(--color2) !important;
  outline: none;
  text-decoration: none;
}

.contact-text a:hover {
  color: #9d7603 !important;
}

.column-left {
  width: 70px;
}

.text-right {
  text-align: right !important;
}

.text-left {
  text-align: left !important;
}

.list-style-none {
  list-style: none !important;
}

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

.btn:focus,
.form-control:focus {
  box-shadow: none;
}



.container-fluid {
  max-width: 1366px;
}

.container-fluid.bg-light {
  max-width: 100%;
}

.back-to-top {
  /* border-radius: 100%; */
  border: 1px solid var(--color4);
  position: fixed;
  display: none;
  background: var(--color1);
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 1;
  font-size: 22px;
  right: 15px;
  bottom: 45px;
  transition: background 0.5s;
  z-index: 9;
}

.font-weight-bold.sub {
  font-size: 20px !important;
  border-bottom: 1px dashed #6e6e6e00 !important;
  color: #fff !important;
  font-style: italic;
}

.back-to-top:hover {
  background: var(--color3);
}

.back-to-top:hover i {
  color: var(--color1);
}

.back-to-top i {
  color: var(--color4);
  padding-top: 10px;
}

.service-item.border-right {
  border-right: none !important;
}

.description {
  font-size: 15px;
  font-style: italic;
  color: #666;
}

/* STAFF  */
.container-fluid {
  width: 100%;
}

.staff h4 {
  text-transform: uppercase;
  color: var(--primary);
}

.staff {
  padding: 45px 0;
}

.staff h5 {
  color: #555;
  position: relative;
}

.staff .line {
  width: 100px;
  height: 2px;
  background: var(--primary);
  margin: 20px 0;
}

.border-right {
  border-right: 0 !important;
}

/**********************************/
/********** Top Bar CSS ***********/
/**********************************/
.top-bar {
  background-color: var(--color7);
  position: relative;
  height: 44px;
  /* background-image: url("../images/bg-gray.jpg");
  background-size: cover;
  background-repeat: no-repeat; */
  /* background: var(--color2); */
  /* background-image: linear-gradient(to right, var(--color1), var(--color1)); */
  transition: 0.5s ease;
  align-content: center;
}

.top-bar .text-white a,
.top-bar .text-white i {
  font-size: 18px;
  color: var(--color-black);
}

.top-bar .text-white:hover a,
.top-bar .text-white:hover i {
  color: var(--color9) !important;
  transition: color 0.3s ease;
}

.top-bar .top-bar-left {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.top-bar .top-bar-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.top-bar .text {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  height: 35px;
  padding: 0 10px;
  text-align: center;
  border-right: 1px solid var(--color-black);
}

.top-bar .text:last-child {
  border-right: none;
}

.top-bar .text i {
  font-size: 13px;
  color: var(--color-black);
  margin-right: 5px;
  margin-top: 3px;
}

.title-small {
  font-size: 18px;
}

.menu_content h4 {
  font-family: "Font Awesome 5 Free";
  font-size: 24px;
  font-weight: 200 !important;
  border-bottom: 1px dashed #6e6e6e00 !important;
  line-height: 2;
  text-transform: capitalize;
}

.top-bar .text h2 {
  color: #000;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
  margin: 0;
}

.top-bar .text p {
  color: #eeeeee;
  font-size: 14px;
  font-weight: 400;
  margin: 0 0 0 5px;
}

.top-bar .social {
  display: flex;
  height: 35px;
  font-size: 0;
  justify-content: flex-end;
}

.top-bar .social a:hover i {
  color: var(--color1) !important;
}

.top-bar .social a {
  background-image: linear-gradient(40deg, var(--color9), var(--color7), var(--color9));
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 16px;
  color: var(--color1);
  width: 36px;
  padding: 10px 12px;
  border-radius: 100%;
  gap: 12px;
  margin: 0 4px;
}

.top-bar .social a i {

  color: var(--color1);

}



.top-bar .social a:first-child {
  border-left: 1px solid rgba(255, 255, 255, 0.4);
}

.top-bar .social a:hover {
  color: #fff !important;
  background-image: linear-gradient(140deg, var(--color9), var(--color7), var(--color9));




  border-color: transparent !important;
}

@media (min-width: 992px) {
  .top-bar {
    padding: 0 60px;
  }
}

/**********************************/
/*********** Nav Bar CSS **********/
/**********************************/
.navbar {
  background-color: var(--color1) !important;
  position: relative;
  transition: 0.5s;
  z-index: 10;
}

.navbar.nav-sticky {
  position: fixed;
  box-shadow: 0px 0px 20px 3px var(--color2);
  top: 0;
  width: 100%;
}

/* .navbar img {
  filter: brightness(0) invert(1);
}
.navbar.nav-sticky img {
  filter: brightness(1) invert(0);
} */
.navbar .nav-item .nav-link.active {
  background: -webkit-linear-gradient(315deg,
      rgba(231, 205, 123, 1) 0%,
      rgba(192, 151, 27, 1) 50%,
      rgba(228, 190, 88, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.navbar .navbar-brand {
  margin: 0;
  color: #ffffff;
  font-size: 25px;
  line-height: 0px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0px;
  transition: 0.5s;
  padding-top: 0;
  padding-bottom: 0;
}


.navbar-dark .navbar-nav .nav-link {
  position: relative;
}

.navbar-dark .navbar-nav .nav-link:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color2);
  transform: scaleX(0);
  transform-origin: center;
  /* expand from center */
  transition: transform 0.3s ease;

}

.navbar-dark .navbar-nav .nav-link:hover::after {
  transform: scaleX(1);


}

.underline-animation:hover::after {
  transform: scaleX(1);
}

.navbar-dark .navbar-nav .nav-link.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color2);
  transform: scaleX(1);
}

.navbar-dark .navbar-nav .nav-link.active {
  /* font-weight: 700; */
  color: var(--color2);
}

.navbar .navbar-brand span {
  text-transform: lowercase;
  transition: 0.5s;
}



.navbar .navbar-brand img {
  padding: .5rem;
  border-radius: 1rem;
  max-height: 85px;
  float: left;
}

.navbar .navbar-brand span.text-logo {
  text-transform: uppercase;
  display: block;
  padding: 26px 50px;
}

span.text-logo {
  line-height: 30px;
  font-family: 'uni';
  font-size: 50px;
  font-weight: 500;
  color: var(--color2);
}

.navbar .dropdown-menu {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: #f8f9fa;
}

.text-welcome-about {
  display: contents;
  color: var(--color-black);
}

@media (min-width: 992px) {
  .navbar {
    position: absolute;
    width: 100%;
    padding: 10px 60px;
    background-image: linear-gradient(to bottom #ccffff, #ccffcc, #d3c4be);
    z-index: 9;
  }

  .navbar.nav-sticky {

    padding: 10px 60px;


  }

  .navbar.nav-sticky .nav-link {
    position: relative;

    color: var(--color-black);
  }

  .navbar.nav-sticky .nav-link.active,
  .navbar.nav-sticky .nav-link:hover,
  .navbar.nav-sticky .nav-link:focus {
    color: var(--color2) !important;

    transition: 0.3s ease-in-out;
  }

  .navbar a.nav-link {
    padding: 8px 15px;
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: capitalize;
    color: #fff;
    font-weight: 500;
  }

}

@media (max-width: 991.98px) {
  .navbar {
    padding: 15px;
    background: var(--color1) !important;
  }


  .navbar a.nav-link {
    padding: 5px;
  }

  .navbar .dropdown-menu {
    box-shadow: none;
  }
}

@media (min-width: 1200px) {

  .navbar-dark .navbar-nav .nav-link,
  .navbar-dark .navbar-nav .nav-link:focus,
  .navbar-dark .navbar-nav .nav-link:hover,
  .navbar-dark .navbar-nav .nav-link.active {
    padding: 8px 0px 10px 0px;
  }
}


/*******************************/
/******* Page Header CSS *******/
/*******************************/
.page-header {
  background-repeat: no-repeat;
  margin-top: 6rem;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  height: 30vh;
  z-index: 1;
  background: url(../images/background-page.jpg) no-repeat;
  background-position: 100% 40%;
    background-size: cover;
    background-blend-mode: overlay;
    background-color: #2c140c7a
}

.page-header::after {
  /* position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0c0c0cb3;
  content: "";
  z-index: -1; */
}

@media screen and (min-width: 769px) {}

.page-header h2 {
  text-transform: uppercase;
  /* text-shadow: 2px 2px 2px #7c7c7c; */
  text-shadow: -1px 1px 0 white, 1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
  text-align: start;
  line-height: 60px;
  font-family: 'uni';
  color: var(--color2);
  font-size: 45px;
  font-weight: 300;

  letter-spacing: 3px;
}

.page-header h2 span {
  font-family: 'gi';
}

.page-header a {
  position: relative;
  padding: 0 12px;
  font-size: 22px;
  color: var(--color4);
}

.page-header a:hover {
  background: linear-gradient(360deg, var(--color2) 46.71%, var(--color2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.page-header a::after {
  position: absolute;
  content: "/";
  width: 8px;
  height: 8px;
  top: -2px;
  right: -7px;
  text-align: center;
  color: var(--color4);
}

.page-header a:last-child::after {
  display: none;
}

@media (max-width: 767.98px) {
  .page-header h2 {
    font-size: 28px;
    line-height: 30px;
  }

  .page-header a {
    font-size: 18px;
  }
}

@media (max-width: 768px) {
  /*H edit*/

  .navbar-nav {
    margin-top: 20px;
  }

  .hero .hero-image img {
    max-width: 100%;
    max-height: 100%;
    padding: 0px;
  }
}




.color-white {
  color: #353535 !important;
}

.no-border {
  border: none !important;
}

.logo-color {
  color: #fff !important;
}

.color-light-pink {
  color: #95d231 !important;
}

.font-size-small {
  font-size: 11px !important;
}

.btn-booking {
  padding: 20px 40px;
  font-size: 25px;
  color: white;
  background: black;
}




@media (min-width: 1350px) {

  .top-bar .text {
    padding: 0 50px;
  }
}

@media (min-width: 992px) {
  .font-size-small {
    font-size: 12px !important;
  }

}

@media (width: 768px) {
  .top-bar .text h2 {
    font-size: 10px !important;
  }
}

@media (max-width: 580px) {

  .top-bar-left {
    height: 50px;
    background: transparent;
  }

  .top-bar {
    height: 140px;
    display: flex;
    justify-content: center;
  }

  .top-bar .top-bar-left {
    display: block;
  }

  .text {
    border: none !important;
  }

  .no-border-left {
    border-left: none !important;
  }

  .top-bar .text {
    height: 30px;
    margin: 5px 0;
  }

  .top-bar .social a {
    /* width: 30px; */
  }

  .font-size-small {
    font-size: 12px !important;
  }

  /* end edit header small with phone*/
  .modal-body {
    /*height: 600px;*/
    overflow-y: scroll;
  }

  .fix-card {
    display: none;
  }

  .icon-popu {
    top: -4px !important;
    left: 74% !important;
    width: 26% !important;
  }

  .color-ser-price {
    font-size: 16px;
  }

  .border-right {
    display: none;
  }

  .discount .section-header h2 span {
    font-size: 25px;
  }

  .navbar .navbar-brand img {
    max-height: 75px;
  }

  .btn-book-head {
    display: flex !important;
  }


  .social-fix a {
    width: 40px;
    writing-mode: sideways-lr;
    padding: 11px 1px !important;
    font-size: 15px;
  }

  .social-fix {
    top: 50% !important;
  }

  .about .about-img::after {
    right: 41px;
    width: 87%;
  }

  .about .about-img::before {
    top: -17px;
    right: 2px;
    width: 63%;
  }

  .promotion .promotion-content {
    padding: 1rem !important;
  }

  .carousel-inner {
    height: 90vh !important;
  }

  .carousel-item {
    height: 90vh !important;
  }

  .service-home .wraper-img {
    margin-top: -30px !important;
  }

  .offer-home .box-img-wrapper {
    height: 450px !important;

  }

  .offer-home .box-img {
    height: 450px !important;

  }

  .offer-home .box-img-wrapper:hover .box-img {
    height: 400px !important;
    width: 90%;


  }

  .contact-page .row-form-contact {
    height: 1035px !important;
  }

  .contact-page .row-form-contact .email-form {
    max-width: 100% !important;
    margin-left: 0rem !important;

  }


  .leaf {
    top: 3rem !important;
    width: 33% !important;
    right: 0rem !important;
  }

  /* Tắt hover cũ và layout tuyệt đối */
  .dropdown:hover .dropdown-content {
    display: none !important;
    transform: none !important;
    pointer-events: none !important;
  }

  .dropdown.open .dropdown-content {
    padding: 0;
    display: block !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  /* bỏ absolute để list chèn trong luồng menu */
  .dropdown-content {
    margin: 0;
    display: none !important;

    position: static !important;
    /* hoặc position:relative; */
    box-shadow: none !important;
    /* bỏ đổ bóng nếu muốn */
    background: none !important;
    /* vẫn giữ màu nền */
    padding-left: 0rem !important;
    /* tùy chỉnh thụt lề nếu cần */
    margin-top: 0rem !important;
    /* thêm khoảng cách trên dưới */
  }


  .dropdown-content a {
    color: var(--color4) !important;
    font-size: 17px;
    padding: 0.2rem 1rem !important;
  }

  .service-column-home {
    /* background-image: none !important;
    background-color: #b5b5b5; */
  }


  .service-column-home .box-wrapper .box .content {
    height: 290px !important;
  }


  .service-page .wrapper-services h6 {
    font-size: 25px !important;
  }

  .navbar-dark .navbar-nav .nav-link:after {
    display: none;
  }

  .carousel-indicators {
    top: 70% !important;
  }

  .footer-section .google-map {
    padding-bottom: 2.4rem;
    position: initial !important;
    width: 100% !important;
    height: 400px !important;
  }

  .footer-section .footer-bottom .icon-social {
    justify-content: start !important;
  }

  .contact-page .row-form-contact .email-form h2 {
    font-size: 2rem !important;
  }


  .btn-head {
    margin-top: 2rem;
  }

  .page-header {
    margin-top: 0rem;
  }
}


@media (min-width: 992px) {

  .col-md-1,
  .col-md-2,
  .col-md-3,
  .col-md-4,
  .col-md-5,
  .col-md-6,
  .col-md-7,
  .col-md-8,
  .col-md-9,
  .col-md-10,
  .col-md-11,
  .col-md-12 {
    float: left;
  }
}

.heading-agileinfo span {
  display: block;
  font-size: 16px !important;
  margin-top: 1em;
  letter-spacing: 4px;
  text-transform: capitalize;
  color: #000000;
  font-weight: 500;
}


.inner-border::-webkit-scrollbar {
  display: none;
}

.col-md-4 {
  float: left;
}

.bg-dark {
  top: 0;
}

button:focus {
  outline: none;
}

.navbar-dark .navbar-toggler {
  border: none;
  background-color: transparent;
}

.btn {
  text-transform: uppercase;
}

.btn:hover {
  color: #fff;
  background-image: linear-gradient(to right, #ff7e7b, #cf565a);
}

.modal-header {
  background: #fceeef;
}


.modal-content .menu-item {
  color: #333;
  text-align: left;
  text-transform: capitalize;
}

.modal-content .item-desc {
  font-style: italic;
  color: #777;
  text-align: left;
}

.modal-content .price {
  color: #333;
  text-align: right;
  font-weight: bold;
}

.menu-popup li {
  list-style: none;
  border-bottom: 1px solid #ecf2f1;
}

.modal-title {
  font-weight: bold;
  color: #fff;
  text-transform: uppercase;
}

.service-item h3 {
  color: #444;
}

@media (min-width: 768px) {
  .modal-body {
    overflow-y: scroll;
  }


  .border-right {
    border-right: 1px solid #d1d1d0 !important;
  }
}

.modal-body::-webkit-scrollbar {
  display: none;
}



@media (min-width: 769px) {
  .navbar-dark .navbar-nav .nav-link {
    margin: 3px 1rem;
    color: var(--color4);
  }

}

.bold-services {
  border-radius: 3rem;
}

.col-9 {
  margin-top: 0;
}

.col-3 {
  margin-top: 0;
}

.icon-popu {
  position: absolute;
  top: -20px;
  right: 20%;
  width: 17%;
}

.icon-popu2 {
  position: absolute;
  top: -10px;
  right: 20%;
  width: 27%;
}

.border-right-set {
  border-right: 1px dotted #7a7a7a;
}

.overlay-modal {
  background-color: black;
  opacity: 0.8;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: none;
}

.top-services {}

.square-page {
  position: absolute;
  width: 100%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.square {
  position: absolute;
  width: 94%;
  top: 43.5%;
  left: 49.5%;
  transform: translate(-50%, -50%);
}

.flower {
  position: absolute;
  top: -1rem;
  left: -9rem;
  width: 50%;
  transform: scaleX(-1);
}

.img-ser-home {
  border: 2px solid var(--color2);

  padding: .5rem;
  box-shadow: 0 0px 9px 1px #0000004a;
}

.btn-book-head {
  display: none;

  text-transform: capitalize;
  border: 2px solid var(--color8);
  color: var(--color1);
  background-image: linear-gradient(140deg, var(--color2), var(--color7), var(--color2));
}

.btn-book-head:hover {
  background-image: linear-gradient(40deg, var(--color2), var(--color7), var(--color2));
}



/* =====icon fix======= */

.icon-fix {
  border-radius: 0 .4rem .4rem 0;
  padding: 0rem .8rem;
  gap: 5px;
  background: linear-gradient(145deg, var(--color2), var(--color2), var(--color2) 70%);
  display: flex;
  align-items: center;
  flex-direction: column;
  position: fixed;
  top: 50vh;
  z-index: 2;

}

.icon-fix a {
  color: var(--color4);
  position: relative;
  padding: 1rem 0;
  font-size: 15px;
}

.icon-fix a:hover {
  color: var(--color1) !important;

}

.icon-fix a::after {
  position: absolute;
  content: "";
  background-color: var(--color4);
  width: 25px;
  height: 1px;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);

}

.icon-fix a:last-child::after {

  background-color: transparent;


}

/* =====icon fix======= */


/* =========socila fix====== */
.social-fix {
  gap: .5rem;
  position: fixed;
  top: 50%;
  right: .2rem;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.social-fix a {
  text-transform: uppercase;
  gap: 5px;
  display: flex;
  align-items: center;
  border: 1px solid var(--color3);
  color: var(--color1);
  border-radius: .3rem;
  padding: .5rem 1rem;
  background-image: linear-gradient(140deg, var(--color2), var(--color3), var(--color2));
}

.social-fix a p {
  margin-bottom: 0;
}

.social-fix a:hover {
  color: var(--color1) !important;
  border: 1px solid var(--color3);

  background-image: linear-gradient(40deg, var(--color2), var(--color3), var(--color2));


}


/* =========socila fix====== */


.bottle {
  position: absolute;
  top: -7rem;
  right: 0;
}

.promotion {
  background-color: #edece8;

}

.promotion .promotion-content {
  margin: 0 1rem;
  padding: 3rem;
  background-color: var(--color2);
}

.flower-line {
  z-index: 1;
  position: relative;
  margin-top: 1rem;
  display: flex;
  justify-content: center;
}

.flower-line::after {
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15rem;
  height: .5px;
  background-color: var(--color2);
  content: "";
}

.flower-line img {
  background-color: white;
  width: 70px;
}

.no-promo {
  font-family: 'gi';
  padding: 3rem 1rem;
  text-align: center;

  font-size: 1.5rem;
}

.ig-feed {
  position: relative;
}

.ig-feed::before {
  z-index: 999999;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3rem;
  background-color: white;
  content: "";
}




/* ======banner=========== */



/* Dropdown Menu */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown:hover a {
  border-bottom: none !important;
}

.dropdown .nav-link:hover {
  color: var(--color2) !important;
}

.dropdown-content {
  padding: 1rem;
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color4);
  min-width: 160px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s;
  pointer-events: none;
  /* border-radius: 0.5rem; */
}

.dropdown:hover .dropdown-content {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.dropdown-content a {
  white-space: nowrap;
  text-transform: uppercase;
  position: relative;
  color: var(--color1);
  padding: 0.5rem 1rem;
  text-decoration: none;
  display: block;
}

.dropdown-content a::after {
  background-color: var(--color3);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 1rem;
  width: 0%;
  content: "";
  transition: .4s;

}

.dropdown-content a:hover {
  color: var(--color2) !important;
}

.dropdown-content a:hover::after {
  background-color: var(--color2);
  height: 1px;
  position: absolute;
  bottom: 0;
  left: 1rem;
  width: 10%;
  content: "";
  transition: .4s;

}


#myCarousel {
  margin-top: 0px;
}

.btn-head {
  width: fit-content;
  font-weight: 600;
  border-radius: 3rem;
  color: var(--color1);
  padding: .6rem 2rem;
  display: flex;
  align-items: center;
  background-image: linear-gradient(140deg, var(--color2), var(--color3), var(--color2));

}

.btn-head:hover {
  color: var(--color1) !important;

  background-image: linear-gradient(40deg, var(--color2), var(--color3), var(--color2));

}

.carousel-inner {
  /* z-index: -1; */
  /* height: 1200px; */
  height: calc(100vh + 5rem);
}

.carousel-item {
  z-index: 0;
  height: calc(100vh + 5em);
}

.carousel-image {
  animation: zoomInn 11s ease forwards;
  animation-duration: 5s;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.carousel-image2 {
  animation: zoomIn2 11s ease forwards;
  animation-duration: 5s;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.leaf {
  animation: vertical-shaking 2s infinite;
  position: absolute;
  top: 12rem;
  right: 3rem;
  z-index: 2;
  width: 10rem;
}


@keyframes vertical-shaking {
  0% {
    transform: translateY(0)
  }

  25% {
    transform: translateY(5px)
  }

  50% {
    transform: translateY(-5px)
  }

  75% {
    transform: translateY(5px)
  }

  100% {
    transform: translateY(0)
  }
}

.slide-banner-set h5 {
  color: var(--color4);
  font-size: 40px;
  font-family: 'gi';
  text-transform: uppercase;
}

.slide-banner-set h6 {
  color: var(--color4);
}

.slide-banner-set h4 {
  text-shadow: -1px 1px 0 white, 1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;

  /* text-shadow: 2px 2px 2px #7c7c7c; */
  color: var(--color2);
  font-size: 75px;
  font-family: 'uni';
  text-transform: uppercase;
}

.slide-banner-set h3 {
  line-height: 165px;
  text-shadow: 2px 2px 2px var(--color2);
  color: var(--color4);
  font-size: 80px;
  font-family: 'bit';
}

.slide-banner-set {
  height: fit-content;
  z-index: 4;
  top: 52%;
  transform: translate(-50%, -50%);
  left: 50%;
  position: absolute;
  bottom: 0;
}

.slide-banner-set a {
  font-weight: 600;
  border: 2px solid var(--color4);
  text-transform: uppercase;
  color: var(--color1);
  border-radius: 3rem;
  padding: 1.5rem 3rem;
  background-image: linear-gradient(140deg, var(--color2), var(--color3), var(--color2));
}

.slide-banner-set a:hover {
  border: 2px solid var(--color1);
  color: var(--color1) !important;
  background-image: linear-gradient(40deg, var(--color2), var(--color3), var(--color2));
}

/* Đưa dot sang phải */
.carousel-indicators {
  z-index: 1;
  position: absolute;
  top: 55%;
  left: 80%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  /* bỏ margin mặc định */
  justify-content: flex-end;
  /* căn phải */
}

.carousel-fade .carousel-item.active {
  z-index: 0;
}

.carousel-indicators li {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

@keyframes zoomInn {
  0% {
    /* opacity: 0.6; */
    transform: scale(2) rotate(20deg);

  }

  100% {
    /* opacity: 1; */
    transform: scale(1) rotate((0deg));
  }
}

@keyframes zoomIn2 {
  0% {
    /* opacity: 0.6; */
    transform: scale(2) rotate(-20deg);

  }

  100% {
    /* opacity: 1; */
    transform: scale(1) rotate((0deg));
  }
}

/* ======banner=========== */



/* ==========================service-home */

.service-home {
  /* background-color: #f1f1f1; */
  z-index: 2;
  padding-bottom: 6rem;
}

.service-home .wraper-img {

  margin-top: -150px;
}


.service-home .card-img {
  z-index: 1;
  border-radius: 0;
  cursor: pointer;
  overflow: hidden;
  transition: all 1s ease;

}

.service-home .card-img::after {
  content: "";
  background-image: linear-gradient(to bottom, transparent, transparent, var(--color1) 115%);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;

}

.service-home .card-img:hover img {
  transform: scale(1.2);
  transition: all 0.3s ease;
}

.service-home .card-img img {
  transition: all 0.3s ease;
}

.service-home .text-inner-box-service {
  z-index: 1;

  left: 1rem;
  bottom: 1rem;
  position: absolute;
}

.service-home .box-text {

  top: 50%;
  left: 50%;
  text-align: start;
  transform: translate(-50%, -50%);
  position: absolute;

}

.service-home .box-text h4 {
  font-size: 35px;
  font-family: 'uni';
  text-transform: uppercase;


}

.service-home .box-text h5 {
  font-size: 34px;
  white-space: nowrap;
  font-family: 'gi';
  text-transform: uppercase;


}

.service-home .text-inner-box-service h4 {
  text-shadow: -1px 1px 0 white, 1px 1px 0 white, 1px -1px 0 white, -1px -1px 0 white;
  color: var(--color2);
  margin-bottom: 0;
  font-size: 30px;
  font-family: 'uni';
  text-transform: uppercase;
}

.service-home .text-inner-box-service h5 {
  font-size: 30px;

  font-family: 'gi';
  color: var(--color4);
  text-transform: uppercase;
}

.service-home img {

  height: 100%;
  object-fit: cover;
}

/* ====================service-home */




/* ==============pamper-home===================== */
.pamper-home {
  z-index: 1;
  overflow: hidden;
  position: relative;
  padding: 6rem 0;
  background-image: url("../images/bg-footer.jpg");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  /* background-color: var(--color1); */
}

.pamper-home::after {
  z-index: -1;
  background-color:
    #2c140c6e;
  width: 100%;
  height: 100%;
  content: "";
  top: 0;
  left: 0;
  position: absolute;
}

.pamper-home .leaf-pamper {
  position: absolute;
  right: 0;
  bottom: 0;
}

.pamper-home p {
  margin-left: -4rem;
  white-space: nowrap;
  color: var(--color4);
  font-size: 36px;
  line-height: 95px;
  font-family: 'bit';
}

/* ==============pamper-home===================== */



/* =========about-home====== */


.btn-custom-about {
  margin: 3rem 0;
  text-align: center;
  min-width: 230px !important;
  padding: 16px 8px !important;
  border-radius: 3rem;
  /* border: 2px solid red; */
  min-width: 140px;
  padding: 16px 8px;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  z-index: 1;
}


.btn-custom-about::before {

  content: "";
  background-color: var(--color2);
  width: 10px;
  height: 3px;
  bottom: 0;
  left: 40px;
  position: absolute;
  transition: all 0.3s ease;
  z-index: 0;

}

.btn-custom-about::after {
  content: "";
  background-color: var(--color2);
  width: 115px;
  height: 3px;
  bottom: 0;
  right: 55px;
  position: absolute;
  transition: all 0.3s ease;

  z-index: -1;
}

.btn-custom-about:hover:before {

  width: 115px;
  transition: all 0.3s ease;

}

.btn-custom-about:hover:after {
  width: 8px;
  transition: all 0.3s ease;
}

.btn-custom-about:hover .button__text {
  color: var(--);

}

.btn-custom-about .button__text {
  color: var(--color2);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 3px;
}

.btn-custom-about:hover .button__text::before {
  width: 8px;
  transition: all 0.3s ease;


}

.btn-custom-about:hover .button__text::after {
  width: 115px;
  transition: all 0.3s ease;


}

.btn-custom-about .button__text::before {
  content: "";
  background-color: var(--color2);
  width: 115px;
  height: 3px;
  top: 0;
  left: 45px;
  position: absolute;
  transition: all 0.3s ease;


}

.btn-custom-about .button__text::after {
  content: "";
  background-color: var(--color2);
  width: 8px;
  height: 3px;
  top: 0;
  right: 45px;
  position: absolute;
  transition: all 0.3s ease;


}


.btn-custom-about .button__line2 {
  position: absolute;
  width: 20%;
  height: 100%;
  border-left: 3px solid var(--color1);
  border-top: 3px solid var(--color1);
  border-bottom: 3px solid var(--color1);

  z-index: -2;
  content: "";
  border-radius: 3rem 0 0 3rem;

  top: 0;
  left: 0;
}

.btn-custom-about .button__line3 {
  position: absolute;
  width: 30%;
  height: 100%;
  border-right: 3px solid var(--color1);
  border-top: 3px solid var(--color1);
  border-bottom: 3px solid var(--color1);

  z-index: -2;
  content: "";
  border-radius: 0 3rem 3rem 0;

  top: 0;
  right: 0;
}

.btn-custom-about .button__line:before {
  position: absolute;

  top: 14px;
  left: -14px;
  background-color: var(--color1);
  content: "";
  height: 30px;
  width: 93px;
  transform: rotate(-60deg);
  border-radius: 3rem;
  z-index: -2;
}

.btn-custom-about .button__line::after {
  position: absolute;
  content: "";
  top: 16px;
  left: -5px;
  background-color: var(--color1);
  height: 30px;
  width: 124px;
  transform: rotate(149deg);
  border-radius: 3rem;
  z-index: -1;
}

.btn-custom-about .button__drow1::before {
  position: absolute;
  top: 20px;
  left: 49px;
  background-color: var(--color1);
  content: "";
  height: 30px;
  width: 78px;
  transform: rotate(-72deg);
  border-radius: 3rem;
  z-index: -2;
}

.btn-custom-about .button__drow1::after {
  position: absolute;
  top: 17px;
  left: 59px;
  background-color: var(--color1);
  content: "";
  height: 30px;
  width: 123px;
  transform: rotate(146deg);
  border-radius: 3rem;
  z-index: -2;
}

.btn-custom-about .button__drow2::before {
  position: absolute;
  top: 17px;
  right: 23px;
  background-color: var(--color1);
  content: "";
  height: 30px;
  width: 85px;
  transform: rotate(84deg);
  border-radius: 3rem;
  z-index: -1;
}

.btn-custom-about .button__drow2::after {
  position: absolute;
  top: 20px;
  right: -25px;
  background-color: var(--color1);
  content: "";
  height: 30px;
  width: 112px;
  transform: rotate(144deg);
  border-radius: 3rem;
  z-index: -1;
}



.title-big {
  text-align: start;
  text-transform: uppercase;
  font-size: 40px;
  font-family: 'uni';
  color: var(--color1);

}


.title-big span {
  font-family: 'gi';
}

.about-home {
  padding: 6rem 0;
  overflow: hidden;
  position: relative;
  background-color: var(--color4);
}

.about-home p {
  color: #333;
}

.about-home .leaf-gold {
  bottom: 0;
  left: 0;
  position: absolute;
}

/* =========about-home====== */


/* ========service-column-home============== */


.service-column-home {
  z-index: 1;
  position: relative;
  padding: 6rem 0;
  background-image: url("../images/bg-footer.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.service-column-home::after {
  z-index: -1;
  background-color:
    #2c140c6e;
  width: 100%;
  height: 100%;
  content: "";
  top: 0;
  left: 0;
  position: absolute;
}


.service-column-home .title-big {
  text-transform: uppercase;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--color4);
}

.service-column-home .box-wrapper .box {
  height: 100%;
  padding: .3rem;
  border: 2px solid var(--color4);
}

.service-column-home .box-wrapper .box:hover .content {
  margin-top: -3rem;
  transition: all 0.3s ease;
}

.service-column-home .box-wrapper .box img {
  transition: all 0.3s ease;
}

.service-column-home .box-wrapper .box:hover img {
  transform: scale(1.2);
  transition: all 0.3s ease;
}

.service-column-home .box-wrapper .box .content {
  transition: all 0.3s ease;
  position: relative;
  height: 365px;
  padding: 40px 18px;
  background-color: var(--color4);
  text-align: center;
}

.service-column-home .box-wrapper .box .content h6 {
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color1);
}

.service-column-home .box-wrapper .box .content p {
  font-size: 16px;
  color: #333;
}

.service-column-home .box-wrapper .box .content a {
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  border: 1px solid white;
  display: inline-block;
  margin-top: .7rem;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--color1);
  border-radius: 3rem;
  background: linear-gradient(145deg, var(--color2), var(--color3), var(--color2) 70%);
  padding: 13px 1.7rem;
}

.service-column-home .box-wrapper .box .content a:hover {
  color: var(--color1) !important;

  background: linear-gradient(45deg, var(--color2), var(--color3), var(--color2) 70%);

}

.service-column-home .box-wrapper .box img {
  overflow: hidden;
  object-fit: cover;
}


/* ========service-column-home============== */




/* ========get-in-touch======== */
.get-in-touch a {
  padding: .8rem 1rem;
  font-size: 13px;
  width: fit-content;
  text-transform: uppercase;
}

.get-in-touch {
  overflow: hidden;
  padding: 6rem 0;
  background-color: #edece8;
}

/* ========get-in-touch======== */




/* ======offer-home====== */

.offer-home {
  padding: 6rem 0;
  background-color: #f1f1f1;
}

.offer-home .box-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 650px;

}

.offer-home .box-img {
  position: relative;
  height: 650px;
  width: 100%;
  overflow: hidden;
  transition: all 0.3s ease;

}

.offer-home .box-img-wrapper:hover .box-img::after {
  transition: all 0.3s ease;

  background-color: #000000a3;

}
.offer-home .box-img-wrapper:hover .box-img p {
 color: var(--color2);
  transition: all 0.3s ease;
 

}

.offer-home .box-img-wrapper:hover .box-img {
  height: 600px;
  width: 90%;
  transition: all 0.3s ease;


}

.offer-home .box-img::after {
  transition: all 0.3s ease;

  background-color:#00000069;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
}

.offer-home .box-img p {
  transition: all 0.3s ease;

  white-space: nowrap;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  font-size: 30px;
  color: var(--color3);
  font-family: 'uni';
  text-transform: uppercase;
}


.offer-home .box-img img {

  height: 100%;
  object-fit: cover;
}

/* ======offer-home====== */



.padding-section-page {
  padding: 5rem 0;
}




/* ===========service-page============= */
.service-page {}

.service-page .wrapper-services {
  background-color: white;
  /* padding: 3rem; */
}

.service-page .wrapper-services h6 {
  text-align: center;
  padding: 1rem 0;
  font-weight: 600;
  background-image: linear-gradient(to left, transparent, var(--color2), transparent);
  color: white;
  font-size: 28px;
  text-transform: uppercase;
}


.service-page .wrapper-services img {
  border: 1px solid #d9d9d9;
  padding: .3rem;

}

.service-page .wrapper-services .item-row {
  margin: 0 1rem;
  padding: .8rem 0;
  border-bottom: 1px dashed #271304;
}

.service-page .wrapper-services .item-row .name-service {
  font-weight: 600;
  text-align: start;
  text-transform: uppercase;
}

.service-page .wrapper-services .name-service-big {
  padding: 1rem 0;
  display: flex;
  z-index: 1;
  /* background-color: blue; */
  justify-content: center;
  margin: 0 1rem;
  position: relative;
}

.service-page .wrapper-services .name-service-big::after {
  content: "";
  z-index: -1;
  background-color: var(--color2);
  width: 100%;
  height: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
}

.service-page .wrapper-services .name-service-big p {
  background-color: white;
  color: var(--color2);
  width: fit-content;
  padding: 0 .2rem;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 20px;
}

.service-page .wrapper-services .description-big {
  margin: 0 1rem;
  color: #666;
  padding-bottom: 1rem;
  font-size: 15px;
}

.service-page .wrapper-services .item-row .price-service {
  color: var(--color2);
  font-weight: bold;
  text-transform: uppercase;
  text-align: end;
}



/* ===========service-page============= */


/* ========gallery-page======= */
.gallery-page,
.service-page {
  background-color: #edece8;
}

.gallery-page #loadGallery .gallery {
  border: 3px solid white;
  cursor: zoom-in;
  overflow: hidden;
  height: 260px;
}

.gallery-page #loadGallery .gallery:hover img {
  transition: all 0.7s ease;



  transform: scale(1.5);
}

.gallery-page #loadGallery .gallery img {

  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  display: block;
  transition: all 0.7s ease;
}

/* ========gallery-page======= */





/* ==========================party */

.host-party,
.happy-hour {
  background-color: #f1f1f1;

}


.email-form {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 100%;
  /* max-width: 400px; */
}

.email-form h2 {
  font-family: 'bi';
  margin-bottom: 20px;
  font-size: 1.5rem;
  color: var(--primary);
  text-shadow: -1px 1px 0 var(--bg-pink), 1px 1px 0 var(--bg-pink), 1px -1px 0 var(--bg-pink), -1px -1px 0 var(--bg-pink), 3px 3px 1px black;
}

.email-form input,
.email-form textarea,
.email-form button {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 1rem;
}

.email-form button {
  width: 10rem;
  border: 1px solid var(--five) !important;
  background-image: linear-gradient(40deg, var(--color2), var(--color3), var(--color2));

  color: var(--black);
  border: none;
  cursor: pointer;
  font-weight: bold;
}

.email-form button:hover {
  background: transparent;
  background-image: linear-gradient(140deg, var(--color2), var(--color3), var(--color2));


}



.custom-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  justify-content: center;
  align-items: center;
}

.custom-modal-content {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px;
  border-radius: 10px;
  width: 300px;
  text-align: center;
  position: absolute;
  animation: fadeInModal 0.3s ease-in-out;
}

.custom-modal-content h3 {
  font-size: 1.5rem;
}

.custom-close-btn {
  border: none;

  /* position: absolute; */
  border-radius: .5rem;
  padding: .3rem 3rem;
  background-image: linear-gradient(40deg, var(--color2), var(--color3), var(--color2));
  top: 10px;
  right: 15px;
  font-size: 18px;
  cursor: pointer;
}

/* ==========================party */



/* ======happy-hour====== */

/* ======happy-hour====== */



/* =======contac============ */

.contact-page {
  background-color: #edece8;

  padding-top: 5rem;
}

.contact-page h4 {
  text-transform: capitalize;
}

.contact-page i {
  color: var(--color1);
  font-size: 2rem;
}

.contact-page .row-form-contact {
  height: 800px;
  width: 100%;
}

.contact-page .row-form-contact img {
  height: 100%;
  object-fit: cover;
}

.contact-page .row-form-contact .email-form {
  margin-left: 2rem;
  max-width: 70%;
  background-color: transparent;
  box-shadow: none;
}

.contact-page .row-form-contact .email-form h2 {
  white-space: nowrap;
  color: black;
  font-weight: bold;
  font-family: 'uni';
  text-align: start;
  font-size: 3rem;
  text-transform: uppercase;
}

.contact-page .row-form-contact .email-form h2 span {
  font-family: 'gi';
  font-weight: 50;
}


/* =======contac============ */




/* =======footer-section======== */

.footer-section {
  z-index: 1;
  overflow: hidden;
  /* border-top: 15px solid #d9d9d9; */
  position: relative;
  padding: 4rem 0 0;
  background-color: var(--color1);
  /* background-position: bottom;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../images/bg-footer.jpg"); */
}

.footer-section .google-map {
  position: absolute;
  top: 0rem;
  right: 0;
  width: 37%;
  height: 100%;
}

.footer-section .logo-foot {
  width: 55%;
}

.footer-section ul {
  padding: 0;
  text-align: start;
  text-transform: capitalize;
  font-size: 15px;
  list-style-type: none;
}

.footer-section ul li {

  padding-bottom: .3rem;
}

.footer-section ul li a:hover {

  color: var(--color2) !important;
}

.footer-section ul li {

  padding-bottom: .5rem;
}

.footer-section ul li a {
  color: white;

}

.footer-section ul li a.active {
  font-weight: bold;
  border-bottom: 1px solid var(--color2);
  color: var(--color2);
}

.footer-section ul li a:hover {
  color: var(--color3);
}

.footer-section .row-info p:first-child {

  font-size: 15px;
  text-transform: uppercase;
  color: var(--color4);
  font-weight: bold;
}

.footer-section .row-info p:last-child {

  text-align: start;
  font-size: 14px;
  color: var(--color4);
}

.footer-section .footer-bottom {
  padding-bottom: 1rem;
  padding-top: 1rem;
  margin-top: 1rem;
  border-top: 1px solid white;
}

.footer-section .footer-bottom p {
  color: white;
  font-size: 13px;

}

.footer-section .footer-bottom .icon-social {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 1rem;

}

.footer-section .footer-bottom .icon-social a {
  color: white;

}

.footer-section .footer-bottom .icon-social a:hover i {
  color: var(--color2);

}

.footer-section .leaff {
  z-index: -1;
  width: 25%;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: scale(-1);

}

/* =======footer-section========ß */

/* =======navbar-collapse============= */


.appointment {
  color: #9a0000 !important;
}

.appointment:hover {
  color: #9a0000 !important;
}


.navbar-collapse {
  transition: all .2s ease;

}

@media(max-width:480px) {
  .navbar-collapse {
    transition: all .01s ease;
z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url("../images/bg-footer.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100vh;
  }

  .navbar-collapse::after{
z-index: -1;
    content: "";
    background-color: #2c140cba;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }

  .navbar-collapse .close {
    opacity: 1;
    text-shadow: none;
    color: var(--color2);

    position: absolute;
    top: 1rem;
    right: 1rem;
  }

  .navbar-collapse #main-menu {

    padding-left: 5rem;
    padding-top: 1rem;
  }
}


/* =======navbar-collapse============= */



/* =====modal exampleModalCenter======= */

#exampleModalCenter {}

/* =====modal exampleModalCenter======= */

.bar-bottom-mobile {
  border: 1px solid var(--color2);
  width: 100%;
  background-color: white;
  position: fixed;
  bottom: 0;
  z-index: 10;
  align-items: center;
  justify-content: space-between;
}

.bar-bottom-mobile a {
  font-size: 14px;
  text-align: center;
  width: 25%;
  border-right: 1px solid var(--color2);
  text-transform: capitalize;
  color: black;
  padding: .5rem 1rem;
}

.bar-bottom-mobile a:nth-child(4),
.bar-bottom-mobile a:nth-child(3) {
  background-color: #edece8;
}

.bar-bottom-mobile a:last-child {
  border-right: none;
}

html {
  scroll-padding-top: 190px;
}