:root {

  --body-bg: #ffffff;

  --theme-color: #b69348;

  --body-color: #555555;

  --title-color: #555555;

  --secondary-color: #faf5eb;

  --smoke-color: #EFF1F5;

  --light-color: #f8f9fa;

  --black-color: #554319;

  --white-color: #ffffff;

  --yellow-color: #fec624;

  --success-color: #28a745;

  --error-color: #dc3545;

  --border-color: #faf5eb;

  --title-font: "Marcellus", serif;

  --body-font: "DM Sans", sans-serif;

  --icon-font: "Font Awesome 5 Pro";

  --main-container: 1270px;

  --container-gutters: 30px;

  --section-space: 120px;

  --section-space-mobile: 80px;

  --section-title-space: 60px;

  --ripple-ani-duration: 5s

}



.home-8,

.home-7,

.home-6,

.home-4 {

  --main-container: 1200px

}



html,

body {

  scroll-behavior: auto !important

}



body {

  font-family: var(--body-font);

  font-size: 16px;

  font-weight: 400;

  color: var(--body-color);

  background-color: var(--body-bg);

  line-height: 28px;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased

}



iframe {

  border: none;

  width: 100%

}



.slick-slide:focus,

button:focus,

a:focus,

a:active,

input,

input:hover,

input:focus,

input:active,

textarea,

textarea:hover,

textarea:focus,

textarea:active {

  outline: none

}



input:focus {

  outline: none;

  box-shadow: none

}



img:not([draggable]),

embed,

object,

video {

  max-width: 100%;

  height: auto

}



ul {

  list-style-type: disc

}



ol {

  list-style-type: decimal

}



table {

  margin: 0 0 1.5em;

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

  border: 1px solid var(--border-color)

}



th {

  font-weight: 700;

  color: var(--title-color)

}



td,

th {

  border: 1px solid var(--border-color);

  padding: 9px 12px

}



a {

  color: var(--theme-color);

  text-decoration: none;

  outline: 0;

  transition: all ease .4s

}



a:hover {

  color: var(--title-color)

}



a:active,

a:focus,

a:hover,

a:visited {

  text-decoration: none;

  outline: 0

}



button {

  transition: all ease .4s

}



img {

  border: none;

  max-width: 100%

}



ins {

  text-decoration: none

}



pre {

  background: #f5f5f5;

  color: #666;

  font-size: 14px;

  margin: 20px 0;

  overflow: auto;

  padding: 20px;

  white-space: pre-wrap;

  word-wrap: break-word

}



span.ajax-loader:empty,

p:empty {

  display: none

}



p {

  margin: 0 0 18px 0;

  color: var(--body-color);

  line-height: 1.63

}



h1 a,

h2 a,

h3 a,

h4 a,

h5 a,

h6 a,

p a,

span a {

  font-size: inherit;

  font-family: inherit;

  font-weight: inherit;

  line-height: inherit

}



.h1,

h1,

.h2,

h2,

.h3,

h3,

.h4,

h4,

.h5,

h5,

.h6,

h6 {

  font-family: var(--title-font);

  color: var(--title-color);

  text-transform: none;

  font-weight: 400;

  line-height: 1.2;

  margin: 0 0 15px 0

}


.logofb a img {
  width: 100%;
  max-width: 100px;
}




@media(max-width: 767px) {

  .col-auto.d-md-block.logofb {
    width: 100%;
    text-align: center;
    padding-top: 15px;
  }



  .h1,

  h1,

  .h2,

  h2,

  .h3,

  h3,

  .h4,

  h4,

  .h5,

  h5,

  .h6,

  h6 {

    line-height: 1.4

  }

}



.h1,

h1 {

  font-size: 48px

}



.h2,

h2 {

  font-size: 40px

}



.h3,

h3 {

  font-size: 36px

}



.h4,

h4 {

  font-size: 30px

}



.h5,

h5 {

  font-size: 24px

}



.h6,

h6 {

  font-size: 20px

}



@media(max-width: 1199px) {



  .h1,

  h1 {

    font-size: 40px

  }



  .h2,

  h2 {

    font-size: 36px

  }



  .h3,

  h3 {

    font-size: 30px

  }



  .h4,

  h4 {

    font-size: 24px

  }



  .h5,

  h5 {

    font-size: 20px

  }



  .h6,

  h6 {

    font-size: 16px

  }

}



@media(max-width: 767px) {



  .h1,

  h1 {

    font-size: 36px

  }



  .h2,

  h2 {

    font-size: 30px

  }



  .h3,

  h3 {

    font-size: 26px

  }



  .h4,

  h4 {

    font-size: 22px

  }



  .h5,

  h5 {

    font-size: 18px

  }



  .h6,

  h6 {

    font-size: 16px

  }

}



@media only screen and (min-width: 1300px) {



  .container-xxl,

  .container-xl,

  .container-lg,

  .container-md,

  .container-sm,

  .container {

    max-width: calc(var(--main-container) + var(--container-gutters));

    padding-left: calc(var(--container-gutters)/2);

    padding-right: calc(var(--container-gutters)/2)

  }



  .container-fluid {

    padding-left: calc(var(--container-gutters)/2);

    padding-right: calc(var(--container-gutters)/2)

  }

}



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

  .container-fluid.px-0 {

    padding-left: 15px !important;

    padding-right: 15px !important

  }



  .container-fluid.px-0>.row {

    margin-left: -12px !important;

    margin-right: -12px !important

  }

}



.outer-wrap2,

.outer-wrap1 {

  max-width: 1880px;

  width: 100%;

  margin-left: auto;

  margin-right: auto

}



.outer-wrap3 {

  max-width: 1445px;

  background-color: var(--white-color);

  margin-left: auto;

  margin-right: auto;

  padding-top: var(--section-space);

  padding-bottom: calc(var(--section-space) - 30px)

}



@media(min-width: 1922px) {

  .hd-container1 {

    max-width: 2000px

  }

}



@media(max-width: 1500px) {

  .outer-wrap3 {

    max-width: 1350px

  }

}



@media(max-width: 1399px) {

  .outer-wrap3 {

    max-width: 1140px

  }

}



@media(max-width: 991px) {

  .outer-wrap3 {

    padding-top: var(--section-space-mobile);

    padding-bottom: calc(var(--section-space-mobile) - 30px)

  }

  .flow-step {

    margin: 10px 0;

   }

   #Perfect-Package{

    line-height: 1.5;

   }

}



@media(min-width: 1399px) {

  .row:not([class*=gx-]) {

    --bs-gutter-x: 30px

  }

}



.gy-gx {

  --bs-gutter-y: var(--bs-gutter-x)

}



.gy-30 {

  --bs-gutter-y: 30px

}



.gx-2px {

  --bs-gutter-x: 2px

}



@media(min-width: 1399px) {

  .gx-20 {

    --bs-gutter-x: 20px

  }



  .gx-10 {

    --bs-gutter-x: 10px

  }



  .gx-25 {

    --bs-gutter-x: 25px

  }



  .gx-50 {

    --bs-gutter-x: 50px

  }



  .gx-55 {

    --bs-gutter-x: 55px

  }



  .gx-30 {

    --bs-gutter-x: 30px

  }



  .gx-60 {

    --bs-gutter-x: 60px

  }



  .gx-70 {

    --bs-gutter-x: 70px

  }



  .gx-80 {

    --bs-gutter-x: 80px

  }

}



select,

.form-control,

.form-select,

textarea,

input {

  height: 60px;

  padding: 0 45px 0 30px;

  border: 1px solid var(--border-color);

  color: var(--body-color);

  background-color: var(--body-bg);

  border-radius: 9999px;

  border-radius: 0;

  font-size: 16px;

  width: 100%

}



select:focus,

.form-control:focus,

.form-select:focus,

textarea:focus,

input:focus {

  outline: 0;

  color: var(--body-color);

  box-shadow: none;

  background-color: var(--body-bg);

  border-color: var(--border-color)

}



select::-moz-placeholder,

.form-control::-moz-placeholder,

.form-select::-moz-placeholder,

textarea::-moz-placeholder,

input::-moz-placeholder {

  color: var(--body-color)

}



select::-moz-placeholder,

.form-control::-moz-placeholder,

.form-select::-moz-placeholder,

textarea::-moz-placeholder,

input::-moz-placeholder {

  color: var(--body-color)

}



select::placeholder,

.form-control::placeholder,

.form-select::placeholder,

textarea::placeholder,

input::placeholder {

  color: var(--body-color)

}



.form-select,

select {

  display: block;

  width: 100%;

  line-height: 1.5;

  vertical-align: middle;

  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E");

  background-position: right 26px center;

  background-repeat: no-repeat;

  background-size: 16px 12px;

  -webkit-appearance: none;

  -moz-appearance: none;

  appearance: none;

  cursor: pointer

}



input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

  -webkit-appearance: none;

  margin: 0

}



input[type=number] {

  -moz-appearance: textfield

}



textarea.form-control,

textarea {

  min-height: 150px;

  padding-top: 16px;

  padding-bottom: 17px;

  border-radius: 0

}



input[type=checkbox] {

  visibility: hidden;

  opacity: 0;

  display: inline-block;

  vertical-align: middle;

  width: 0;

  height: 0;

  display: none

}



input[type=checkbox]:checked~label:before {

  content: "";

  color: var(--white-color);

  background-color: var(--theme-color);

  border-color: var(--theme-color)

}



input[type=checkbox]~label {

  position: relative;

  padding-left: 30px;

  cursor: pointer;

  display: block

}



input[type=checkbox]~label:before {

  content: "";

  font-family: var(--icon-font);

  font-weight: 700;

  position: absolute;

  left: 0px;

  top: 3.5px;

  background-color: #f1f1f1;

  border: 1px solid rgba(196, 198, 200, .3);

  height: 20px;

  width: 20px;

  line-height: 20px;

  text-align: center;

  font-size: 12px

}



input[type=radio] {

  visibility: hidden;

  opacity: 0;

  display: inline-block;

  vertical-align: middle;

  width: 0;

  height: 0;

  display: none

}



input[type=radio]~label {

  position: relative;

  padding-left: 30px;

  cursor: pointer;

  line-height: 1;

  display: inline-block;

  font-weight: 600;

  margin-bottom: 0

}



input[type=radio]~label::before {

  content: "";

  position: absolute;

  font-family: var(--icon-font);

  left: 0;

  top: -2px;

  width: 20px;

  height: 20px;

  padding-left: .5px;

  font-size: .4em;

  line-height: 18.95px;

  text-align: center;

  border: 1px solid var(--theme-color);

  border-radius: 100%;

  font-weight: 700;

  background: var(--body-bg);

  color: rgba(0, 0, 0, 0);

  transition: all .2s ease

}



input[type=radio]:checked~label::before {

  border-color: var(--theme-color);

  background-color: var(--theme-color);

  color: var(--white-color)

}



label {

  margin-bottom: .5em;

  margin-top: -0.3em;

  display: block;

  color: var(--title-color);

  font-family: var(--body-font);

  font-size: 16px

}



.form-group {

  margin-bottom: var(--bs-gutter-x);

  position: relative

}



.form-group>i {

  position: absolute;

  right: calc(var(--bs-gutter-x)/2 + 30px);

  top: 21px;

  font-size: 16px;

  color: #a0abb4

}



.form-group.has-label>i {

  top: 50px

}



textarea.is-invalid,

select.is-invalid,

input.is-invalid,

.was-validated input:invalid {

  border: 1px solid var(--error-color) !important;

  background-position: right calc(.375em + .8875rem) center

}



textarea.is-invalid:focus,

select.is-invalid:focus,

input.is-invalid:focus,

.was-validated input:invalid:focus {

  outline: 0;

  box-shadow: none

}



textarea.is-invalid {

  background-position: top calc(.375em + .5875rem) right calc(.375em + .8875rem);

}



.row.no-gutters>.form-group {

  margin-bottom: 0

}



.form-messages {

  display: none;

  margin: 0;

  padding: 10px 15px;

  margin-top: 15px;

  border-radius: 4px

}



.form-messages>pre:last-child {

  margin-bottom: 0

}



.form-messages>pre:first-of-type {

  margin-top: 0

}



.form-messages.success {

  background-color: var(--success-color);

  color: var(--white-color);

  display: block

}



.form-messages.error {

  background-color: var(--error-color);

  color: var(--white-color);

  display: block

}



.form-messages pre {

  padding: 0;

  background-color: rgba(0, 0, 0, 0);

  color: inherit

}



.row>.slick-list {

  padding-left: 0;

  padding-right: 0

}



.slick-track>[class*=col] {

  flex-shrink: 0;

  width: 100%;

  max-width: 100%;

  padding-right: calc(var(--bs-gutter-x)/2);

  padding-left: calc(var(--bs-gutter-x)/2);

  margin-top: var(--bs-gutter-y)

}



.slick-track {

  min-width: 100%

}



.slick-slide img {

  display: inline-block

}



.slick-dots {

  list-style-type: none;

  padding: 0;

  margin: 10px 0 30px 0;

  line-height: 0;

  text-align: center;

  height: -moz-max-content;

  height: max-content;

  line-height: 0

}



.slick-dots li {

  display: inline-block;

  margin-right: 7px

}



.slick-dots li:last-child {

  margin-right: 0

}



.slick-dots button {

  font-size: 0;

  padding: 0;

  background-color: rgba(0, 0, 0, 0);

  width: 60px;

  height: 15px;

  line-height: 0;

  border: 3px solid var(--title-color);

  background-color: var(--dots-bg, transparent);

  transition: all ease .4s;

  position: relative

}



.slick-dots button:hover,

.slick-dots .slick-active button {

  background-color: var(--theme-color);

  border-color: var(--theme-color)

}



.slick-arrow {

  display: inline-block;

  padding: 0;

  position: absolute;

  background-color: var(--secondary-color);

  color: var(--theme-color);

  top: 50%;

  border: none;

  left: var(--pos-x, -40px);

  width: var(--icon-size, 50px);

  height: var(--icon-size, 50px);

  font-size: var(--icon-font-size, 16px);

  margin-top: calc(var(--icon-size, 50px)/-2);

  z-index: 2;

  border-radius: 0;

  transition: all ease .4s

}



.slick-arrow.default {

  position: relative;

  --pos-x: 0;

  margin-top: 0

}



.slick-arrow.slick-next {

  right: var(--pos-x, -40px);

  left: auto

}



.slick-arrow:hover {

  background-color: var(--theme-color);

  color: var(--white-color);

  border-color: rgba(0, 0, 0, 0)

}



.arrow-margin .slick-arrow {

  top: calc(50% - 30px)

}



.arrow-wrap .slick-arrow {

  opacity: 0;

  visibility: hidden

}



.arrow-wrap:hover .slick-arrow {

  --pos-x: -100px;

  opacity: 1;

  visibility: visible

}



.has-slide-shadow {

  margin-top: -30px;

  margin-bottom: -30px

}



.has-slide-shadow .slick-slide {

  margin-top: 30px;

  margin-bottom: 30px

}



.arrows-style1 {

  display: flex;

  justify-content: space-between;

  max-width: calc(100% - var(--padding-x, 492.5px)*2);

  width: 100%;

  margin: 20px auto 28px auto;

  position: relative;

  z-index: 1

}



.arrows-style1 button {

  border: none;

  padding: 0;

  line-height: 1;

  background-color: rgba(0, 0, 0, 0);

  color: var(--theme-color);

  text-transform: uppercase;

  font-size: 14px;

  font-weight: 500;

  letter-spacing: .22em;

  display: inline-flex;

  gap: 10px

}



.arrows-style1 button .arrow {

  width: 15px;

  height: 15px;

  display: inline-block;

  background-color: currentColor;

  -webkit-clip-path: var(--path);

  clip-path: var(--path);

  vertical-align: middle

}



.arrows-style1 button:hover {

  color: var(--title-color)

}



.arrows-style1 [data-slick-prev] {

  --path: polygon(100% 0, 60% 49%, 100% 100%, 0 50%)

}



.arrows-style1 [data-slick-next] {

  flex-direction: row-reverse;

  --path: polygon(0 0, 100% 50%, 0 100%, 40% 50%)

}



.arrows-style2 .slick-arrow {

  background-color: var(--white-color);

  color: var(--theme-color)

}



.arrows-style2 .slick-arrow:hover {

  background-color: var(--theme-color);

  color: var(--white-color)

}



@media(max-width: 1500px) {

  .slick-arrow {

    --arrow-horizontal: -20px

  }



  .arrows-style1 {

    --padding-x: 330px

  }

}



@media(max-width: 1399px) {

  .slick-arrow {

    --arrow-horizontal: 40px

  }



  .arrows-style1 {

    --padding-x: 220px

  }

}



@media(max-width: 1199px) {

  .arrows-style1 {

    --padding-x: 170px

  }

}



@media(max-width: 991px) {

  .slick-arrow {

    --icon-size: 40px;

    margin-right: 40px

  }



  .slick-arrow.slick-next {

    margin-right: 0;

    margin-left: 40px

  }



  .arrows-style1 {

    --padding-x: 100px

  }



  .slick-dots {

    margin: 8px 0 38px 0

  }

}



@media(max-width: 767px) {



  .arrows-style1 {

    --padding-x: 10px

  }

}



.vs-menu-wrapper {

  position: fixed;

  top: 0;

  left: 0;

  bottom: 0;

  background-color: rgba(0, 0, 0, .6);

  z-index: 999999;

  width: 0;

  width: 100%;

  height: 100%;

  transition: all ease .8s;

  opacity: 0;

  visibility: hidden

}



.vs-menu-wrapper .mobile-logo {

  padding-bottom: 30px;

  padding-top: 40px;

  display: block;

  text-align: center;

  background-color: rgba(154, 86, 58, .1)

}



.vs-menu-wrapper .mobile-logo img {

  max-width: 220px

}



.vs-menu-wrapper .vs-menu-toggle {

  border: none;

  font-size: 22px;

  position: absolute;

  right: 10px;

  top: 10px;

  padding: 0;

  line-height: 1;

  width: 33px;

  height: 33px;

  line-height: 34px;

  font-size: 18px;

  z-index: 1;

  color: var(--white-color);

  background-color: var(--theme-color);

  border-radius: 50%

}



.vs-menu-wrapper .vs-menu-toggle:hover {

  background-color: var(--secondary-color);

  color: var(--white-color)

}



.vs-menu-wrapper .vs-menu-area {

  width: 100%;

  max-width: 310px;

  background-color: var(--body-bg);

  border-right: 3px solid var(--theme-color);

  height: 100%;

  position: relative;

  left: -110%;

  opacity: 0;

  visibility: hidden;

  transition: all ease 1s;

  z-index: 1

}



.vs-menu-wrapper.vs-body-visible {

  opacity: 1;

  visibility: visible

}



.vs-menu-wrapper.vs-body-visible .vs-menu-area {

  left: 0;

  opacity: 1;

  visibility: visible

}



.vs-mobile-menu {

  overflow-y: scroll;

  max-height: calc(100vh - 175px);

  padding-bottom: 40px;

  margin-top: 33px;

  text-align: left

}



.vs-mobile-menu::-webkit-scrollbar-track {

  -webkit-box-shadow: inset 0 0 6px rgba(154, 86, 58, .2);

  background-color: #000

}



.vs-mobile-menu::-webkit-scrollbar {

  width: 6px;

  background-color: #000

}



.vs-mobile-menu::-webkit-scrollbar-thumb {

  background-color: var(--theme-color)

}



.vs-mobile-menu ul {

  margin: 0;

  padding: 0 0

}



.vs-mobile-menu ul li {

  border-bottom: 1px solid var(--border-color);

  list-style-type: none

}



.vs-mobile-menu ul li li:first-child {

  border-top: 1px solid var(--border-color)

}



.vs-mobile-menu ul li a {

  display: block;

  position: relative;

  padding: 12px 0;

  line-height: 1;

  font-size: 16px;

  text-transform: capitalize;

  color: var(--title-color);

  font-weight: 500

}



.vs-mobile-menu ul li a:before {

  content: "";

  font-family: var(--icon-font);

  position: relative;

  left: 0;

  top: 0;

  margin-right: 10px;

  display: inline-block

}



.vs-mobile-menu ul li.vs-active>a {

  color: var(--theme-color)

}



.vs-mobile-menu ul li.vs-active>a:before {

  transform: rotate(90deg)

}



.vs-mobile-menu ul li ul li {

  padding-left: 20px

}



.vs-mobile-menu ul li ul li:last-child {

  border-bottom: none

}



.vs-mobile-menu ul .vs-item-has-children>a .vs-mean-expand {

  position: absolute;

  right: 0;

  top: 50%;

  font-weight: 400;

  font-size: 12px;

  width: 25px;

  height: 25px;

  line-height: 25px;

  margin-top: -12.5px;

  display: inline-block;

  text-align: center;

  background-color: var(--smoke-color);

  color: var(--title-color);

  box-shadow: 0 0 20px -8px rgba(154, 86, 58, .5);

  border-radius: 50%

}



.vs-mobile-menu ul .vs-item-has-children>a .vs-mean-expand:before {

  content: "";

  font-family: var(--icon-font)

}



.vs-mobile-menu ul .vs-item-has-children.vs-active>a .vs-mean-expand:before {

  content: ""

}



.vs-mobile-menu>ul {

  padding: 0 40px

}



.vs-mobile-menu>ul>li:last-child {

  border-bottom: none

}



.vs-menu-toggle {

  width: 50px;

  height: 50px;

  padding: 0;

  font-size: 24px;

  border: none;

  background-color: var(--theme-color);

  color: var(--white-color);

  display: inline-block;

  border-radius: 0

}



@media(max-width: 767px) {

  .vs-menu-toggle {

    width: 45px;

    height: 45px

  }

}



.vs-menu-toggle.style-text,

.vs-menu-toggle.style-text-white {

  width: auto;

  height: auto;

  background-color: rgba(0, 0, 0, 0);

  color: var(--title-color);

  font-size: 20px

}



.vs-menu-toggle.style-text i,

.vs-menu-toggle.style-text-white i {

  margin-right: 10px

}



.vs-menu-toggle.style-text-white {

  color: var(--white-color)

}



@media(max-width: 400px) {

  .vs-menu-wrapper .vs-menu-area {

    width: 100%;

    max-width: 270px

  }



  .vs-mobile-menu>ul {

    padding: 0 20px

  }

}



.xdsoft_datetimepicker {

  z-index: 1080

}



.xdsoft_datetimepicker .xdsoft_datepicker {

  width: 300px

}



.xdsoft_datetimepicker .xdsoft_current {

  color: var(--theme-color)

}



.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,

.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div.xdsoft_current {

  background-color: var(--theme-color);

  border-color: var(--theme-color);

  color: var(--white-color)

}



.xdsoft_datetimepicker .xdsoft_calendar td:hover,

.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box>div>div:hover {

  background-color: var(--title-color);

  color: var(--white-color)

}



.preloader {

  position: fixed;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  z-index: 999;

  background-color: var(--body-bg)

}



.preloader .vs-btn {

  padding: 15px 20px;

  border-radius: 0;

  font-size: 14px

}



.preloader-inner {

  text-align: center;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  line-height: 0

}



.preloader-inner img {

  display: block;

  margin: 0 auto 10px auto

}



.loader {

  width: 112px;

  height: 112px;

  border-radius: 50%;

  display: inline-block;

  position: relative;

  border: 3px solid;

  border-color: var(--theme-color) var(--theme-color) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);

  box-sizing: border-box;

  animation: rotationloader 1.5s linear infinite

}



.loader::after,

.loader::before {

  content: "";

  box-sizing: border-box;

  position: absolute;

  left: 0;

  right: 0;

  top: 0;

  bottom: 0;

  margin: auto;

  border: 3px solid;

  border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) var(--title-color) var(--title-color);

  width: 102px;

  height: 102px;

  border-radius: 50%;

  box-sizing: border-box;

  animation: rotationBackloader .7s linear infinite;

  transform-origin: center center

}



.loader::before {

  width: 92px;

  height: 92px;

  border-color: var(--theme-color) var(--theme-color) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);

  animation: rotationloader 2s linear infinite

}



@keyframes rotationloader {

  0% {

    transform: rotate(0deg)

  }



  100% {

    transform: rotate(360deg)

  }

}



@keyframes rotationBackloader {

  0% {

    transform: rotate(0deg)

  }



  100% {

    transform: rotate(-360deg)

  }

}



.vs-btn {

  background-color: var(--theme-color);

  color: var(--white-color);

  font-size: 14px;

  font-weight: 700;

  letter-spacing: .1em;

  line-height: 1;

  text-transform: uppercase;

  display: inline-block;

  padding: 17px 28px;

  border: none;

  position: relative;

  z-index: 1;

  text-align: center

}



.vs-btn:after,

.vs-btn:before {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  background-color: var(--title-color);

  z-index: -1;

  width: 53%;

  height: 0;

  transition: all ease .4s;

  opacity: 0;

  visibility: hidden

}



.vs-btn:after {

  right: 0;

  top: 0;

  left: auto;

  bottom: auto

}



.vs-btn:hover {

  color: var(--white-color)

}



.vs-btn:hover:before,

.vs-btn:hover:after {

  height: 100%;

  opacity: 1;

  visibility: visible

}



.vs-btn.style2 {

  padding: 17px 36px

}



.vs-btn.style4,

.vs-btn.style3 {

  font-weight: 500;

  letter-spacing: .22em;

  margin: 7px 0;

  padding: 17px 36.5px;

  background-color: rgba(0, 0, 0, 0)

}



.vs-btn.style4:before,

.vs-btn.style4:after,

.vs-btn.style3:before,

.vs-btn.style3:after {

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  width: auto;

  height: auto;

  opacity: 1;

  visibility: visible;

  transition: all ease .4s;

  background-color: rgba(0, 0, 0, 0)

}



.vs-btn.style4:before,

.vs-btn.style3:before {

  transform: scaleY(1.3) scaleX(0.81);

  border: 1px solid rgba(19, 43, 51, .25);

  z-index: -2

}



.vs-btn.style4:after,

.vs-btn.style3:after {

  transform: scale(1);

  z-index: -1;

  background-color: var(--theme-color);

  opacity: 1;

  visibility: visible

}



.vs-btn.style4:hover,

.vs-btn.style3:hover {

  color: var(--title-color)

}



.vs-btn.style4:hover::before,

.vs-btn.style3:hover::before {

  border-color: var(--theme-color);

  transform: scaleY(1) scaleX(1)

}



.vs-btn.style4:hover::after,

.vs-btn.style3:hover::after {

  opacity: 0;

  visibility: hidden;

  transform: scaleY(0.3) scaleX(0.58)

}



.vs-btn.style4 {

  color: var(--theme-color)

}



.vs-btn.style4:before {

  border-color: var(--white-color)

}



.vs-btn.style4:after {

  background-color: var(--white-color)

}



.vs-btn.style4:hover {

  color: var(--theme-color)

}



.vs-btn.style4:hover:before {

  border-color: var(--white-color)

}



.vs-btn.style4:hover:after {

  transform: scaleY(0.8) scaleX(0.95);

  opacity: 1;

  visibility: visible

}



.vs-btn.style5:hover {

  color: var(--theme-color)

}



.vs-btn.style5:after,

.vs-btn.style5:before {

  background-color: var(--white-color)

}



.vs-btn.style6 {

  background-color: var(--white-color);

  color: var(--theme-color);

  padding: 5px 20px 5px 5px

}



.vs-btn.style6 i {

  width: 50px;

  height: 50px;

  line-height: 50px;

  background-color: var(--theme-color);

  color: var(--white-color);

  margin-right: 10px;

  font-size: 18px;

  text-align: center

}



.vs-btn.style6:hover {

  color: var(--white-color)

}



.vs-btn.style7 {

  padding: 23px 37px

}



.vs-btn.style8 {

  background-color: #313c45;

  font-weight: 500

}



.vs-btn.style8::after,

.vs-btn.style8::before {

  background-color: var(--theme-color)

}



.vs-btn.style8:hover {

  color: var(--white-color)

}



.vs-btn.style10,

.vs-btn.style9 {

  padding: 10px 10px 10px 25px;

  letter-spacing: 0;

  font-weight: 500;

  font-size: 16px;

  background-color: var(--white-color);

  color: var(--theme-color);

  text-transform: capitalize

}



.vs-btn.style10 i,

.vs-btn.style9 i {

  width: var(--icon-size, 50px);

  height: var(--icon-size, 50px);

  line-height: var(--icon-size, 50px);

  display: inline-block;

  background-color: var(--theme-color);

  color: var(--white-color);

  margin-left: 15px;

  font-size: 18px;

  vertical-align: middle

}



.vs-btn.style10:hover,

.vs-btn.style9:hover {

  color: var(--white-color)

}



.vs-btn.style10 {

  box-shadow: 0 5px 30px 0 rgba(154, 86, 58, .12)

}



.vs-btn.style14,

.vs-btn.style11 {

  padding: 25px 35px;

  letter-spacing: 0;

  text-transform: capitalize;

  background-color: rgba(0, 0, 0, 0);

  border: 2px solid var(--border-color);

  color: var(--title-color);

  font-size: 16px;

  font-weight: 500

}



.vs-btn.style14 i,

.vs-btn.style11 i {

  margin-right: 10px

}



.vs-btn.style14:hover,

.vs-btn.style11:hover {

  border-color: rgba(0, 0, 0, 0);

  color: var(--white-color)

}



.vs-btn.style13,

.vs-btn.style12 {

  padding: 22px 37px;

  font-weight: 400;

  letter-spacing: .05em;

  text-transform: capitalize;

  font-family: var(--title-font);

  font-size: 16px

}



.vs-btn.style13 {

  background-color: rgba(0, 0, 0, 0);

  color: var(--theme-color)

}



.vs-btn.style13 i {

  margin-right: 10px

}



.vs-btn.style13:hover {

  color: var(--white-color)

}



.vs-btn.style14 {

  padding: 21px 37px

}



.vs-btn-group {

  display: flex;

  gap: 30px;

  flex-wrap: wrap;

  align-items: center;

  margin: 30px 0 30px 0

}



.icon-btn {

  border: none;

  width: var(--icon-size, 40px);

  height: var(--icon-size, 40px);

  line-height: var(--icon-size, 40px);

  font-size: var(--icon-font-size, 14px);

  background-color: var(--white-color);

  color: var(--theme-color);

  display: inline-block;

  text-align: center;

  padding: 0;

  vertical-align: middle;

  transition: all ease .4s

}



.icon-btn:hover {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.icon-btn.style3,

.icon-btn.style2 {

  --icon-size: 30px;

  background-color: var(--title-color);

  color: var(--white-color);

  font-size: 14px

}



.icon-btn.style3:hover,

.icon-btn.style2:hover {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.icon-btn.style3 {

  border-radius: 50%

}



.icon-btn.style4 {

  background-color: var(--theme-color);

  border-radius: 50%;

  color: var(--white-color);

  --icon-size: 50px;

  --icon-font-size: 18px

}



.icon-btn.style4:hover {

  color: var(--white-color);

  background-color: var(--title-color)

}



.play-btn {

  display: inline-block;

  position: relative;

  z-index: 1

}



.play-btn>i {

  display: inline-block;

  width: var(--icon-size, 124px);

  height: var(--icon-size, 124px);

  line-height: var(--icon-size, 124px);

  text-align: center;

  background-color: var(--theme-color);

  color: var(--white-color);

  font-size: var(--icon-font-size, 1.5em);

  border-radius: 50%;

  z-index: 1;

  transition: all ease .4s

}



.play-btn:after,

.play-btn:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  background-color: var(--theme-color);

  z-index: -1;

  border-radius: 50%;

  transition: all ease .4s

}



.play-btn:after {

  animation-delay: 2s

}



.play-btn:hover:after,

.play-btn:hover::before,

.play-btn:hover i {

  background-color: var(--title-color);

  color: var(--white-color)

}



.play-btn.style2:after,

.play-btn.style2::before,

.play-btn.style2 i {

  border: 2px solid var(--white-color);

  background-color: rgba(0, 0, 0, 0)

}



.play-btn.style3 {

  --icon-size: 80px

}



.play-btn.style4:after,

.play-btn.style4::before,

.play-btn.style4 i {

  background-color: var(--white-color);

  color: var(--theme-color)

}



.play-btn.style4:hover:after,

.play-btn.style4:hover::before,

.play-btn.style4:hover i {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.watch-btn {

  display: inline-block;

  border: none;

  background-color: rgba(0, 0, 0, 0);

  text-align: center

}



.watch-btn .play-btn {

  --icon-size: 80px;

  --icon-font-size: 24px;

  margin-bottom: 20px

}



.watch-btn .btn-text {

  text-transform: uppercase;

  font-family: var(--title-font);

  font-size: 30px;

  display: block;

  line-height: 1;

  color: var(--title-color);

  width: -moz-max-content;

  width: max-content

}



.watch-btn:hover .btn-text {

  color: var(--theme-color)

}



.watch-btn.style2 .btn-text {

  color: var(--white-color)

}



.watch-btn.style2:hover .btn-text {

  color: var(--white-color);

  text-decoration: underline

}



.link-btn {

  font-weight: 600;

  font-size: 16px;

  display: inline-block;

  line-height: .8;

  position: relative;

  padding-bottom: 2px;

  margin-bottom: -2px;

  text-transform: capitalize

}



.link-btn i {

  margin-left: 7px;

  font-size: .9rem

}



.link-btn:before {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 0;

  height: 1px;

  background-color: var(--theme-color);

  transition: all ease .4s

}



.link-btn:hover {

  color: var(--theme-color)

}



.link-btn:hover::before {

  width: 100%

}



.link-btn.style2 {

  text-transform: uppercase;

  font-weight: 500;

  letter-spacing: .07em

}



.user-id-link {

  font-size: 26px;

  color: #7d858c;

  font-family: var(--title-font);

  display: inline-block;

  line-height: 1

}



.user-id-link:hover {

  color: var(--theme-color)

}



.scroll-btn {

  position: fixed;

  bottom: 300px;

  right: 30px;

  z-index: 94;

  opacity: 0;

  visibility: hidden;

  display: inline-block;

  border-radius: 50%

}



.scroll-btn i, .whatsapp-btn i {

  display: inline-block;

  background-color: var(--theme-color);

  color: var(--white-color);

  text-align: center;

  font-size: 16px;

  width: var(--btn-size, 50px);

  height: var(--btn-size, 50px);

  line-height: var(--btn-size, 50px);

  z-index: 2;

  border-radius: inherit;

  position: relative;

  transition: all ease .8s

}



.scroll-btn:before, .whatsapp-btn::before {

  content: "";

  position: absolute;

  left: var(--extra-shape, -6px);

  top: var(--extra-shape, -6px);

  right: var(--extra-shape, -6px);

  bottom: var(--extra-shape, -6px);

  background-color: var(--body-bg);

  border-radius: inherit;

  z-index: 1;

  transition: all ease .4s

}



.scroll-btn:focus i,

.scroll-btn:hover i {

  background-color: var(--title-color);

  color: var(--white-color)

}



.scroll-btn.show {

  bottom: 120px;

  opacity: 1;

  visibility: visible

}



@media(max-width: 767px) {

  .gallerybox img {

    height: 100% !important;

}

  .scroll-btn {

    --btn-size: 40px;

    --extra-shape: -4px;

    right: 15px;

    bottom: 50px

  }



  .scroll-btn.show {

    bottom: 15px

  }

}



.scrollToTop {

  position: fixed;

  right: 85px;

  bottom: 500px;

  opacity: 0;

  visibility: hidden;

  transition: all ease .4s;

  z-index: 96

}



.scrollToTop.show {

  bottom: 60px;

  opacity: 1;

  visibility: visible

}



.vs-icon {

  display: inline-block;

  width: var(--icon-size, 100px);

  height: var(--icon-size, 100px);

  line-height: var(--icon-size, 100px);

  background-color: var(--theme-color);

  color: var(--white-color);

  text-align: center;

  position: relative;

  z-index: 1;

  border-radius: 50%;

  margin: var(--border-gap, 5px);

  transition: all ease .4s

}



.vs-icon:before {

  content: "";

  position: absolute;

  top: calc(var(--border-gap, 5px)/-1);

  right: calc(var(--border-gap, 5px)/-1);

  bottom: calc(var(--border-gap, 5px)/-1);

  left: calc(var(--border-gap, 5px)/-1);

  border: 1px dashed var(--theme-color);

  border-radius: inherit;

  transition: all ease .4s;

  animation: spin 30s linear infinite

}



.vs-icon.style2 {

  background-color: #e7e7e7;

  box-shadow: 0 0 0 8px var(--white-color);

  margin: 8px

}



.vs-icon.style2:before {

  display: none

}



.vs-icon.style3 {

  background-color: #faf5eb

}



.circle-btn {

  width: var(--btn-size, 100px);

  height: var(--btn-size, 100px);

  position: relative;

  font-size: 1.66em;

  border-radius: 50%;

  background-color: var(--white-color);

  color: var(--theme-color);

  transition: all ease .4s

}



.circle-btn .btn-icon {

  display: inline-block;

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  line-height: 1;

  width: 53%;

  height: 53%;

  line-height: 1;

  text-align: center;

  border: 1px solid rgba(154, 86, 58, .4);

  border-radius: inherit;

  font-size: .8em;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: all ease .4s;

  z-index: 1

}



.circle-btn .btn-icon:hover {

  border-color: rgba(0, 0, 0, 0);

  background-color: var(--theme-color);

  color: var(--white-color)

}



.circle-btn .btn-text {

  width: 71%;

  height: 71%;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%)

}



.circle-btn svg {

  overflow: initial;

  animation: spin 27s infinite linear

}



.circle-btn path {

  fill: none

}



.circle-btn text {

  fill: currentColor

}



.circle-btn.style2 {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.circle-btn.style2 .btn-icon {

  border-color: rgba(255, 255, 255, .4);

  color: var(--white-color)

}



.circle-btn.style2 .btn-icon:hover {

  background-color: var(--white-color);

  border-color: rgba(0, 0, 0, 0);

  color: var(--theme-color)

}



.circle-btn.style3 {

  --btn-size: 80px;

  background-color: var(--theme-color);

  color: var(--white-color)

}



.circle-btn.style3 .btn-icon {

  font-size: 16px;

  border-color: var(--white-color);

  color: var(--white-color);

  border-style: dashed

}



.circle-btn.style3 .btn-icon:hover {

  background-color: var(--white-color);

  color: var(--theme-color);

  border-color: rgba(0, 0, 0, 0)

}



.circle-btn:hover svg {

  animation-play-state: paused

}



.bar-btn {

  border: none;

  display: inline-block;

  padding: 0;

  line-height: 1;

  font-size: 25px;

  vertical-align: middle;

  background-color: rgba(0, 0, 0, 0);

  width: 40px;

  height: 26px;

  position: relative;

  overflow: hidden

}



.bar-btn .bar:after,

.bar-btn .bar:before {

  content: "";

  width: 100%;

  height: 2px;

  display: inline-block;

  position: absolute;

  right: 0;

  top: 0;

  transition: all ease .4s;

  background-color: var(--title-color)

}



.bar-btn .bar:after {

  left: -140%;

  right: auto;

  background-color: var(--theme-color)

}



.bar-btn .bar:nth-child(2):before,

.bar-btn .bar:nth-child(2):after {

  top: 50%;

  margin-top: -1px

}



.bar-btn .bar:nth-child(3):after,

.bar-btn .bar:nth-child(3):before {

  top: auto;

  bottom: 0;

  width: 30px

}



.bar-btn .bar:nth-child(3):after {

  left: auto;

  right: -120%

}



.bar-btn:hover {

  color: var(--theme-color)

}



.bar-btn:hover .bar:after {

  left: 0

}



.bar-btn:hover .bar:before {

  right: -110%

}



.bar-btn:hover .bar:nth-child(3):before {

  right: 110%

}



.bar-btn:hover .bar:nth-child(3)::after {

  left: auto;

  right: 0

}



.bar-btn.style2 .bar:before {

  background-color: var(--white-color)

}



.bar-btn.style2:hover .bar:before {

  background-color: var(--theme-color)

}



@media(max-width: 767px) {

  .play-btn {

    --icon-size: 60px

  }



  .watch-btn .play-btn {

    --icon-size: 50px;

    --icon-font-size: 16px

  }



  .watch-btn .btn-text {

    font-size: 18px

  }



  .scrollToTop {

    right: 20px

  }



  .scrollToTop.show {

    bottom: 20px

  }



  .user-id-link {

    font-size: 18px

  }

}



.sec-btns {

  margin-bottom: calc(var(--section-title-space));

  display: inline-flex;

  gap: 10px

}



.title-area {

  margin-bottom: calc(var(--section-title-space) - 15px);

  position: relative

}



.sec-subtitle2,

.sec-subtitle {

  display: block;

  text-transform: uppercase;

  color: var(--theme-color);

  font-family: var(--body-font);

  font-weight: 500;

  letter-spacing: .22em;

  line-height: 1;

  margin-top: -0.1em;

  margin-bottom: 18px

}



.sec-subtitle4 {

  font-family: var(--title-font);

  font-weight: 400;

  color: var(--title-color);

  text-transform: uppercase;

  font-size: 24px;

  text-decoration: underline;

  text-underline-offset: 5px;

  text-decoration-thickness: 1px;

  text-decoration-color: rgba(154, 86, 58, .22);

  margin-bottom: 20px;

  display: block;

  text-align: center

}



.sec-subtitle5 {

  font-size: 18px;

  font-family: var(--title-font);

  font-weight: 400;

  display: block;

  line-height: 1;

  margin-bottom: 30px

}



.sec-subtitle5 .inner-text {

  color: var(--white-color);

  background-color: var(--theme-color);

  padding: 5px 8px;

  border-radius: 4px;

  display: inline-block;

  font-size: 16px

}



.sec-subtitle2 {

  font-size: 18px

}



.sec-title {

  font-size: 55px;

  margin-top: -0.25em

}



.sec-title2 {

  font-size: 60px;

  margin-top: -0.22em

}



.sec-title3 {

  margin-top: -0.22em

}



.sec-title4 {

  font-size: 50px;

  margin-top: -0.13em;

  line-height: 1;

  margin-bottom: 17px

}



.sec-title4 .inner-text {

  font-size: 24px;

  display: inline-block;

  color: var(--theme-color);

  max-width: 70px;

  text-align: left

}



.sec-subtitle3 {

  font-size: 26px;

  text-transform: uppercase;

  line-height: 1;

  margin: -0.13em 0 40px 0;

  border-bottom: 1px solid var(--border-color);

  padding-bottom: 21px

}



.sec-shape {

  margin: 33px 0 60px 0

}



.sec-subtext {

  background-color: #faf5eb;

  display: inline-block;

  padding: 6px 17px 6px 20px;

  margin-left: 5px

}



.sec-line {

  border-top: 1px solid rgba(101, 117, 130, .35)

}



.sec-text {

  margin: 0 0 20px 0;

  padding-bottom: 7px

}



.sec-text2 {

  font-size: 20px;

  font-family: var(--title-font)

}



.sec-shape2 {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  top: -17%;

  opacity: .13

}



.sec-shape2 img {

  animation: moving-x 8s linear infinite

}



@media(max-width: 1500px) {



  .sec-title4,

  .sec-title2 {

    font-size: 44px

  }



  .sec-title {

    font-size: 40px

  }



  .sec-subtitle2,

  .sec-subtitle {

    margin-bottom: 25px

  }



  .sec-shape {

    margin: 18px 0 45px 0

  }



  .sec-subtitle5 {

    font-size: 20px;

    margin-bottom: 25px

  }

}



@media(max-width: 1199px) {

  .sec-title2 {

    font-size: 42px

  }

}



@media(max-width: 991px) {

  .sec-title4 {

    font-size: 36px;

    margin-bottom: 13px

  }



  .sec-title2,

  .sec-title {

    font-size: 36px

  }



  .sec-subtitle2,

  .sec-subtitle {

    letter-spacing: .1em

  }



  .sec-title4 .inner-text {

    font-size: 20px;

    max-width: 70px

  }

}



@media(max-width: 767px) {

  .sec-title4 {

    font-size: 30px;

    margin-bottom: 10px

  }



  .sec-text {

    font-size: 14px

  }



  .sec-title2,

  .sec-title {

    font-size: 28px

  }



  .sec-subtitle2,

  .sec-subtitle {

    letter-spacing: .05em;

    font-size: 14px;

    margin-bottom: 18px

  }



  .sec-subtitle3 {

    font-size: 22px;

    margin: -0.13em 0 30px 0;

    padding-bottom: 21px

  }



  .sec-text2 {

    font-size: 16px

  }

}



@media(max-width: 767px) {

  .title-area {

    margin-bottom: 40px

  }

}



.parallax__container {

  clip: rect(0, auto, auto, 0);

  height: 100%;

  left: 0;

  overflow: hidden;

  position: absolute;

  top: 0;

  width: 100%;

  z-index: -100

}



.parallax {

  position: fixed;

  top: 0;

  transform: translate3d(0, 0, 0);

  transform-style: preserve-3d;

  width: 100%;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover

}



.link-overlay {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  z-index: 4

}



.image-scale-hover {

  overflow: hidden

}



.image-scale-hover img {

  transition: all ease .4s;

  transform: scale(1.008)

}



.image-scale-hover:hover img {

  transform: scale(1.2)

}



.image-box-hover .box-img {

  overflow: hidden;

  position: relative

}



.image-box-hover .box-img:before {

  content: "";

  position: absolute;

  left: 150%;

  top: -50%;

  height: 200%;

  width: 100px;

  background-color: var(--white-color);

  z-index: 1;

  opacity: .3;

  transform: rotate(-40deg);

  transition: all ease .8s

}



.image-box-hover .box-img img {

  transition: all ease .4s;

  transform: scale(1)

}



.image-box-hover:hover .box-img:before {

  animation: boxHover 1s

}



.image-box-hover:hover .box-img img {

  transform: scale(1.2)

}



@keyframes boxHover {

  to {

    left: -120%

  }

}



.mega-hover {

  position: relative;

  overflow: hidden

}



.mega-hover img {

  transition: all 2s ease;

  transform: scale(1)

}



.mega-hover:after,

.mega-hover:before {

  content: "";

  position: absolute;

  pointer-events: none;

  opacity: 1;

  z-index: 3;

  transform: rotate(5deg)

}



.mega-hover:before {

  top: -10%;

  right: 51%;

  bottom: -10%;

  left: 50%;

  background: rgba(255, 255, 255, .3)

}



.mega-hover:after {

  top: 50%;

  right: -10%;

  bottom: 50%;

  left: -10%;

  background: rgba(255, 255, 255, .6)

}



.mega-hover:hover:before {

  left: 0;

  right: 0;

  opacity: 0;

  transition: all 900ms linear

}



.mega-hover:hover:after {

  top: 0;

  bottom: 0;

  opacity: 0;

  transition: all 900ms linear

}



.mega-hover:hover img {

  transform: scale(1.05)

}



.new-label {

  font-size: 12px;

  background-color: var(--error-color);

  color: var(--white-color);

  line-height: 1;

  padding: 3px 5px 3px 5px;

  text-transform: capitalize;

  position: relative;

  top: -1px;

  font-weight: 500;

  margin-left: 5px;

  border-radius: 4px

}



.inner-wrap1 {

  border-top: 1px solid var(--border-color);

  border-bottom: 1px solid var(--border-color);

  padding: 60px 0 30px 0;

  margin: 50px 0

}



.shape-mockup-wrap {

  position: relative

}



.shape-mockup-wrap .container-fluid,

.shape-mockup-wrap .container {

  z-index: 1;

  position: relative

}



.shape-mockup {

  position: absolute;

  z-index: 1

}



.z-index-step1 {

  position: relative;

  z-index: 4 !important

}



.z-index-common {

  position: relative;

  z-index: 3

}



.z-index-n1 {

  z-index: -1

}



.media-body {

  flex: 1

}



.badge {

  position: absolute;

  width: -moz-fit-content;

  width: fit-content;

  display: inline-block;

  text-align: center;

  background-color: var(--theme-color);

  color: var(--white-color);

  padding: .35em .55em;

  border-radius: 50%

}



.social-style4 a,

.social-style1 a {

  display: inline-block;

  color: var(--white-color);

  line-height: 1;

  margin-right: 12px;

  font-size: 14px

}



.social-style4 a:last-child,

.social-style1 a:last-child {

  margin-right: 0

}



.social-style4 a:hover,

.social-style1 a:hover {

  color: var(--title-color)

}



.social-style4 .social-title,

.social-style1 .social-title {

  font-size: 14px;

  text-transform: uppercase;

  font-weight: 500;

  color: var(--white-color);

  display: inline-block;

  margin-right: 15px;

  letter-spacing: .03em

}



.social-style1 {

  background-color: #2d353c;

  padding: 10px 25px

}



.social-style1 a:hover {

  color: var(--theme-color)

}



.social-style5 a,

.social-style3 a,

.social-style2 a {

  display: inline-block;

  width: var(--icon-size, 55px);

  height: var(--icon-size, 55px);

  line-height: var(--icon-size, 55px);

  text-align: center;

  font-size: 18px;

  color: var(--body-color);

  border: 1px solid currentColor;

  margin-right: 8px;

  border-radius: 50%;

  transition: all ease .4s

}



.social-style5 a:last-child,

.social-style3 a:last-child,

.social-style2 a:last-child {

  margin-right: 0

}



.social-style5 a:hover,

.social-style3 a:hover,

.social-style2 a:hover {

  border-color: var(--theme-color)

}


.social-style5 a, .social-style3 a {
  --icon-size: 50px;
  font-size: 16px;
  border-color: #b69348;
  color: #b69348;
}   
   

.social-style5 a:hover,

.social-style3 a:hover {

  background-color: var(--theme-color);

  color: var(--white-color);

  border-color: rgba(0, 0, 0, 0)

}



.social-style5 a {

  --icon-size: 40px;

  font-size: 14px

}



.curb-shape1 {

  -webkit-clip-path: path("M 41 63.997 C 41 63.997 329.963 -55.313 388 32.998 C 409.037 70.308 447.963 105.687 549 150.998 C 610.037 178.308 670.963 244.686 539 308.998 C 487.037 333.308 447.963 369.687 428 416.997 C 408.037 464.308 320.963 561.687 158 607.998 C 98.037 623.309 21 643.687 1 507.997 C -7.963 417.308 84.963 195.686 39 68.998");

  clip-path: path("M 41 63.997 C 41 63.997 329.963 -55.313 388 32.998 C 409.037 70.308 447.963 105.687 549 150.998 C 610.037 178.308 670.963 244.686 539 308.998 C 487.037 333.308 447.963 369.687 428 416.997 C 408.037 464.308 320.963 561.687 158 607.998 C 98.037 623.309 21 643.687 1 507.997 C -7.963 417.308 84.963 195.686 39 68.998");

  width: 618px;

  height: 620px;

  background-color: rgba(252, 222, 204, .35);

  z-index: 1;

  position: relative

}



.arrow-shape {

  line-height: 1;

  color: var(--theme-color)

}



.arrow-shape .arrow {

  display: inline-block;

  width: var(--arrow-size, 14px);

  height: var(--arrow-size, 14px);

  background-color: currentColor;

  -webkit-clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 55%);

  clip-path: polygon(0 100%, 50% 0, 100% 100%, 50% 55%);

  margin-right: 4px;

  opacity: 1;

  transition: all ease .4s

}



.arrow-shape .arrow:last-child {

  margin-right: 0

}



.big-letter {

  font-size: 300px;

  color: var(--title-color);

  font-family: var(--title-font);

  opacity: .06;

  line-height: 1;

  display: block

}



.body-gradient-1 {

  position: absolute;

  left: 0;

  right: 0;

  top: -100px;

  bottom: 0;

  background-image: linear-gradient(to bottom, transparent 0%, rgba(252, 242, 238, 0.7) 10%, transparent 100%);

  z-index: -1

}



.svg-hidden {

  position: absolute;

  width: 0;

  height: 0

}



.divider-style1 {

  position: relative;

  max-width: var(--main-container);

  margin-left: auto;

  margin-right: auto

}



.divider-style1:before {

  content: "";

  position: absolute;

  left: 0;

  top: 50%;

  height: 2px;

  margin-top: -1px;

  width: 100%;

  z-index: -1;

  background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0, var(--theme-color) 50%, rgba(255, 255, 255, 0) 100%)

}



.divider-style1 .divider-icon {

  width: 80px;

  height: 80px;

  line-height: 80px;

  text-align: center;

  color: var(--white-color);

  background-color: var(--white-color);

  border-radius: 50%;

  margin: 0 auto;

  display: block

}



.divider-style2 {

  border-top: 1px solid #e9e9e9;

  max-width: var(--main-container);

  margin-left: auto;

  margin-right: auto

}



@media(min-width: 1921px) {

  .d-hd-none {

    display: none !important

  }

}



@media(min-width: 1500px) {

  .d-xxxl-block {

    display: block !important

  }

}



.font-icon {

  font-family: var(--icon-font)

}



.font-title {

  font-family: var(--title-font)

}



.font-body {

  font-family: var(--body-font)

}



.fw-light {

  font-weight: 300

}



.fw-normal {

  font-weight: 400

}



.fw-medium {

  font-weight: 500

}



.fw-semibold {

  font-weight: 600

}



.fw-bold {

  font-weight: 700

}



.fw-extrabold {

  font-weight: 800

}



.fs-md {

  font-size: 18px

}



.fs-xs {

  font-size: 14px

}



.fs-20 {

  font-size: 20px

}



.fs-22 {

  font-size: 22px

}



.fs-26 {

  font-size: 26px

}



@media(max-width: 767px) {

  .fs-26 {

    font-size: 22px

  }



  .fs-22 {

    font-size: 20px

  }



  .fs-20 {

    font-size: 18px

  }



  .fs-md {

    font-size: 16px

  }

}



.bg-theme {

  background-color: var(--theme-color) !important

}



.bg-vs-secondary {

  background-color: var(--secondary-color) !important

}



.bg-smoke {

  background-color: var(--smoke-color) !important

}



.bg-vs-light {

  background-color: var(--light-color) !important

}



.bg-white {

  background-color: var(--white-color) !important

}



.bg-black {

  background-color: var(--black-color) !important

}



.bg-title {

  background-color: var(--title-color) !important

}



.background-image,

[data-bg-src] {

  background-repeat: no-repeat;

  background-size: cover;

  background-position: center center

}



.bg-fluid {

  background-repeat: no-repeat;

  background-size: 100% 100%;

  background-position: center center

}



.bg-light-2 {

  background-color: #fde5d7

}



.bg-light-3 {

  background-color: rgba(253, 235, 224, .36)

}



.bg-light-4 {

  background-color: rgb(243 237 233 / 50%)

}



.bg-light-5 {

  background-color: #fcf2ee

}



.bg-auto {

  background-size: auto auto

}



.bg-gradient-1 {

  background-image: linear-gradient(to bottom, #fcf2ee 0%, rgba(0, 0, 0, 0) 100%)

}



.bg-gradient-2 {

  background-image: linear-gradient(to bottom, transparent 0%, rgba(252, 242, 238, 0.8) 20%, rgba(0, 0, 0, 0) 100%)

}



.bg-gradient-3 {

  background-image: linear-gradient(to bottom, #fcf2ee 0%, rgba(0, 0, 0, 0) 20%)

}



.text-theme {

  color: var(--theme-color) !important

}



.text-title {

  color: var(--title-color) !important

}



.text-body {

  color: var(--body-color) !important

}



.text-white {

  color: var(--white-color) !important

}



.text-yellow {

  color: var(--yellow-color) !important

}



.text-success {

  color: var(--success-color) !important

}



.text-error {

  color: var(--error-color) !important

}



.text-inherit {

  color: #554319;

}



.text-inherit:hover {

  color: var(--theme-color)

}



a.text-theme:hover,

.text-reset:hover {

  text-decoration: underline

}



.text-light-white {

  color: rgba(255, 255, 255, .7)

}



.overlay {

  position: absolute;

  top: 0;

  left: 0;

  height: 100%;

  width: 100%

}



.position-center {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%)

}



[data-overlay] {

  position: relative

}



[data-overlay] [class^=col-],

[data-overlay] [class*=col-] {

  z-index: 1

}



[data-overlay]:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  z-index: 1

}



[data-overlay=theme]:before {

  background-color: var(--theme-color)

}



[data-overlay=title]:before {

  background-color: var(--title-color)

}



[data-overlay=white]:before {

  background-color: var(--white-color)

}



[data-overlay=black]:before {

  background-color: var(--black-color)

}



[data-opacity="1"]:before {

  opacity: 0.1

}



[data-opacity="2"]:before {

  opacity: 0.2

}



[data-opacity="3"]:before {

  opacity: 0.3

}



[data-opacity="4"]:before {

  opacity: 0.4

}



[data-opacity="5"]:before {

  opacity: 0.5

}



[data-opacity="6"]:before {

  opacity: 0.6

}



[data-opacity="7"]:before {

  opacity: 0.7

}



[data-opacity="8"]:before {

  opacity: 0.8

}



[data-opacity="9"]:before {

  opacity: 0.9

}



[data-opacity="10"]:before {

  opacity: 1

}



.ani-moving-x,

.ani-moving {

  animation-duration: 8s;

  animation-timing-function: linear;

  animation-iteration-count: infinite

}



.ani-moving {

  animation-name: moving

}



.ani-moving-x {

  animation-name: moving-x

}



.jump-reverse-img,

.jump-img,

.jump-reverse,

.jump {

  animation: jumpping var(--duration, 6s) infinite linear

}



.jump-reverse-img,

.jump-img {

  --duration: 5s

}



.jump-reverse-img,

.jump-reverse {

  --jump-y: -20px

}



.rotate-reverse-img,

.rotate-img,

.rotate-reverse,

.rotate {

  animation: rotate var(--duration, 12s) infinite linear

}



.rotate-reverse-img,

.rotate-img {

  --duration: 40s

}



.rotate-reverse-img,

.rotate-reverse {

  --rotate-angle: -360deg

}



.fadeInUp {

  animation-name: fadeInUp

}



.scaleinright {

  animation-name: scaleinright;

  transform-origin: 0 50%

}



.wow-animated {

  animation-duration: 1s;

  animation-fill-mode: both

}



.fadein {

  --animation-name: fadein-custom

}



.slideinup {

  --animation-name: slideinup

}



.slideindown {

  --animation-name: slideindown

}



.slideinleft {

  --animation-name: slideinleft

}



.slideinright {

  --animation-name: slideinright

}



.animated,

.hero-layout1 .vs-btn,

.hero-layout1 .hero-title,

.hero-layout1 .hero-subtitle {

  animation-fill-mode: both;

  animation-iteration-count: 1;

  animation-duration: 1s;

  animation-delay: .3s;

  animation-name: var(--animation-name)

}



.ripple-animation,

.hero-ripple:after,

.hero-ripple:before,

.play-btn:after,

.play-btn:before {

  animation-duration: var(--ripple-ani-duration);

  animation-timing-function: ease-in-out;

  animation-iteration-count: infinite;

  animation-name: ripple

}



@keyframes ripple {

  0% {

    transform: scale(1);

    opacity: 0

  }



  30% {

    opacity: .4

  }



  100% {

    transform: scale(1.5);

    opacity: 0

  }

}



@keyframes rotate {

  0% {

    transform: rotate(0)

  }



  100% {

    transform: rotate(var(--rotate-angle, 360deg))

  }

}



@keyframes slideinup {

  0% {

    opacity: 0;

    transform: translateY(70px)

  }



  100% {

    transform: translateY(0)

  }

}



@keyframes slideindown {

  0% {

    opacity: 0;

    transform: translateY(-70px)

  }



  100% {

    transform: translateY(0)

  }

}



@keyframes slideinleft {

  0% {

    opacity: 0;

    transform: translateX(-70px)

  }



  100% {

    transform: translateX(0)

  }

}



@keyframes slideinright {

  0% {

    opacity: 0;

    transform: translateX(70px)

  }



  100% {

    transform: translateX(0)

  }

}



@keyframes scaleinright {

  0% {

    opacity: 0;

    transform: scaleX(0)

  }



  100% {

    transform: scaleX(1)

  }

}



@keyframes fadein-custom {

  0% {

    opacity: 0

  }



  100% {

    opacity: 1

  }

}



@keyframes fadeInUp {

  0% {

    opacity: 0;

    transform: translateY(20px)

  }



  100% {

    opacity: 1;

    transform: translateY(0)

  }

}



@keyframes spin {

  to {

    transform: rotate(360deg)

  }

}



@keyframes jumpping {



  0%,

  100% {

    transform: translate3d(0, 0, 0)

  }



  40% {

    transform: translate3d(0, var(--jump-y, 20px), var(--jump-x, 0))

  }

}



@keyframes moving-x {

  0% {

    transform: translate(0px, 0px)

  }



  50% {

    transform: translate(-60px, 0)

  }



  100% {

    transform: translate(0px, 0px)

  }

}



@keyframes moving {

  0% {

    transform: translate(0px, 0px)

  }



  20% {

    transform: translate(0px, -60px)

  }



  50% {

    transform: translate(-60px, -60px)

  }



  70% {

    transform: translate(-60px, 0px)

  }



  100% {

    transform: translate(0px, 0px)

  }

}



.widget_categories ul,

.widget_nav_menu ul {

  list-style: none;

  margin: 0 0 -10px 0;

  padding: 0

}



.widget_categories a,

.widget_nav_menu a {

  display: block;

  padding: 0 0 20px 15px;

  margin: 0 0 20px 0;

  font-size: 14px;

  font-weight: 500;

  line-height: 1;

  color: #888;

  border-bottom: 1px dashed var(--border-color)

}



.widget_categories a:before,

.widget_nav_menu a:before {

  content: "";

  position: absolute;

  left: 0;

  top: 1px;

  font-family: var(--icon-font);

  font-weight: 700

}



.widget_categories a:hover,

.widget_nav_menu a:hover {

  color: var(--theme-color)

}



.widget_categories li,

.widget_nav_menu li {

  display: block;

  position: relative

}



.widget_categories li>span,

.widget_nav_menu li>span {

  display: inline-block;

  position: absolute;

  right: 0;

  top: 0;

  font-size: 14px;

  font-weight: 500;

  z-index: 1;

  line-height: 1;

  transition: all ease .4s

}



.widget_categories li:hover>span,

.widget_nav_menu li:hover>span {

  color: var(--theme-color)

}



.widget_categories .children,

.widget_nav_menu .children {

  margin-left: 10px

}



.widget_nav_menu .sub-menu {

  margin-left: 10px

}



.wp-block-archives {

  list-style: none;

  margin: 0;

  padding: 0;

  margin-bottom: 20px

}



.wp-block-archives a:not(:hover) {

  color: inherit

}



.vs-blog ul.wp-block-archives li {

  margin: 5px 0

}



.widget {

  padding: 0;

  border: none;

  position: relative;

  margin-bottom: 50px

}



.widget select,

.widget input {

  height: 55px;

  padding-left: 20px;

  padding-right: 20px;

  font-size: 14px

}



.widget_title {

  position: relative;

  text-transform: uppercase;

  font-weight: 400;

  font-size: 24px;

  line-height: 1em;

  padding: 0 0 21px 0;

  margin: -0.2em 0 30px 0;

  font-family: var(--title-font);

  border-bottom: 1px solid var(--border-color)

}



.widget .search-form {

  display: flex

}



.widget .search-form input {

  border-radius: 0;

  border-right: none;

  background-color: var(--white-color)

}



.widget .search-form button {

  width: 65px;

  height: 55px;

  line-height: 1;

  border: none;

  background-color: var(--theme-color);

  color: var(--white-color)

}



.wp-block-tag-cloud a,

.tagcloud a {

  background-color: rgba(0, 0, 0, 0);

  display: inline-block;

  font-size: 14px;

  font-weight: 400;

  line-height: 1;

  margin-right: 5px;

  margin-bottom: 10px;

  z-index: 1;

  border: 1px solid var(--border-color);

  color: var(--body-color);

  padding: 11px 22px

}



.wp-block-tag-cloud a:hover,

.tagcloud a:hover {

  color: var(--white-color) !important;

  background-color: var(--theme-color);

  border-color: rgba(0, 0, 0, 0)

}



.tagcloud {

  margin-right: -5px;

  margin-bottom: -10px

}



.recent-post {

  display: flex;

  margin-bottom: 25px

}



.recent-post:last-child {

  margin-bottom: 0

}



.recent-post .media-img {

  margin-right: 20px;

  width: 100px;

  overflow: hidden

}



.recent-post .media-img img {

  width: 100%;

  transition: all ease .4s;

  transform: scale(1.001)

}



.recent-post .media-body {

  padding-bottom: 10px;

  border-bottom: 1px solid var(--border-color)

}



.recent-post .post-title {

  font-family: var(--body-font);

  color: var(--body-color);

  font-weight: 500;

  font-size: 16px;

  line-height: 22px;

  letter-spacing: -0.03em;

  margin: -0.25em 0 3px 0

}



.recent-post:hover .media-img img {

  transform: scale(1.15)

}



.recent-post-meta a {

  text-transform: uppercase;

  font-size: 12px;

  font-weight: 500;

  color: var(--theme-color)

}



.recent-post-meta a i {

  margin-right: 8px;

  vertical-align: center;

  color: var(--theme-color);

  font-size: .9em

}



.recent-post-meta a:hover {

  color: var(--title-color)

}



.vs-widget-admin .admin-img {

  margin-bottom: 30px

}



.vs-widget-admin .admin-img img {

  width: 100%

}



.vs-widget-admin .widget_title {

  margin-bottom: 10px;

  padding: 0;

  border: none

}



.vs-widget-admin .admin-text {

  color: #888

}



.sidebar-gallery {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 20px

}



.sidebar-gallery.column-4 {

  grid-template-columns: repeat(4, 1fr);

  gap: 10px;

  max-width: 407px

}



.sidebar-gallery .gallery-thumb {

  overflow: hidden;

  position: relative

}



.sidebar-gallery .gallery-thumb img {

  transition: all ease .4s;

  width: 100%;

  transform: scale(1)

}



.sidebar-gallery .gallery-thumb:hover img {

  transform: scale(1.12)

}



.sidebar-area {

  width: 100%;

  margin-bottom: -20px

}



@media(min-width: 991px) {

  .sidebar-style2 {

    max-width: 325px

  }

}



.sidebar-style2 .widget_search {

  background-color: #fdf4ed;

  border: 1px solid rgba(196, 198, 200, .3);

  padding: 30px

}



.sidebar-style2 .widget_search .widget_title {

  border: none;

  padding: 0;

  margin: 0 0 20px 0

}



.sidebar-style2 .widget_search input {

  border: none;

  box-shadow: 0px 0px 3.72px .28px rgba(141, 141, 142, .14)

}



.sidebar-style2 .recent-post .media-body {

  display: flex;

  flex-direction: column-reverse;

  justify-content: center

}



.sidebar-style2 .recent-post .post-title {

  margin-bottom: 0;

  font-weight: 400;

  letter-spacing: .03em

}



.sidebar-style2 .recent-post .recent-post-meta {

  margin-bottom: 13px;

  line-height: 1

}



.range-slider-area .price-amount {

  display: block;

  color: var(--title-color);

  font-size: 16px;

  font-weight: 400;

  margin: -0.4em 0 0 0

}



.range-slider-area .price-amount .title {

  font-weight: 700;

  margin-right: 10px;

  text-transform: uppercase;

  font-size: 14px

}



.range-slider-area .ui-slider {

  height: 2px;

  position: relative;

  width: 100%;

  background-color: var(--smoke-color);

  border: none;

  margin-top: 20px;

  margin-bottom: 29px;

  cursor: pointer;

  border-radius: 3px

}



.range-slider-area .ui-slider-range {

  border: none;

  cursor: pointer;

  position: absolute;

  top: 0;

  height: 100%;

  z-index: 1;

  display: block;

  background-color: var(--title-color)

}



.range-slider-area .ui-slider-handle {

  width: 10px;

  height: 10px;

  padding: 0;

  border: none;

  cursor: pointer;

  position: absolute;

  top: 50%;

  margin-top: -5px;

  z-index: 2;

  background-color: var(--title-color);

  transform: translateX(0px);

  border-radius: 50%

}



.range-slider-area .ui-slider-handle:focus {

  outline: none;

  box-shadow: none

}



.range-slider-area .ui-slider-handle:last-child {

  transform: translateX(-10px)

}



.range-slider-area .filter-btn {

  background-color: var(--smoke-color);

  color: var(--body-color);

  border: 1px solid var(--border-color);

  padding: 6px 30px

}



.range-slider-area .filter-btn:hover {

  background-color: var(--theme-color);

  color: var(--white-color);

  border-color: rgba(0, 0, 0, 0)

}



.range-slider-area .reset-btn {

  float: right;

  border: none;

  padding: 0;

  font-size: 12px;

  text-transform: uppercase;

  color: var(--title-color);

  font-weight: 700;

  background-color: rgba(0, 0, 0, 0);

  position: relative;

  top: 8px

}



.range-slider-area .reset-btn i {

  margin-right: 7px

}



.range-slider-area .reset-btn:hover {

  color: var(--theme-color)

}



.category-filter ul {

  margin: 0;

  padding: 2px 0 0 0;

  list-style: none

}



.category-filter li {

  display: flex;

  justify-content: space-between;

  align-items: center;

  line-height: 1;

  margin-bottom: 20px

}



.category-filter input[type=checkbox]~label {

  margin: 0;

  line-height: 1;

  color: var(--body-color);

  text-transform: capitalize

}



.category-filter input[type=checkbox]~label:before {

  top: -2px

}



.category-filter input[type=checkbox]~label:hover {

  color: var(--theme-color)

}



.category-filter .total {

  color: var(--title-color);

  top: 1px;

  position: relative

}



.latest-product {

  display: flex;

  align-items: center;

  margin-bottom: 30px

}



.latest-product:last-child {

  margin-bottom: 0

}



.latest-product .media-img {

  width: 92px;

  background-color: #f1f1f1;

  border: 1px solid rgba(196, 198, 200, .3);

  margin-right: 20px;

  overflow: hidden

}



.latest-product .media-img img {

  transition: all ease .4s;

  transform: scale(1.001)

}



.latest-product .product-title {

  font-size: 18px;

  font-family: var(--body-font);

  border-bottom: 1px solid var(--border-color);

  padding-bottom: 9px;

  margin-bottom: 8px

}



.latest-product .product-price {

  font-size: 16px;

  color: var(--body-color);

  font-weight: 500;

  margin: 0 0 -0.2em 0

}



.latest-product:hover .media-img img {

  transform: scale(1.15)

}



.info-media1 {

  display: flex;

  align-items: center;

  margin-bottom: 10px

}



.info-media1 i {

  display: inline-block;

  width: 40px;

  height: 40px;

  line-height: 40px;

  background-color: var(--theme-color);

  color: var(--white-color);

  text-align: center;

  font-size: 14px;

  margin-right: 15px;

  border-radius: 50%

}



.info-media1 .media-label {

  font-size: 18px;

  font-family: var(--title-font)

}



.follow-box {

  background-color: var(--white-color);

  text-align: center;

  padding: 49px 20px

}



.follow-social {

  list-style-type: none;

  margin: 0;

  padding: 0

}



.follow-social li {

  display: inline-block;

  margin-right: 15px

}



.follow-social li:last-child {

  margin-right: 0

}



.follow-social a {

  color: #c4c2be

}



.follow-social a:hover {

  color: var(--theme-color)

}



@media(max-width: 1199px) {

  .widget_title {

    font-size: 22px

  }

}



@media(max-width: 991px) {

  .sidebar-area {

    margin-top: 40px

  }

}



.footer-widget {

  margin-bottom: 45px

}



.footer-widget .widget_title {

  margin-bottom: 36px;

  padding-bottom: 15px;

  border: none;

  text-transform: uppercase

}



.footer-widget .widget_title::before {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 50px;

  height: 2px;

  background-color: var(--theme-color)

}



.footer-widget .recent-post {

  align-items: center;

  border-bottom: 1px solid rgba(154, 86, 58, .38);

  padding-bottom: 20px;

  margin-bottom: 20px

}



.footer-widget .recent-post:last-child {

  padding-bottom: 0;

  margin-bottom: 0;

  border-bottom: none

}



.footer-widget .recent-post .media-img {

  width: 68px;

  height: 68px;

  border-radius: 50%;

  overflow: hidden;

  margin-right: 15px

}



.footer-widget .recent-post .media-img img {

  transform: scale(1);

  transition: all ease .4s

}



.footer-widget .recent-post .media-body {

  border: none;

  padding: 0

}



.footer-widget .recent-post .post-title {

  font-size: 18px;

  color: var(--title-color);

  font-weight: 400;

  letter-spacing: 0;

  padding-top: .3em;

  font-family: var(--title-font)

}



.footer-widget .recent-post:hover .media-img img {

  transform: scale(1.15)

}



.footer-widget .recent-post-meta a {

  color: var(--body-color);

  font-weight: 500;

  font-size: 14px

}



.footer-widget .recent-post-meta a i {

  position: relative;

  top: -1px

}



.footer-widget .recent-post-meta a:hover {

  color: var(--theme-color)

}



.footer-widget.widget_nav_menu {

  margin-bottom: 55px

}



.footer-widget.widget_nav_menu ul {

  margin-top: -0.13em

}



.footer-widget.widget_nav_menu ul ul {

  margin-top: 0

}



.footer-widget.widget_nav_menu a {

  width: -moz-max-content;

  width: max-content;

  display: block;

  border: none;

  max-width: 100%;

  padding: 0 0 0 13px;

  color: var(--body-color);

  margin-bottom: 23px;

  text-transform: uppercase

}



.footer-widget.widget_nav_menu a:before {

  content: "";

  top: 2px;

  font-size: 11px;

  font-weight: 700;

  color: var(--theme-color)

}



.footer-widget.widget_nav_menu a:hover {

  background-color: rgba(0, 0, 0, 0);

  color: var(--theme-color)

}



.footer-widget.widget_nav_menu li>span {

  width: auto;

  height: auto;

  position: relative;

  background-color: rgba(0, 0, 0, 0);

  color: var(--body-color);

  line-height: 1

}



.footer-widget.widget_nav_menu li:last-child a {

  margin-bottom: 0

}



.footer-info {

  color: #a3a2a2;

  font-weight: 500;

  margin-top: -0.3em;

  line-height: 32px

}



.footer-number {

  font-weight: 500;

  font-size: 16px;

  color: #717070

}



.footer-number a {

  color: #a3a2a2

}



.footer-number a:hover {

  color: var(--theme-color)

}



.footer-time {

  font-size: 18px;

  font-weight: 500;

  color: #a3a2a2;

  margin: 0

}



.footer-time .time {

  color: var(--title-color)

}



.footer-media {

  display: flex;

  align-items: center;

  margin-bottom: 14px

}



.footer-media .media-icon {

  width: var(--icon-size, 40px);

  height: var(--icon-size, 40px);

  line-height: var(--icon-size, 40px);

  text-align: center;

  background-color: var(--theme-color);

  color: var(--white-color);

  border-radius: 50%;

  margin-right: 14px

}



.footer-media .media-title {

  font-size: 16px;

  line-height: 1

}



.footer-media .media-info {

  margin: 0

}



@media(max-width: 1399px) {

  .footer-widget {

    margin-bottom: 60px

  }



  .footer-widget .widget_title {

    font-size: 20px;

    margin-bottom: 30px

  }



  .footer-widget .fs-22 {

    font-size: 18px

  }

}



@media(max-width: 991px) {

  .footer-widget .widget_title {

    font-size: 22px

  }

}



.vs-header {

  position: relative;

  z-index: 41

}



.header-logo {

  max-width: 270px;

  padding: 10px 0

}



.will-sticky .sticky-active {

  position: fixed;

  top: -100%;

  right: 0;

  left: 0;

  background-color: var(--white-color);

  transition: all ease .8s;

  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .07)

}



.will-sticky .sticky-active.active {

  top: 0

}



.main-menu a {

  display: block;

  position: relative;

  font-family: var(--body-font);

  font-weight: 600;

  font-size: 14px;

  color: var(--title-color);

  text-transform: uppercase

}



@media(max-width: 1500px) {

  .main-menu a {

    font-size: 16px

  }

}



.main-menu a:hover {

  color: var(--theme-color)

}



.main-menu>ul>li {

  margin: 0 10px

}



.main-menu ul {

  margin: 0;

  padding: 0

}

h3.welcomte {

  font-weight: 600;

  color: #b99450;

}



.main-menu ul li {

  list-style-type: none;

  display: inline-block;

  position: relative

}



.main-menu ul li.menu-item-has-children>a:after {

  content: "";

  position: relative;

  font-family: var(--icon-font);

  margin-left: 5px;

  top: -0.8px;

  font-size: .8rem

}



.main-menu ul li:last-child {

  margin-right: 0

}



.main-menu ul li:first-child {

  margin-left: 0

}



.main-menu ul li:hover .menu-pages,

.main-menu ul li:hover>ul.sub-menu,

.main-menu ul li:hover ul.mega-menu {

  visibility: visible;

  opacity: 1;

  margin-top: 0;

  z-index: 9

}



.main-menu ul.sub-menu,

.main-menu ul.mega-menu {

  position: absolute;

  text-align: left;

  top: 100%;

  left: 0;

  background-color: var(--body-bg);

  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .1);

  visibility: hidden;

  min-width: 190px;

  width: -moz-max-content;

  width: max-content;

  padding: 7px;

  left: -14px;

  margin-top: 50px;

  opacity: 0;

  z-index: -1;

  border-bottom: 3px solid var(--theme-color);

  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, .09), 0px 3px 0px 0px rgba(231, 13, 60, .004);

  transform-origin: top center;

  transition: margin-top .4s ease-in-out 0s, visibility .4s ease-in-out 0s, opacity .4s ease-in-out 0s, z-index 0s

}



.main-menu ul.sub-menu a,

.main-menu ul.mega-menu a {

  font-size: 16px;

  line-height: 30px

}



.main-menu ul.sub-menu {

  padding: 18px 20px;

  left: -27px

}



.main-menu ul.sub-menu:before {

  content: "";

  position: absolute;

  left: 34px;

  top: 30px;

  width: 1px;

  background-color: var(--border-color);

  height: calc(100% - 65px)

}



.main-menu ul.sub-menu li {

  display: block;

  margin: 0 0;

  padding: 3px 9px

}



.main-menu ul.sub-menu li.menu-item-has-children>a:after {

  content: "";

  float: right;

  top: 3px

}



.main-menu ul.sub-menu li a {

  position: relative;

  padding-left: 21px

}



.main-menu ul.sub-menu li a:before {

  content: "";

  position: absolute;

  top: 2.8em;

  left: 0;

  font-family: var(--icon-font);

  width: 11px;

  height: 11px;

  text-align: center;

  border-radius: 50%;

  display: inline-block;

  font-size: .2em;

  line-height: 11.5px;

  color: var(--theme-color);

  font-weight: 700;

  background-color: var(--body-bg);

  box-shadow: inset 0px 2px 4px 0px rgba(154, 86, 58, .4)

}



.main-menu ul.sub-menu li ul.sub-menu {

  left: 100%;

  right: auto;

  top: 0;

  margin: 0 0;

  margin-left: 20px

}



.main-menu ul.sub-menu li ul.sub-menu li ul {

  left: 100%;

  right: auto

}



.main-menu .mega-menu-wrap {

  position: static

}



.main-menu ul.mega-menu {

  display: flex;

  justify-content: space-between;

  text-align: left;

  width: 100%;

  max-width: var(--main-container);

  padding: 20px 15px 23px 15px;

  left: 50%;

  transform: translateX(-50%)

}



.main-menu ul.mega-menu li {

  display: block;

  width: 100%;

  padding: 0 15px

}



.main-menu ul.mega-menu li li {

  padding: 4px 0

}



.main-menu ul.mega-menu li a {

  display: inline-block

}



.main-menu ul.mega-menu>li>a {

  display: block;

  padding: 0;

  padding-bottom: 5px;

  margin-bottom: 10px;

  text-transform: uppercase;

  letter-spacing: 1px;

  font-weight: 700;

  color: var(--title-color);

  border-color: var(--theme-color)

}



.main-menu ul.mega-menu>li>a::after,

.main-menu ul.mega-menu>li>a::before {

  content: "";

  position: absolute;

  bottom: 0;

  left: 0;

  width: 15px;

  height: 1px;

  background-color: var(--theme-color)

}



.main-menu ul.mega-menu>li>a::after {

  width: calc(100% - 20px);

  left: 20px

}



.main-menu ul.mega-menu>li>a:hover {

  padding-left: 0

}



.main-menu .menu-pages {

  flex-wrap: wrap;

  position: absolute;

  left: 50%;

  width: 100%;

  max-width: var(--main-container, 1295px);

  background-color: var(--white-color);

  padding: 20px 10px 0 10px;

  margin-top: 70px;

  opacity: 0;

  visibility: hidden;

  transform: translateX(-50%);

  transition: margin-top .4s ease-in-out 0s, visibility .4s ease-in-out 0s, opacity .4s ease-in-out 0s, z-index 0s;

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, .09), 0px 3px 0px 0px rgba(231, 13, 60, .004)

}



.main-menu .menu-pages>li {

  width: 100%;

  padding: 0 10px 20px 10px

}



.main-menu .menu-pages img {

  width: 100%

}



.main-menu .menu-pages a {

  text-align: center;

  display: block;

  border: 1px solid rgba(0, 0, 0, .05);

  padding: 0 0 10px 0;

  transition: all ease .4s;

  background-color: var(--title-color);

  color: var(--white-color)

}



.main-menu .menu-pages a img {

  display: block;

  margin: 0 0 8px 0

}



.main-menu .menu-pages a:hover {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.menu-style1>ul>li>a {

  padding: 37px 0

}



.header-text {

  font-size: 12px;

  font-weight: 500;

  color: #e5e4e4;

  margin: 0;

  padding: 12px 0

}



.header-icons {

  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 25px;

  justify-content: flex-end

}



.header-icons button:not([class*=vs-]),

.header-icons a:not([class*=vs-]) {

  border: none;

  padding: 0;

  line-height: 1;

  font-size: 24px;

  color: var(--title-color);

  background-color: rgba(0, 0, 0, 0)

}



.header-icons button:not([class*=vs-]):hover,

.header-icons a:not([class*=vs-]):hover {

  color: var(--theme-color)

}



.header-btns {

  display: flex;

  align-items: center;

  gap: 15px

}



.header-links ul {

  margin: 0;

  padding: 0;

  list-style-type: none

}



.header-links li {

  display: inline-block;

  font-size: 14px;

  font-weight: 500;

  color: var(--title-color);

  font-family: var(--title-font);

  padding: 0 30px 0 0;

  margin: 0 26px 0 0;

  border-right: 1px solid rgba(255, 255, 255, .15);

  line-height: 23px;

  line-height: 1

}



.header-links li:last-child {

  margin-right: 0;

  padding-right: 0;

  border-right: none

}



.header-links i {

  color: var(--theme-color);

  margin: 0 10px 0 0

}



.header-links a {

  color: inherit

}



.header-links a:hover {

  color: var(--theme-color)

}



.header-links.style-white li {

  color: var(--white-color);

  border-color: rgba(255, 255, 255, .4)

}



.header-links.style-white li a:hover {

  color: var(--white-color);

  text-decoration: underline

}



.header-links.style-white li i {

  color: var(--white-color)

}



.header-links.style2 li {

  border-right-color: var(--title-color)

}



.header-call {

  display: flex;

  align-items: center;

  padding-left: 20px;

  margin-left: 20px;

  line-height: 1;

  position: relative

}



.header-call::before {

  content: "";

  position: absolute;

  left: 0;

  top: 50%;

  width: 1px;

  height: 30px;

  margin-top: -15px;

  background-color: var(--theme-color);

  opacity: .3

}



.header-call .icon-btn {

  margin-right: 15px

}



.header-call .media-label {

  display: block;

  font-size: 14px;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: .04em;

  margin-bottom: 10px;

  font-family: var(--title-font)

}



.header-call .media-number {

  font-size: 24px;

  font-weight: 700;

  color: var(--title-color)

}



.header-call .media-number:hover {

  color: var(--theme-color)

}



.header-layout6 .header-top,

.header-layout3 .header-top,

.header-layout2 .header-top,

.header-layout1 .header-top {

  background-color: #313c45

}



@media(min-width: 1500px) {



  .header-layout6,

  .header-layout5,

  .header-layout2,

  .header-layout1 {

    --main-container: 1700px

  }

}



.header-layout2 .menu-area {

  position: relative

}



@media(min-width: 1399px) {

  .header-layout2 .menu-area .menu-inner {

    position: absolute;

    left: 0;

    right: 0;

    top: 0

  }

}



.header-layout2 .will-sticky .menu-inner {

  background-color: var(--white-color);

  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .07)

}



.header-layout4 .header-top {

  background-color: var(--theme-color);

  padding: 5px 0

}



@media(min-width: 1199px) {

  .header-layout5 {

    position: absolute;

    left: 0;

    top: 0;

    right: 0

  }

}



.header-layout6 .header-top {

  padding: 10px 0

}



.header-layout8,

.header-layout7 {

  --main-container: 1660px

}



.header-layout9 .header-top {

  border-bottom: 1px solid rgba(154, 86, 58, .2);

  padding: 10px 0

}



@media(min-width: 1500px) {

  .header-layout9 {

    --main-container: 1400px

  }

}



@media(max-width: 1800px) {

  .header-layout8 .main-menu>ul>li {

    margin: 0 8px

  }



  .header-layout8 .main-menu>ul>li>a {

    font-size: 14px

  }

}



@media(max-width: 1500px) {

  .header-layout9 .header-call {

    display: none

  }

}



@media(max-width: 1399px) {

  .main-menu>ul>li {

    margin: 0 14px

  }



  .main-menu>ul>li>a {

    font-size: 14px

  }



  .main-menu .menu-pages a {

    line-height: 1;

    padding: 0 0 7px 0;

    font-size: 13px

  }

}



@media(max-width: 1199px) {

  .header-logo {

    max-width: 200px

  }

}



@media(max-width: 991px) {

  .header-logo {

    max-width: 162px

  }

}



@media(max-width: 767px) {

  .header-icons {

    gap: 10px

  }



  .header-icons button:not([class*=vs-]),

  .header-icons a:not([class*=vs-]) {

    font-size: 18px

  }

}



@media(max-width: 575px) {

  .header-links li {

    font-size: 12px;

    padding: 0;

    margin: 0 16px 0 0;

    border-right: none;

    line-height: 1

  }

}



.widget-area {

  padding-top: 80px;

  padding-bottom: 20px

}



.footer-logo {

  margin-bottom: 28px

}



.copyright-text {

  margin: 0;

  font-size: 14px;

  font-weight: 500;

  color: #000;

}



.copyright-text a {

  color: var(--theme-color);

  text-transform: uppercase

}



.copyright-text a:hover {

  color: var(--title-color)

}



.footer-btns {

  vertical-align: middle

}



.footer-btns a {

  --icon-size: 55px;

  --icon-font-size: 20px;

  margin-right: 5px;

  display: inline-block

}



.footer-btns a:last-child {

  margin-right: 0

}



.copyright-menu ul {

  margin: 32px 0 36px 0;

  padding: 0;

  list-style: none

}



.copyright-menu li {

  display: inline-block;

  margin: 0 29px

}



.copyright-menu a {

  display: block;

  color: var(--white-color);

  text-transform: uppercase;

  font-weight: 500;

  font-size: 14px;

  letter-spacing: .13em

}



.copyright-menu a:hover {

  color: var(--theme-color)

}



.footer-layout1,

.footer-layout4 {

  background-color: #ffffff;

  --body-color: #554319;

  --title-color: #ffffff

}



.footer-layout1 .vs-logo {

  text-align: center

}



.footer-layout1 .footer-top {

  background-color: #1f262b;

  border-bottom: 1px solid rgba(154, 86, 58, .58)

}



.footer-layout1 .footer-top .row {

  --bs-gutter-x: 0

}



.footer-layout1 .footer-top [class*=col-] {

  padding: 40px 0 40px 0;

  display: flex;

  flex-direction: column;

  justify-content: center

}



.footer-layout1 .footer-top [class*=col-]:not(:last-child) {

  border-color: rgba(154, 86, 58, .58);

  border-style: solid;

  border-width: 0 1px 0 0

}



.footer-layout1 .copyright-wrap {

  padding: 26px 0;

  background-color: #1d2429

}



.footer-layout2 {

  background-color: #1d2429;

  text-align: center

}



.footer-layout2 .footer-logo {

  margin: 0 0 47px 0

}



.footer-layout2 .footer-top {

  border-bottom: 1px solid #262d33;

  margin: 0 0 90px 0;

  padding: 80px 0

}



.footer-layout2 .copyright-text {

  border-top: 1px solid #273036;

  margin: 0 auto;

  padding: 27.5px 0;

  max-width: 500px;

  color: #717070;

  font-weight: 500

}



.footer-layout2 .copyright-text a {

  color: inherit;

  text-transform: capitalize

}



.footer-layout2 .copyright-text a:hover {

  color: var(--theme-color)

}



.footer-layout3 {

  --body-color: #a3a2a2;

  --title-color: #fff;

  --main-container: 1680px;

  background-color: #1d2429

}



.footer-layout3 .widget_title {

  margin-bottom: 36px;

  font-size: 22px;

  margin-top: -0.15em

}



.footer-layout3 .widget-area {

  padding-top: 80px;

  padding-bottom: 35px

}



.footer-layout3 .copyright-wrap {

  background-color: #1d2429;

  padding: 32px 0

}



.footer-layout3 .copyright-text {

  color: #bebebe

}



.footer-layout4 .recent-post .media-img {

  border-radius: 0

}



.footer-layout4 .widget-area {

  padding: 100px 0 50px 0

}


.footer-layout4 .copyright-wrap {
  background-color: #f5f5f5;
  padding: 20px 0;
}



.footer-layout5 .copyright-wrap {

  padding: 20px 0;

  text-align: center;

  border-top: 1px solid rgba(255, 255, 255, .2)

}



.footer-layout5 .sidebar-gallery.column-4 {

  max-width: 100%

}



.footer-layout5 .copyright-text {

  font-size: 16px;

  color: var(--white-color)

}



.footer-layout5 .copyright-text a {

  color: inherit

}



.footer-layout5 .copyright-text a:hover {

  color: var(--theme-color)

}



.footer-layout6 {

  background-color: #f4f0ed

}



.footer-layout6 .copyright-wrap {

  padding: 24px 0;

  text-align: center;

  background-color: var(--theme-color)

}



.footer-layout6 .copyright-text {

  color: var(--white-color)

}



.footer-layout6 .copyright-text a {

  color: var(--white-color)

}



.footer-layout6 .copyright-text a:hover {

  color: var(--title-color)

}



.footer-layout8 .widget_nav_menu a,

.footer-layout7 .widget_nav_menu a {

  text-transform: capitalize;

  border: none;

  padding-bottom: 0;

  font-size: 16px;

  font-weight: 400;

  margin-bottom: 25px;

  width: -moz-max-content;

  width: max-content

}



.footer-layout8 .widget_nav_menu a:before,

.footer-layout7 .widget_nav_menu a:before {

  top: 0

}



.footer-layout8 .widget_title,

.footer-layout7 .widget_title {

  border: none;

  text-transform: capitalize;

  margin-top: -0.1em

}



.footer-layout8 .widget_title:after,

.footer-layout8 .widget_title:before,

.footer-layout7 .widget_title:after,

.footer-layout7 .widget_title:before {

  content: "";

  position: absolute;

  width: 50px;

  height: 3px;

  bottom: -1px;

  left: 0;

  background-color: var(--theme-color)

}



.footer-layout8 .widget_title:after,

.footer-layout7 .widget_title:after {

  width: 10px;

  background-color: var(--title-color);

  left: 55px

}



.footer-layout8 .copyright-wrap,

.footer-layout7 .copyright-wrap {

  padding: 25px 0;

  text-align: center;

  background-color: var(--title-color)

}



.footer-layout8 .copyright-text,

.footer-layout7 .copyright-text {

  color: var(--white-color)

}



.footer-layout8 .copyright-text a,

.footer-layout7 .copyright-text a {

  color: inherit

}



.footer-layout8 .copyright-text a:hover,

.footer-layout7 .copyright-text a:hover {

  color: var(--theme-color)

}



.footer-layout8 .footer-top,

.footer-layout7 .footer-top {

  border-bottom: 1px solid var(--border-color);

  padding: 60px 0

}



.footer-layout7 {

  background-color: #f4f0ed

}



.footer-layout8 {

  padding-top: 1px;

  margin-top: 140px;

  background-color: var(--title-color)

}



.footer-layout8 .footer-top {

  background-color: var(--theme-color);

  text-align: center;

  padding: 50px 10px 50px 10px;

  margin-top: -140px;

  border: none

}



.footer-layout8 .form-style3 {

  margin: 0 auto

}



.footer-layout8 .form-style3 .vs-btn {

  background-color: var(--title-color)

}



.footer-layout8 .form-style3 .vs-btn:after,

.footer-layout8 .form-style3 .vs-btn::before {

  background-color: var(--secondary-color)

}



.footer-layout8 .form-style3 .vs-btn:hover {

  color: var(--title-color)

}



.footer-layout8 .widget-area {

  --title-color: #fff;

  --body-color: #fff

}



.footer-layout8 .widget_categories a,

.footer-layout8 .widget_nav_menu a {

  color: var(--body-color)

}



.footer-layout8 .widget_categories a:hover,

.footer-layout8 .widget_nav_menu a:hover {

  color: var(--theme-color)

}



.footer-layout8 .copyright-wrap {

  border-top: 1px solid rgba(255, 255, 255, .3)

}



@media(max-width: 991px) {

  .footer-layout2 .footer-top {

    margin: 0 0 60px 0;

    padding: 60px 0

  }



  .footer-layout2 .footer-logo {

    margin: 0 0 30px 0

  }



  .footer-layout4 .widget-area {

    padding: 60px 0 10px 0

  }



  .copyright-menu li {

    margin: 0 20px

  }

}



@media(max-width: 767px) {

  .footer-layout1 .footer-top [class*=col-]:not(:last-child) {

    border-width: 0 0 1px 0

  }



  .copyright-menu li {

    margin: 0 7px

  }

}



.breadcumb-menu {

  max-width: 100%;

  padding: 0;

  margin: 14px 0 -0.55em 0;

  list-style-type: none;

  position: relative

}



.breadcumb-menu li {

  display: inline-block;

  list-style: none;

  position: relative

}



.breadcumb-menu li:after {

  content: "";

  font-family: var(--icon-font);

  font-weight: 400;

  vertical-align: middle;

  position: relative;

  top: -1px;

  margin-left: 10px;

  margin-right: 5px

}



.breadcumb-menu li:last-child {

  color: var(--title-color)

}



.breadcumb-menu li:last-child:after {

  display: none

}



.breadcumb-menu li,

.breadcumb-menu a {

  word-break: break-word;

  white-space: normal;

  font-weight: 700;

  font-size: 14px;

  color: var(--body-color);

  font-family: var(--body-font);

  letter-spacing: .08em;

  text-transform: uppercase

}



.breadcumb-menu a:hover {

  color: var(--theme-color)

}



.breadcumb-title {

  color: var(--title-color);

  margin: -0.22em 0 -0.22em 0;

  font-size: 60px;

  text-transform: uppercase

}



.breadcumb-title .inner-text {

  color: var(--theme-color)

}



.breadcumb-content {

  padding: 200px 0 200px 0

}



.breadcumb-wrapper {

  padding-bottom: .1px;

  overflow: hidden;

  position: relative;

  background-color: var(--smoke-color);

  background-size: 100% auto;

  background-position: top center

}



@media(min-width: 1922px) {

  .breadcumb-wrapper {

    background-size: cover;

    background-position: center center

  }

}



@media(max-width: 1850px) {

  .breadcumb-wrapper {

    background-size: cover;

    background-position: center center

  }

}



@media(max-width: 1399px) {

  .breadcumb-content {

    padding: 130px 0 130px 0

  }

}



@media(max-width: 1199px) {

  .breadcumb-title {

    font-size: 46px

  }

}



@media(max-width: 991px) {

  .breadcumb-title {

    font-size: 36px

  }

}



@media(max-width: 767px) {



  .breadcumb-menu li,

  .breadcumb-menu a {

    font-size: 12px;

    letter-spacing: 0

  }



  .breadcumb-content {

    padding: 80px 0 80px 0

  }



  .breadcumb-wrapper {

    background-position: left center

  }

}



.post-pagination {

  margin: 50px 0

}



.post-pagi-box a {

  font-size: 22px;

  text-transform: uppercase;

  color: var(--title-color);

  font-weight: 400;

  display: flex;

  align-items: center;

  gap: 15px

}



.post-pagi-box a i {

  font-size: 18px;

  width: 65px;

  height: 60px;

  line-height: 60px;

  text-align: center;

  display: inline-block;

  background-color: var(--body-color);

  color: var(--white-color);

  transition: all ease .4s

}



.post-pagi-box a:hover i {

  background-color: var(--theme-color)

}



.post-pagi-box.next a {

  flex-direction: row-reverse

}



.vs-pagination {

  margin-bottom: 30px

}



.vs-pagination ul {

  margin: 0;

  padding: 0;

  list-style: none

}



.vs-pagination span,

.vs-pagination a {

  position: relative;

  display: inline-block;

  text-align: center;

  border: none;

  color: var(--body-color);

  font-family: var(--body-font);

  font-size: 14px;

  font-weight: 700;

  min-width: 50px;

  min-height: 50px;

  line-height: 48px;

  padding: 0 15px;

  z-index: 1;

  letter-spacing: .1em;

  border: 1px solid var(--border-color);

  text-transform: uppercase

}



.vs-pagination span i,

.vs-pagination a i {

  margin-left: 7px

}



.vs-pagination span.active,

.vs-pagination span:hover,

.vs-pagination a.active,

.vs-pagination a:hover {

  color: var(--white-color);

  background-color: var(--theme-color);

  border-color: rgba(0, 0, 0, 0)

}



.vs-pagination li {

  display: inline-block;

  margin: 0 3px;

  list-style-type: none

}



.vs-pagination li:last-child {

  margin-right: 0

}



.vs-pagination li:first-child {

  margin-left: 0

}



@media(max-width: 1199px) {

  .post-pagination {

    margin: 40px 0

  }



  .post-pagi-box a {

    font-size: 18px;

    gap: 15px

  }



  .post-pagi-box a i {

    font-size: 16px;

    width: 40px;

    height: 40px;

    line-height: 40px

  }

}



@media(max-width: 767px) {



  .vs-pagination span,

  .vs-pagination a {

    min-width: 35px;

    min-height: 35px;

    line-height: 35px;

    font-size: 12px;

    padding: 0 10px;

    letter-spacing: 0

  }



  .vs-pagination li {

    margin: 0 2px

  }



  .vs-pagination li:first-child a,

  .vs-pagination li:last-child a {

    padding: 0 8px

  }



  .post-pagi-box a {

    font-size: 16px;

    gap: 10px

  }



  .post-pagi-box a i {

    font-size: 14px;

    width: 35px;

    height: 35px;

    line-height: 35px

  }

}



blockquote {

  display: block;

  position: relative;

  overflow: hidden;

  font-size: 20px;

  line-height: 30px;

  font-weight: 400;

  color: var(--title-color);

  background-color: var(--smoke-color);

  border-left: 4px solid var(--theme-color);

  padding: 43px 50px 42px 35px;

  margin: 35px 0

}



blockquote p {

  font-family: inherit;

  margin-bottom: 0 !important;

  line-height: 1.5;

  color: inherit;

  width: 100%;

  position: relative;

  z-index: 3;

  font-style: italic

}



blockquote:before {

  content: "";

  font-family: var(--icon-font);

  position: absolute;

  right: 70px;

  bottom: 27px;

  font-size: 3.5rem;

  font-weight: 900;

  line-height: 1;

  color: var(--theme-color)

}



blockquote p {

  margin-bottom: 0

}



blockquote p a {

  color: inherit

}



blockquote cite {

  display: inline-block;

  font-size: 16px;

  position: relative;

  padding-left: 45px;

  line-height: 1;

  font-weight: 400;

  margin-top: 22px;

  font-style: normal;

  color: var(--title-color)

}



blockquote cite:before {

  content: "";

  position: absolute;

  left: 0;

  bottom: 8px;

  width: 30px;

  height: 2px;

  border-top: 2px solid var(--theme-color)

}



blockquote.vs-quote {

  border: none;

  border-top: 2px solid var(--theme-color);

  border-bottom: 2px solid var(--theme-color);

  background-color: rgba(0, 0, 0, 0);

  padding: 27px 40px 27px 40px;

  margin: 32px 0;

  text-align: center

}



blockquote.vs-quote:before {

  display: none

}



blockquote.vs-quote p {

  color: var(--body-color);

  font-size: 20px

}



blockquote.vs-quote cite {

  padding: 0;

  color: var(--theme-color);

  text-transform: uppercase;

  font-size: 14px;

  font-weight: 500;

  margin-top: 20px

}



blockquote.vs-quote cite:before {

  display: none

}



.blog-meta span,

.blog-meta a {

  color: #888;

  display: inline-block;

  text-transform: uppercase;

  font-size: 14px;

  position: relative

}



.blog-meta span:not(:last-child),

.blog-meta a:not(:last-child) {

  padding-right: 16px;

  margin-right: 10px

}



.blog-meta span:not(:last-child):after,

.blog-meta a:not(:last-child):after {

  content: "";

  position: absolute;

  top: 50%;

  right: 0;

  margin-top: -5px;

  height: 10px;

  width: 1px;

  background-color: #c5c5c5

}



.blog-meta span i,

.blog-meta a i {

  margin-right: 10px;

  color: var(--title-color)

}



.blog-meta a:hover {

  color: var(--theme-color)

}



.blog-category {

  margin-bottom: -10px

}



.blog-category a {

  font-weight: 700;

  padding: 9px 22px;

  margin-right: 5px;

  margin-bottom: 10px;

  font-size: 14px;

  letter-spacing: .04em;

  line-height: 1;

  text-transform: uppercase;

  display: inline-block;

  color: var(--theme-color);

  background-color: var(--secondary-color)

}



.blog-category a:hover {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.blog-title a {

  color: inherit

}



.blog-title a:hover {

  color: var(--theme-color)

}



.vs-blog {

  margin-bottom: 30px

}



.share-links-title {

  font-size: 14px;

  font-weight: 700;

  color: var(--body-color);

  font-family: var(--body-font);

  margin: 0 10px 0 0;

  display: inline-block;

  text-transform: uppercase

}



.share-links {

  margin: 45px 0 50px 0;

  border-bottom: 1px solid #e1e1e1;

  padding-bottom: 21px

}



.share-links .row {

  align-items: center;

  --bs-gutter-y: 15px

}



.share-links .tagcloud {

  display: inline-block

}



.share-links .tagcloud a {

  padding: 0;

  border: none;

  text-transform: uppercase;

  font-weight: 500;

  color: #888

}



.share-links .tagcloud a:not(:last-child):after {

  content: ",";

  color: #888

}



.share-links .tagcloud a:hover {

  color: var(--theme-color) !important;

  background-color: rgba(0, 0, 0, 0)

}



.share-links .social-links {

  display: inline-block;

  list-style-type: none;

  margin: 0;

  padding: 0

}



.share-links .social-links li {

  display: inline-block;

  margin-right: 20px

}



.share-links .social-links li:last-child {

  margin-right: 0

}



.share-links .social-links a {

  font-size: 16px;

  color: var(--black-color);

  display: block;

  border-radius: 50%

}



.share-links .social-links a:hover {

  color: var(--theme-color)

}



.blog-author {

  display: flex;

  align-items: center;

  background-color: var(--secondary-color);

  padding: 30px;

  margin: 50px 0

}



.blog-author .media-img {

  width: 154px;

  height: 154px;

  margin-right: 35px;

  overflow: hidden;

  border-radius: 50%

}



.blog-author .media-img img {

  width: 100%

}



.blog-author .author-name {

  font-size: 26px;

  margin-bottom: 13px

}



.blog-author .author-links a {

  display: inline-block;

  color: var(--title-color);

  font-size: 18px;

  margin-right: 15px

}



.blog-author .author-links a:last-child {

  margin-right: 0

}



.blog-author .author-links a:hover {

  color: var(--theme-color)

}



.blog-inner-title {

  font-size: 26px;

  text-transform: uppercase;

  margin-top: -0.2em;

  border-bottom: 1px solid var(--border-color);

  padding: 0 0 17px 0;

  margin-bottom: 50px

}



.blog-single {

  position: relative;

  margin-bottom: 60px;

  border-bottom: 1px solid rgba(18, 31, 56, .17);

  padding-bottom: 35px

}



.blog-single:after {

  content: "";

  position: absolute;

  right: 0;

  bottom: -1px;

  height: 1px;

  width: 70px;

  background-color: var(--theme-color)

}



.blog-single .blog-category {

  position: relative;

  z-index: 1;

  margin-bottom: 20px

}



.blog-single .blog-meta {

  margin-bottom: 20px

}



.blog-single .blog-title {

  margin-bottom: 7px;

  font-size: 40px;

  text-transform: uppercase

}



.blog-single .blog-text {

  margin-bottom: 32px

}



.blog-single .blog-audio,

.blog-single .blog-img {

  position: relative;

  background-color: var(--smoke-color)

}



.blog-single .blog-audio {

  line-height: 1;

  margin-bottom: 20px

}



.blog-single .blog-img {

  margin-bottom: -10px

}



.blog-single .blog-img .slick-arrow {

  --pos-x: 40px;

  --icon-size: 50px;

  --icon-font-size: 18px;

  border: none;

  background-color: var(--theme-color);

  color: var(--white-color);

  border-radius: 0;

  opacity: 1;

  visibility: visible

}



.blog-single .blog-img .slick-arrow:hover {

  background-color: var(--title-color);

  color: var(--white-color)

}



.blog-single .blog-img .play-btn {

  --icon-size: 60px;

  --icon-font-size: 20px;

  position: absolute;

  left: 50%;

  top: 50%;

  margin: calc(var(--icon-size)/-2) 0 0 calc(var(--icon-size)/-2)

}



.blog-single .blog-content {

  overflow: hidden

}



.blog-single:hover .blog-img .slick-arrow {

  opacity: 1;

  visibility: visible

}



.blog-details .blog-single {

  border: none;

  padding-bottom: 0;

  margin-bottom: 30px

}



.blog-details .blog-single:after {

  display: none

}



.blog-style1 {

  margin: 0 0 21px 0

}



.blog-style1 .blog-img {

  overflow: hidden;

  position: relative;

  margin-bottom: 22px

}



.blog-style1 .blog-img:before {

  content: "";

  position: absolute;

  left: 0;

  top: -50px;

  bottom: auto;

  width: 100%;

  height: 50px;

  background-color: rgba(255, 255, 255, .1);

  transition: all ease .6s;

  z-index: 1

}



.blog-style1 .blog-img img {

  transform: scale(1.001);

  transition: all ease .4s

}



.blog-style1 .blog-title {

  line-height: 1.46

}



.blog-style1 .blog-meta {

  border-top: 1px solid rgba(161, 161, 161, .5);

  margin: 15px 0 0 0;

  padding: 16px 0 0 0

}



.blog-style1 .blog-meta a,

.blog-style1 .blog-meta span {

  color: #6f6c6c;

  margin: 0;

  padding: 0;

  letter-spacing: .03em

}



.blog-style1 .blog-meta a:not(:first-child):before,

.blog-style1 .blog-meta span:not(:first-child):before {

  content: "/";

  margin: 0 9px 0 6px;

  color: #6f6c6c

}



.blog-style1 .blog-meta a:after,

.blog-style1 .blog-meta span:after {

  display: none

}



.blog-style1 .blog-meta a:hover,

.blog-style1 .blog-meta span:hover {

  color: var(--theme-color)

}



.blog-style1:hover .blog-img:before {

  top: 100%

}



.blog-style1:hover .blog-img img {

  transform: scale(1.15)

}



.blog-style2 {

  display: flex;

  border-bottom: 1px solid rgba(18, 31, 56, .17);

  padding: 0 0 50px 0;

  margin: 0 0 50px 0;

  position: relative

}



.blog-style2:after {

  content: "";

  position: absolute;

  right: 0;

  bottom: -1px;

  width: 40px;

  height: 1px;

  background-color: var(--theme-color);

  transition: all ease .4s

}



.blog-style2 .blog-img {

  overflow: hidden;

  margin-right: 30px

}



.blog-style2 .blog-img img {

  transform: scale(1.001) rotate(0);

  transition: all ease .4s

}



.blog-style2 .blog-content {

  flex: 1;

  align-self: center

}



.blog-style2 .blog-category {

  margin-top: -0.1em;

  margin-bottom: 2px;

  line-height: 1

}



.blog-style2 .blog-category a {

  background-color: rgba(0, 0, 0, 0);

  padding: 0;

  line-height: 1

}



.blog-style2 .blog-title {

  text-transform: uppercase;

  margin-bottom: 8px

}



.blog-style2 .blog-meta {

  margin-bottom: 21px

}



.blog-style2 .blog-meta i {

  color: #888

}



.blog-style2 .blog-meta a {

  font-size: 12px;

  color: #888

}



.blog-style2 .blog-meta a:hover {

  color: var(--theme-color)

}



.blog-style2 .blog-text {

  margin-bottom: 32px

}



.blog-style2:hover:after {

  width: 10%

}



.blog-style2:hover .blog-img img {

  transform: scale(1.1) rotate(3deg)

}



.blog-style3 {

  position: relative;

  margin-bottom: 30px

}



.blog-style3 .blog-img {

  overflow: hidden

}



.blog-style3 .blog-img:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-image: linear-gradient(to top, var(--title-color) 0%, transparent 100%);

  z-index: 1

}



.blog-style3 .blog-img img {

  transform: scale(1.001);

  transition: all ease .4s

}



.blog-style3 .blog-number {

  position: absolute;

  right: 0;

  top: 0;

  background-color: var(--theme-color);

  color: var(--white-color);

  font-family: var(--title-font);

  display: inline-block;

  font-size: 22px;

  z-index: 3;

  width: 60px;

  height: 60px;

  line-height: 60px;

  text-align: center;

  border-bottom-left-radius: 20px

}



.blog-style3 .blog-title {

  font-size: 26px

}



.blog-style3 .blog-content {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  padding: 0 30px 17px 30px;

  z-index: 3

}



.blog-style3 .blog-meta {

  margin-bottom: 12px

}



.blog-style3 .blog-meta span,

.blog-style3 .blog-meta a {

  padding: 0;

  margin: 0 15px 0 0;

  color: var(--white-color);

  font-size: 12px

}



.blog-style3 .blog-meta span:after,

.blog-style3 .blog-meta a:after {

  display: none;

  margin-right: 0

}



.blog-style3 .blog-meta a:hover {

  text-decoration: underline

}



.blog-style3 .blog-meta i {

  color: var(--white-color);

  font-size: .9em

}



.blog-style3 .blog-title {

  color: var(--white-color)

}



.blog-style3:hover .blog-img img {

  transform: scale(1.15)

}



.blog-style4 {

  margin-bottom: 30px

}



.blog-style4 .blog-img {

  overflow: hidden

}



.blog-style4 .blog-img img {

  transform: scale(1.001);

  transition: all ease .4s

}



.blog-style4 .blog-meta {

  border-bottom: 1px solid var(--border-color);

  padding-bottom: 11px;

  margin-bottom: 15px

}



.blog-style4 .blog-meta i {

  color: var(--theme-color);

  font-size: 13px

}



.blog-style4 .blog-meta a {

  text-transform: capitalize

}



.blog-style4 .blog-title {

  line-height: 1.4;

  margin-bottom: 14px

}



.blog-style4 .blog-content {

  padding: 27px 35px 25px 35px;

  margin: 0 20px;

  margin-top: -60px;

  position: relative;

  z-index: 2;

  background-color: var(--white-color);

  transition: all ease .4s

}



.blog-style4 .blog-content:after,

.blog-style4 .blog-content:before {

  content: "";

  position: absolute;

  border-style: solid;

  border-color: rgba(0, 0, 0, 0);

  width: 0;

  height: 0;

  z-index: -1;

  transition: all ease .4s

}



.blog-style4 .blog-content:before {

  border-width: 2px 2px 0 0;

  right: 0;

  top: 0

}



.blog-style4 .blog-content:after {

  border-width: 0 0 2px 2px;

  left: 0;

  bottom: 0

}



.blog-style4 .blog-text {

  color: #979797;

  margin-bottom: 10px

}



.blog-style4 .blog-btn {

  position: absolute;

  left: 50%;

  bottom: 0;

  width: 50px;

  height: 50px;

  line-height: 47px;

  margin: 0 0 -25px -25px;

  font-size: 17px;

  border-radius: 50%;

  display: inline-block;

  border: 2px solid rgba(0, 0, 0, 0);

  text-align: center;

  opacity: 0;

  visibility: hidden;

  transform: translateY(-30px);

  background-color: var(--theme-color);

  color: var(--white-color)

}



.blog-style4 .blog-btn:hover {

  background-color: var(--white-color);

  color: var(--theme-color);

  border-color: var(--theme-color)

}



.blog-style4:hover .blog-img img {

  transform: scale(1.15)

}



.blog-style4:hover .blog-btn {

  opacity: 1;

  visibility: visible;

  transform: translateY(0)

}



.blog-style4:hover .blog-content:after,

.blog-style4:hover .blog-content:before {

  width: 100%;

  height: 100%;

  border-color: var(--theme-color)

}



.blog-style5 .blog-meta {

  margin-bottom: 8px;

  margin-top: -0.5em

}



.blog-style5 .blog-meta>span,

.blog-style5 .blog-meta>a {

  font-weight: 300;

  position: relative;

  margin: 0;

  padding: 0;

  text-transform: uppercase

}



.blog-style5 .blog-meta>span:after,

.blog-style5 .blog-meta>a:after {

  position: relative;

  top: 0;

  margin: -2px 10px 0 12px;

  width: 10px;

  height: 1px;

  display: inline-block;

  vertical-align: middle;

  background-color: var(--theme-color)

}



.blog-style5 .blog-meta>span:hover,

.blog-style5 .blog-meta>a:hover {

  color: var(--theme-color)

}



.blog-style5 .blog-meta>span:last-child:after,

.blog-style5 .blog-meta>a:last-child:after {

  display: none

}



.blog-style5 .blog-meta>a:hover {

  color: var(--theme-color)

}



.blog-style5 .category a {

  color: var(--theme-color)

}



.blog-style5 .category a:hover {

  color: var(--title-color)

}



.blog-style5 .blog-content {

  border: 1px solid #ececec;

  border-top: none;

  padding: 40px 40px 15px 40px;

  transition: all ease .4s

}



.blog-style5 .blog-title {

  font-size: 24px;

  line-height: 1.3

}



.blog-style5:hover .blog-content {

  border-color: var(--theme-color)

}



@media(max-width: 1399px) {

  .blog-style2 .blog-img {

    max-width: 300px

  }



  .blog-style2 .blog-title {

    font-size: 26px

  }



  .blog-style2 .blog-meta {

    margin-bottom: 11px

  }



  .blog-style2 .blog-text {

    margin-bottom: 21px

  }

}



@media(max-width: 1199px) {

  blockquote.vs-quote {

    padding: 27px 25px 27px 25px;

    margin: 27px 0

  }



  .blog-inner-title {

    font-size: 24px;

    padding: 0 0 17px 0;

    margin-bottom: 40px

  }



  .blog-author {

    padding: 30px 20px;

    margin: 40px 0

  }



  .blog-author .author-name {

    font-size: 24px;

    margin-bottom: 8px

  }



  .blog-author .author-text {

    font-size: 14px;

    margin-bottom: 15px

  }



  .blog-author .media-img {

    width: 140px;

    height: 140px;

    margin-right: 20px

  }



  .share-links {

    margin: 20px 0 40px 0

  }



  .blog-single .blog-title {

    font-size: 36px

  }



  .blog-style5 .blog-title {

    font-size: 20px

  }



  .blog-style5 .blog-content {

    padding: 25px 20px 3px 20px

  }

}



@media(max-width: 991px) {

  .blog-single .blog-title {

    font-size: 30px

  }



  .blog-style3 .blog-title {

    font-size: 22px

  }



  .blog-style4 .blog-content {

    margin: 0

  }



  .blog-style4 .blog-content:after,

  .blog-style4 .blog-content:before {

    display: none

  }

}



@media(max-width: 767px) {

  blockquote.vs-quote {

    padding: 22px 0 22px 0;

    margin: 27px 0

  }



  blockquote.vs-quote p {

    font-size: 16px

  }



  .blog-author {

    display: block;

    text-align: center

  }



  .blog-author .media-img {

    margin-right: auto;

    margin-left: auto;

    margin-bottom: 20px

  }



  .blog-inner-title {

    padding: 0 0 12px 0;

    margin-bottom: 30px

  }



  .blog-single {

    margin-bottom: 40px;

    padding-bottom: 25px

  }



  .blog-single .blog-title {

    font-size: 24px

  }



  .blog-style2 {

    display: block;

    padding: 0 0 30px 0;

    margin: 0 0 30px 0

  }



  .blog-style2 .blog-img {

    margin-right: 0;

    margin-bottom: 30px

  }



  .blog-style2 .blog-title {

    font-size: 24px

  }



  .blog-style3 .blog-title {

    font-size: 22px

  }



  .blog-style3 .blog-meta {

    margin-bottom: 5px

  }



  .blog-style3 .blog-content {

    padding: 0px 20px 5px 20px

  }



  .blog-style3 .blog-number {

    font-size: 18px;

    width: 50px;

    height: 50px;

    line-height: 50px

  }

}



@media(max-width: 575px) {

  .blog-style4 .blog-content {

    padding: 27px 20px 25px 20px

  }

}



.vs-comment-form {

  margin: 80px 0 30px 0

}



.comment-respond {

  position: relative

}



.comment-respond .form-title a#cancel-comment-reply-link {

  font-size: .7em;

  text-decoration: underline

}



.comment-respond .custom-checkbox.notice {

  margin-bottom: 25px

}



@media(min-width: 1199px) {

  .comment-respond .row {

    --bs-gutter-x: 30px

  }

}



.comment-respond .form-control {

  font-size: 14px;

  font-weight: 500;

  color: #888;

  border: 1px solid var(--body-color);

  background-color: rgba(0, 0, 0, 0);

  height: 60px;

  padding-left: 25px

}



.comment-respond .form-control::-moz-placeholder {

  color: #888

}



.comment-respond .form-control::placeholder {

  color: #888

}



.comment-respond .form-group i {

  color: var(--theme-color)

}



.comment-respond .form-group:last-child {

  margin-bottom: 0

}



.comment-respond input[type=checkbox]~label {

  color: var(--body-color)

}



.comment-respond input[type=checkbox]~label:before {

  background-color: var(--body-bg);

  border: 1px solid var(--border-color);

  border-radius: 0;

  top: 4px

}



.comment-respond input[type=checkbox]:checked~label:before {

  background-color: var(--theme-color);

  border-color: rgba(0, 0, 0, 0)

}



.comment-respond .blog-inner-title {

  border: none;

  margin-bottom: 12px;

  padding-bottom: 0

}



.comment-respond .form-text {

  margin-bottom: 37px;

  font-size: 16px;

  color: var(--body-color)

}



.inner-pane .vs-comment-form {

  margin: 60px 0 30px 0

}



.inner-pane .comment-respond .form-control {

  transition: all ease .4s

}



.inner-pane .comment-respond .form-control:focus {

  background-color: var(--white-color);

  color: var(--title-color);

  border-color: var(--white-color)

}



.inner-pane .comment-respond .blog-inner-title {

  font-size: 22px;

  text-transform: uppercase;

  position: relative;

  margin-bottom: 25px;

  padding-bottom: 17px

}



.inner-pane .comment-respond .blog-inner-title:before {

  content: "";

  position: absolute;

  left: 0;

  bottom: 0;

  width: 30px;

  height: 3px;

  background-color: var(--theme-color)

}



.vs-comments-wrap {

  margin: 80px 0 30px 0

}



.vs-comments-wrap .description p:last-child {

  margin-bottom: 0

}



.vs-comments-wrap .comment-respond {

  margin: 30px 0

}



.vs-comments-wrap pre {

  background: #ededed;

  color: #666;

  font-size: 14px;

  margin: 20px 0;

  overflow: auto;

  padding: 20px;

  white-space: pre-wrap;

  word-wrap: break-word

}



.vs-comments-wrap blockquote {

  background-color: #eaf8f9

}



.vs-comments-wrap li {

  margin: 0

}



.vs-comments-wrap .vs-post-comment {

  display: flex;

  position: relative;

  border-bottom: 1px solid var(--border-color);

  margin: 30px 0 30px 0;

  padding: 0 0 28px 0

}



.vs-comments-wrap ul.comment-list {

  list-style: none;

  margin: 0 0 0 0;

  padding: 0

}



.vs-comments-wrap ul.comment-list ul ul,

.vs-comments-wrap ul.comment-list ul ol,

.vs-comments-wrap ul.comment-list ol ul,

.vs-comments-wrap ul.comment-list ol ol {

  margin-bottom: 0

}



.vs-comments-wrap .comment-avater {

  width: 115px;

  height: 115px;

  margin-right: 25px;

  background-color: var(--smoke-color);

  border-radius: 50%;

  overflow: hidden

}



.vs-comments-wrap .comment-avater img {

  width: 100%

}



.vs-comments-wrap .comment-content {

  flex: 1;

  align-self: center

}



.vs-comments-wrap .commented-on {

  font-size: 12px;

  margin-bottom: 5px;

  font-weight: 500;

  color: var(--body-color);

  display: inline-block;

  text-decoration: underline;

  position: relative;

  top: -2px

}



.vs-comments-wrap .commented-on i {

  margin-right: 8px;

  font-size: .9rem

}



.vs-comments-wrap .name {

  margin: -0.25em 10px 2px 0;

  font-size: 22px;

  display: inline-block

}



.vs-comments-wrap .comment-top {

  display: flex;

  justify-content: space-between

}



.vs-comments-wrap .children {

  margin: 0;

  padding: 0;

  list-style-type: none;

  margin-left: 40px

}



.vs-comments-wrap .reply_and_edit {

  line-height: 1;

  padding-top: 2px

}



.vs-comments-wrap .replay-btn {

  display: inline-block;

  text-transform: uppercase;

  color: var(--body-color);

  font-size: 14px;

  font-weight: 700;

  letter-spacing: .03em

}



.vs-comments-wrap .replay-btn i {

  margin-right: 8px;

  color: var(--theme-color)

}



.vs-comments-wrap .replay-btn:hover {

  color: var(--theme-color)

}



.vs-comments-wrap .star-rating {

  font-size: 12px;

  width: 80px;

  margin-top: 5px;

  margin-bottom: 10px

}



.vs-comments-wrap .star-rating:before {

  color: var(--yellow-color)

}



.vs-comments-wrap .star-rating span:before {

  color: var(--yellow-color)

}



.woocommerce-Reviews .vs-comments-wrap {

  padding: 8px 0 0 0;

  margin: 0;

  background-color: rgba(0, 0, 0, 0)

}



.woocommerce-Reviews .vs-post-comment {

  padding-bottom: 4px

}



.woocommerce-Reviews .woocommerce-Reviews-title {

  margin-bottom: 40px

}



.woocommerce-Reviews .vs-comment-item:first-child .vs-post-comment {

  margin-top: 0

}



.vs-comments-wrap.vs-comment-form {

  margin: 0

}



@media(max-width: 1199px) {

  .vs-comments-wrap {

    margin: 60px 0 30px 0

  }



  .vs-comment-form {

    margin: 60px 0 30px 0

  }

}



@media(max-width: 991px) {

  .vs-comments-wrap .vs-post-comment {

    display: block

  }



  .vs-comments-wrap .comment-avater {

    margin-right: 0;

    margin-bottom: 15px

  }



  .vs-comments-wrap .children {

    margin-left: 25px

  }



  .comment-respond .form-text {

    margin-bottom: 27px;

    font-size: 16px

  }



  .comment-respond .blog-inner-title {

    margin-bottom: 5px

  }

}



.hero-img {

  position: relative

}



.hero-layout8 a.ls-gui-element.ls-nav-prev,

.hero-layout8 a.ls-gui-element.ls-nav-next {

  margin-top: calc(var(--arrow-size) - 180px)

}



@media(max-width: 991px) {

  .hero-layout8 {

    margin-bottom: 30px

  }

}



.hero-ripple {

  position: absolute;

  left: 43%;

  top: 15%;

  z-index: -1;

  width: var(--shape-size, 573px);

  height: var(--shape-size, 573px);

  margin: 0 0 0 calc(var(--shape-size, 573px)/-2);

  border-radius: 50%;

  background-color: rgba(254, 254, 254, .8)

}



.hero-ripple:after,

.hero-ripple:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  z-index: -1;

  border-radius: inherit;

  transition: all ease .4s;

  background-color: #fefefe

}



.hero-ripple:after {

  animation-delay: 2s

}



.hero-layout1 {

  overflow: hidden;

  position: relative

}



.hero-layout1 .hero-mask {

  background-color: #fdece2;

  -webkit-mask-size: contain;

  mask-size: contain;

  -webkit-mask-repeat: no-repeat;

  mask-repeat: no-repeat;

  -webkit-mask-position: center;

  mask-position: center

}



.hero-layout1 [class*=hero-shape] {

  position: absolute;

  z-index: 1

}



.hero-layout1 .hero-shape-1 {

  top: 14%;

  right: 42%

}



.hero-layout1 .hero-shape-2 {

  top: 13%;

  right: 10%

}



.hero-layout1 .hero-shape-3 {

  top: 29%;

  right: 0%

}



.hero-layout1 .hero-inner {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  max-width: 1500px;

  margin: 0 auto

}



.hero-layout1 .hero-content {

  text-align: center;

  position: relative

}



.hero-layout1 .hero-subtitle {

  font-size: 18px;

  font-weight: 500;

  text-transform: uppercase;

  letter-spacing: .22em;

  color: var(--theme-color);

  line-height: 1;

  display: block;

  margin: -0.1em 0 13px 0;

  animation-delay: .2s

}



.hero-layout1 .hero-title {

  font-size: 100px;

  text-transform: uppercase;

  margin: 0 0 30px 0;

  padding: 0 70px;

  line-height: 1;

  color: #313c45;

  animation-delay: 0s

}



.hero-layout1 .vs-btn {

  animation-delay: .3s

}



.hero-layout1 .hero-img {

  flex: 1;

  padding: 50px 0 0 0;

  position: relative

}



.hero-layout1 .hero-flower {

  position: absolute;

  left: 50%;

  top: 30%;

  width: -moz-max-content;

  width: max-content;

  transform: translate(-50%, -50%);

  z-index: -1

}



.hero-layout1 .slick-current {

  --animation-name: slideindown

}



.hero-layout1 .slick-current .vs-btn {

  --animation-name: slideinup

}



.hero-layout2 {

  background-image: linear-gradient(to top, #fcf2ee 40%, transparent 100%);

  position: relative;

  overflow: hidden

}



.hero-layout2 .hero-inner {

  position: relative;

  z-index: 1;

  max-width: 1600px;

  margin-left: auto;

  margin-right: auto;

  width: 100%;

  display: flex;

  align-items: flex-end

}



.hero-layout2 .hero-img {

  text-align: center;

  padding-top: 135px;

  margin-right: 50px;

  flex: 1

}



.hero-layout2 .hero-content {

  padding: 120px 0 90px 0;

  position: relative;

  z-index: 1

}



.hero-layout2 .hero-flower {

  position: absolute;

  left: 50%;

  top: 1%;

  z-index: -1;

  max-width: 100%;

  width: -moz-max-content;

  width: max-content;

  transform: translateX(-50%)

}



.hero-layout2 [class*=hero-shape] {

  position: absolute;

  z-index: 1

}



.hero-layout2 .hero-shape-1 {

  bottom: 12%;

  left: 4%

}



.hero-layout2 .hero-shape-2 {

  right: 43%;

  top: 9%

}



.hero-layout2 .hero-shape-3 {

  right: 2%;

  top: 17%

}



.hero-layout2 .hero-shape-4 {

  top: 37%;

  left: 46%

}



.hero-layout2 .hero-shape-5 {

  right: 0;

  top: 0;

  bottom: 0;

  width: 100%;

  max-width: 1031px;

  background-color: #faf5eb;

  z-index: auto

}



@media(min-width: 1922px) {

  .hero-layout2 .hero-shape-5 {

    max-width: 60%

  }

}



.hero-layout2 .hero-ripple {

  left: 56%;

  top: 21%

}



.hero-layout3 .slick-arrow {

  --pos-x: 120px;

  background-color: var(--theme-color);

  color: var(--white-color)

}



.hero-layout3 .slick-arrow:hover {

  color: var(--theme-color);

  background-color: var(--white-color)

}



@media(max-width: 1500px) {

  .hero-layout1 .hero-mask {

    -webkit-mask-size: cover;

    mask-size: cover

  }



  .hero-layout1 .hero-ripple {

    --shape-size: 400px;

    left: 50%

  }



  .hero-layout1 .hero-shape-1 {

    top: 14%;

    right: 38%;

    max-width: 250px

  }



  .hero-layout1 .hero-shape-3 {

    max-width: 100px;

    top: auto;

    bottom: 10%

  }



  .hero-layout1 .hero-shape-2 {

    top: 11%;

    right: 6%;

    max-width: 60px

  }



  .hero-layout1 .hero-flower {

    max-width: 500px

  }



  .hero-layout1 .hero-inner {

    max-width: 1300px

  }



  .hero-layout1 .hero-title {

    font-size: 90px;

    margin: 0 0 30px 0;

    padding: 0 0

  }



  .hero-layout1 .hero-subtitle {

    font-size: 16px

  }



  .hero-layout2 .hero-inner {

    max-width: 1350px;

    justify-content: space-between

  }



  .hero-layout2 .hero-img {

    padding-top: 110px;

    max-width: 450px

  }



  .hero-layout2 .hero-ripple {

    --shape-size: 400px

  }



  .hero-layout2 .hero-content {

    padding: 130px 0 60px 0

  }



  .hero-layout2 .hero-flower {

    max-width: 400px;

    top: 5%

  }

}



@media(max-width: 1399px) {

  .hero-layout1 .hero-inner {

    max-width: 1000px

  }



  .hero-layout1 .hero-title {

    font-size: 72px

  }



  .hero-layout1 .hero-shape-1 {

    top: 14%;

    right: auto;

    max-width: 120px;

    left: 2%

  }



  .hero-layout1 .hero-flower {

    max-width: 400px

  }



  .hero-layout2 .hero-inner {

    max-width: 1140px

  }



  .hero-layout2 .hero-content {

    padding: 60px 0 60px 0;

    max-width: 48%

  }



  .hero-layout2 .hero-shape-2 {

    right: 31%;

    top: 4%

  }



  .hero-layout2 .hero-shape-3 {

    right: 2%;

    top: 17%;

    max-width: 130px

  }

}



@media(max-width: 1199px) {

  .hero-layout1 .hero-inner {

    max-width: 960px

  }



  .hero-layout1 .hero-img {

    max-width: 390px

  }



  .hero-layout1 .hero-ripple {

    --shape-size: 240px

  }



  .hero-layout1 .hero-title {

    font-size: 60px

  }



  .hero-layout1 .hero-content {

    flex: 1

  }



  .hero-layout2 .hero-inner {

    max-width: 960px

  }



  .hero-layout2 .hero-img {

    margin-right: 0

  }



  .hero-layout2 .hero-content {

    padding: 60px 0 40px 0;

    max-width: 60%

  }



  .hero-layout2 .hero-ripple {

    --shape-size: 250px

  }

}



@media(max-width: 991px) {

  .hero-layout1 .hero-inner {

    max-width: 720px

  }



  .hero-layout1 .hero-img {

    max-width: 320px

  }



  .hero-layout1 .hero-title {

    font-size: 46px

  }



  .hero-layout1 .hero-subtitle {

    font-size: 16px;

    letter-spacing: .1em

  }



  .hero-layout1 .hero-flower {

    max-width: 300px

  }



  .hero-layout1 .hero-shape-3 {

    max-width: 50px

  }



  .hero-layout2 .hero-inner {

    max-width: 720px;

    display: block

  }



  .hero-layout2 .hero-img {

    margin-right: 0;

    padding-top: 0

  }



  .hero-layout2 .hero-shape-1 {

    bottom: 41%;

    left: 2%;

    max-width: 80px

  }



  .hero-layout2 .hero-shape-2 {

    right: 3%;

    top: 3%;

    max-width: 80px

  }



  .hero-layout2 .hero-ripple {

    --shape-size: 65%;

    left: 50%;

    top: 10%

  }



  .hero-layout2 .hero-content {

    max-width: 100%

  }



  .hero-layout2 .hero-img {

    max-width: 100%

  }

}



@media(max-width: 767px) {

  .hero-layout1 .hero-inner {

    flex-direction: column-reverse;

    padding-top: 70px

  }



  .hero-layout1 .hero-shape-1 {

    top: 46%;

    right: auto;

    max-width: 70px;

    left: 2%

  }



  .hero-layout1 .hero-shape-2 {

    top: 3%;

    right: 3%;

    max-width: 25px

  }



  .hero-layout1 .hero-title {

    font-size: 36px

  }



  .hero-layout1 .hero-subtitle {

    font-size: 14px

  }



  .hero-layout1 .hero-flower {

    max-width: 230px

  }



  .hero-layout2 .hero-inner {

    padding: 0 15px 0 15px

  }

}



.ls-hero-layout6 {

  background-color: rgba(255, 233, 219, .4)

}



.bg-hero-light {

  background-color: rgba(255, 233, 219, .6)

}



.ls-box-arrow {

  box-shadow: 0px 8px 16px 0px rgba(154, 86, 58, .5)

}



.ls-box-arrow:before {

  content: "";

  position: absolute;

  top: 0;

  left: -18px;

  width: 18px;

  height: 18px;

  border: 10px;

  border-style: solid;

  border-color: var(--theme-color) var(--theme-color) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0)

}



@media(max-width: 1024px) {

  .ls-layer .vs-btn.style9 {

    padding: 5px 5px 5px 15px;

    font-size: 14px

  }



  .ls-layer .vs-btn.style9 i {

    width: 40px;

    height: 40px;

    line-height: 40px;

    font-size: 14px

  }

}



@media(max-width: 767px) {

  .ls-layer .vs-btn.style9 {

    padding: 12px 15px

  }



  .ls-layer .vs-btn.style9 i {

    width: auto;

    height: auto;

    line-height: 1;

    background-color: rgba(0, 0, 0, 0);

    color: var(--theme-color);

    margin-left: 7px

  }



  .ls-hero-layout6 .ls-layer .vs-btn.style9 {

    padding: 12px 11px;

    font-size: 11px

  }

}



@media(max-width: 1024px) {

  .ls-layer a.vs-btn.style12 {

    padding: 14px 22px;

    font-size: 14px

  }

}



@media(max-width: 767px) {

  .ls-layer a.vs-btn.style12 {

    padding: 10px 13px;

    font-size: 12px

  }

}



.vs-error-wrapper {

  background-color: var(--theme-color)

}



.error-number {

  font-size: 250px;

  font-weight: 400;

  display: block;

  line-height: 1;

  margin: -0.26em 0 0 0;

  color: var(--white-color)

}



.error-number .zero {

  color: var(--theme-color);

  font-size: 1.4em

}



.error-title {

  text-transform: uppercase;

  font-size: 50px;

  margin: -0.3em 0 5px 0;

  color: var(--white-color)

}



.error-text {

  font-size: 18px;

  font-weight: 400;

  color: rgba(255, 255, 255, .8);

  margin-bottom: 40px

}



.error-content {

  background-color: rgba(0, 0, 0, .8);

  text-align: center;

  padding: 90px 0

}



.search-inline {

  position: relative;

  margin: 0 auto 30px auto;

  width: 100%;

  max-width: 650px

}



.search-inline input {

  background-color: rgba(0, 0, 0, 0);

  border: 1px solid rgba(255, 255, 255, .2);

  border-radius: 0;

  height: 66px;

  padding: 0 0 0 40px;

  font-size: 14px;

  font-weight: 400;

  color: var(--white-color)

}



.search-inline input::-moz-placeholder {

  color: var(--white-color)

}



.search-inline input::placeholder {

  color: var(--white-color)

}



.search-inline input:focus {

  background-color: rgba(0, 0, 0, 0);

  border-color: rgba(255, 255, 255, .2);

  color: var(--white-color)

}



.search-inline button {

  position: absolute;

  right: 9px;

  top: 8px;

  border: none;

  color: var(--white-color);

  background-color: var(--theme-color);

  padding: 0;

  width: 50px;

  height: 50px;

  line-height: 50px;

  text-align: center;

  font-size: 20px

}



.search-inline button:hover {

  background-color: var(--white-color);

  color: var(--theme-color)

}



@media(max-width: 1199px) {

  .error-content {

    padding: 80px 30px

  }



  .error-number {

    font-size: 180px

  }

}



@media(max-width: 991px) {

  .error-title {

    font-size: 40px

  }

}



@media(max-width: 767px) {

  .error-content {

    padding: 50px 20px

  }



  .error-number {

    font-size: 110px;

    margin-bottom: 15px

  }



  .error-title {

    font-size: 26px

  }



  .error-text {

    font-size: 14px;

    margin-bottom: 20px

  }



  .error-content {

    padding: 80px 20px

  }



  .search-inline input {

    padding: 0 0 0 25px;

    font-size: 16px;

    font-size: 14px

  }

}



.reservation-img-shape {

  position: absolute;

  left: -19.5%;

  top: 50%;

  transform: translateY(-50%)

}



.img-box1 {

  position: relative

}



.img-box1 .img-1 {

  position: absolute;

  right: 10%;

  bottom: -3%

}



.img-box2 {

  position: relative;

  padding: 0 0 50px 0;

  margin: 0 0 30px 0;

  z-index: 1

}



.img-box2 .img-1 {

  position: relative;

  width: -moz-max-content;

  width: max-content;

  max-width: 100%;

  z-index: 5;

  box-shadow: 1.5px 2.598px 14.88px 1.12px rgba(18, 27, 36, .1)

}



.img-box2 .img-2 {

  position: absolute;

  left: -145px;

  bottom: 55px;

  z-index: 4

}



.img-box2 .img-shape {

  position: absolute;

  left: -40px;

  right: -40px;

  bottom: 0;

  height: 100%;

  max-height: 380px;

  background-color: #faf5eb

}



.img-box2 .img-text {

  font-size: 60px;

  color: #4d4a49;

  line-height: 1;

  text-transform: uppercase;

  font-family: var(--title-font);

  opacity: .13;

  position: absolute;

  right: 15px;

  top: 50px;

  transform: rotate(180deg);

  writing-mode: vertical-rl

}



.img-box3 {

  padding: 50px;

  margin-bottom: 30px;

  position: relative

}



.img-box3 .img-1 {

  overflow: hidden;

  border-radius: 9999px

}



.img-box3 .img-2 {

  position: absolute;

  left: -15%;

  top: 36%;

  z-index: -1

}



.img-box3 .img-product {

  background-color: #fdebe0;

  border-radius: 99999px;

  text-align: center;

  padding: 35px 0 38px 0;

  position: relative;

  z-index: 2

}



.img-box3 .img-product img {

  margin-bottom: 37px

}



.img-box3 .product-title {

  font-size: 24px;

  text-transform: uppercase;

  font-family: var(--title-font);

  color: var(--title-color);

  margin: 0 0 8px 0;

  line-height: 1

}



.img-box3 .product-price {

  font-size: 20px;

  font-weight: 500;

  line-height: 1;

  color: var(--theme-color);

  margin: 0

}



.img-box3 .shape-line {

  position: absolute;

  left: 0;

  bottom: 0;

  width: 100%

}



.img-box3 .shape-line svg {

  fill: none;

  transform: rotateX(180deg)

}



.img-box3 .shape-line,

.img-box3 .shape-dot {

  fill: var(--theme-color)

}



.img-box3 .text-shape {

  position: absolute;

  left: 0;

  right: 0;

  top: 26px;

  text-align: center;

  text-transform: uppercase;

  font-size: 36px;

  letter-spacing: .28em;

  font-family: var(--body-font);

  font-family: var(--title-font);

  font-weight: 300;

  transform: rotate(180deg)

}



.img-box3 .text-shape svg {

  overflow: initial;

  width: 90%;

  height: 100%;

  fill: none

}



.img-box3 .text-shape text {

  fill: var(--title-color)

}



.img-box3.style2 .img-product {

  background-color: var(--white-color)

}



.img-box3.style2 .text-shape text,

.img-box3.style2 .shape-dot,

.img-box3.style2 .shape-line {

  fill: var(--white-color)

}



.img-box3.style3 {

  padding: 3px;

  border: 1px solid rgba(154, 86, 58, .14);

  border-radius: 9999px

}



.img-box3.style3 .img-2 {

  left: -34%;

  z-index: -1

}



.img-box3.style3 .img-product {

  padding-bottom: 50px

}



.img-box4 {

  position: relative;

  z-index: 1

}



.img-box4 .img-3 {

  position: absolute;

  left: -4%;

  bottom: -6%;

  z-index: -1

}



.img-box4 .img-2 {

  position: absolute;

  right: -4%;

  top: -6%;

  z-index: -1

}



.img-box4 .watch-btn {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  z-index: 1

}



.img-box5 img {

  width: 100%

}



.img-box6 {

  position: relative

}



.img-box6 .img-1 img {

  width: 100%

}



.img-box6 .img-2 {

  position: absolute;

  right: -180px;

  bottom: -80px

}



.img-box7 {

  position: relative;

  padding: 60px 0 60px 0;

  margin: 0 0 30px 0

}



.img-box7 .img-1 {

  padding: 0 30px 30px 0;

  width: -moz-max-content;

  width: max-content;

  max-width: 100%;

  position: relative

}



.img-box7 .img-2 {

  position: absolute;

  right: 0;

  top: 0

}



.img-box7 .img-3 {

  position: absolute;

  left: -130px;

  bottom: 0

}



.img-box7 .img-4 {

  position: absolute;

  right: 0;

  bottom: 0;

  z-index: -1

}



.img-box8 {

  position: relative

}



.img-box9 {

  position: relative;

  margin-bottom: 30px

}



.img-box9 .img-2 {

  width: -moz-max-content;

  width: max-content;

  position: relative;

  z-index: 1;

  margin: -270px 0 0 auto;

  background-color: var(--white-color);

  padding: 10px;

  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, .04)

}



.img-box10 {

  display: flex;

  margin-bottom: 30px

}



.img-box10 .img-1 img,

.img-box10 .img-2 img {

  border-radius: 6px

}



.img-box10 .img-1 {

  margin-right: -100px;

  margin-top: 100px

}



.img-box11 {

  position: relative

}



.img-box11 .img-1 img {

  width: 100%

}



.img-box11 .img-2 {

  position: absolute;

  left: -4%;

  bottom: -3%;

  max-width: 250px

}



.video-bg-shape {

  position: absolute;

  left: 0;

  top: 0;

  background-color: #fbfbfb;

  width: 100%;

  height: 100%;

  max-height: 700px

}



.video-box-inner {

  padding: 10px 10px 0 10px;

  box-shadow: 0px 16px 32px 0px rgba(0, 0, 0, .04)

}



.about-avater {

  margin-bottom: 30px;

  text-align: center

}



.about-avater .avater {

  width: -moz-max-content;

  width: max-content;

  height: -moz-max-content;

  height: max-content;

  max-width: 100%;

  overflow: hidden;

  margin: 0 auto 28px auto;

  border-radius: 50%

}



.about-avater .avater img {

  transform: scale(1.001);

  transition: all ease .4s

}



.about-avater .name {

  margin-bottom: 0

}



.about-avater:hover .avater img {

  transform: scale(1.15)

}



.media-style1 {

  position: relative;

  background-image: linear-gradient(120deg, #faf5eb 0%, rgb(254, 254, 254) 70%);

  display: flex;

  align-items: center;

  margin: 20px 0 28px 32px;

  padding: 10px 0 10px 0

}



.media-style1 .circle-btn,

.media-style1 .media-img {

  margin: 0 30px 0 -32px

}



.media-style1 .media-text {

  margin: 0;

  color: #464f56;

  font-size: 20px;

  line-height: 26px

}



.media-style2 {

  position: relative;

  text-align: center;

  padding: 112px 0 65px 0;

  z-index: 1

}



.media-style2 .media-shape {

  position: absolute;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  --border-color: transparent;

  background-color: var(--shape-bg);

  -webkit-clip-path: var(--shape-path);

  clip-path: var(--shape-path);

  transition: all ease .4s;

  --border-size: 1px;

  --border-gap: 14px;

  --shape-path: polygon(50% 0, 100% var(--extra-gap), 100% calc(100% - var(--extra-gap)), 50% 100%, 0 calc(100% - var(--extra-gap)), 0 var(--extra-gap));

  --shape-bg: transparent;

  z-index: -1

}



.media-style2 .media-shape:after,

.media-style2 .media-shape:before {

  content: "";

  position: absolute;

  --gap-before: var(--border-gap);

  top: var(--gap-before);

  right: var(--gap-before);

  bottom: var(--gap-before);

  left: var(--gap-before);

  -webkit-clip-path: var(--shape-path);

  clip-path: var(--shape-path);

  display: block;

  z-index: -2;

  transition: all ease .4s;

  background-color: var(--border-color)

}



.media-style2 .media-shape:after {

  --gap-before: calc(var(--border-gap) + var(--border-size));

  background-color: var(--shape-bg);

  z-index: -1

}



.media-style2 .media-label {

  font-size: 18px;

  text-transform: uppercase;

  font-weight: 500;

  color: rgba(40, 40, 40, .2);

  letter-spacing: .22em;

  line-height: 1;

  display: block;

  margin: 0 0 12px 0;

  transition: all ease .4s

}



.media-style2 .media-title {

  text-transform: uppercase;

  font-size: 70px;

  color: rgba(40, 40, 40, .12);

  text-transform: uppercase;

  font-family: var(--title-font);

  font-weight: 300;

  position: relative;

  margin: 0 0 11px 0;

  line-height: 1;

  transition: all ease .4s

}



.media-style2 .media-line {

  width: 70px;

  height: 1px;

  background-color: var(--white-color);

  display: inline-block;

  transition: all ease .4s;

  opacity: 0;

  visibility: hidden

}



.media-style2:hover .media-title,

.media-style2:hover .media-label {

  color: #fdf9f7

}



.media-style3 {

  display: flex;

  align-items: center;

  margin-bottom: 60px

}



.media-style3 .circle-btn {

  margin-right: 20px

}



.media-style3 .media-label {

  font-size: 18px;

  text-transform: uppercase;

  font-weight: 500;

  color: var(--theme-color);

  letter-spacing: .22em;

  line-height: 1;

  display: block;

  margin: 0 0 8px 0

}



.media-style3 .media-title {

  color: #313c45;

  font-size: 100px;

  text-transform: uppercase;

  font-family: var(--title-font);

  line-height: 1;

  margin: 0 0 -0.14em 0

}



.media-style4 {

  display: flex;

  border-left: 2px solid var(--theme-color);

  padding-left: 20px;

  margin: 30px 0 40px 0

}



.media-style4 .media-img {

  margin-right: 30px

}



.media-style4 .media-body {

  align-self: center

}



.media-style4 .media-text {

  margin: 0;

  font-size: 16px

}



.media-style5 {

  position: relative;

  padding: 35px 40px 43px 35px;

  background-color: var(--title-color);

  width: 215px;

  max-width: 100%

}



.media-style5 .media-icon {

  font-size: 4rem;

  position: absolute;

  right: 0;

  top: 0;

  line-height: 1;

  opacity: .2;

  color: var(--white-color)

}



.media-style5 .media-number {

  font-size: 80px;

  line-height: 1;

  font-family: var(--title-font);

  color: var(--white-color);

  display: block;

  margin-bottom: 10px

}



.media-style5 .media-number:after {

  content: "";

  font-family: var(--icon-font);

  font-size: 16px

}



.media-style5 .media-text {

  color: var(--white-color);

  margin: 0

}



.media-style6 {

  display: flex;

  align-items: center;

  margin-bottom: 40px

}



.media-style6 .media-icon {

  width: 60px;

  height: 60px;

  line-height: 60px;

  font-size: 24px;

  text-align: center;

  background-color: var(--theme-color);

  color: var(--white-color);

  border-radius: 50%;

  margin-right: 15px

}



.media-style6 .media-label {

  font-size: 18px;

  margin: 0 0 13px 0;

  line-height: 1;

  display: block

}



.media-style6 .media-title {

  font-size: 36px;

  font-family: var(--title-font);

  margin: 0;

  line-height: 1;

  color: var(--title-color)

}



.media-style7 {

  display: flex;

  margin-bottom: 30px

}



.media-style7 .media-icon {

  margin-right: 20px

}



.media-style7 .media-title {

  margin-bottom: 5px;

  margin-top: -0.15em

}



.media-style7 .media-text {

  font-size: 14px;

  margin-bottom: 0

}



.media-slider .slick-current .media-shape {

  --shape-bg: #84452a;

  --border-color: rgba(253, 250, 249, 0.30);

  transition-delay: .2s

}



.media-slider .slick-current .media-shape:before,

.media-slider .slick-current .media-shape:after {

  transition-delay: .2s

}



.media-slider .slick-current .media-title,

.media-slider .slick-current .media-label {

  color: #fdf9f7;

  transition-delay: .2s

}



.media-slider .slick-current .media-line {

  transition-delay: .2s;

  opacity: 1;

  visibility: visible

}



.media-slider {

  position: relative;

  margin: calc(var(--extra-gap)/-1) 0;

  --extra-gap: 35px;

  z-index: 1

}



.media-slider .circle-btn {

  position: absolute;

  left: 50%;

  top: 0;

  transform: translate(-50%, -50%);

  z-index: 1

}



.media-slider:before {

  content: "";

  position: absolute;

  left: 0;

  top: var(--extra-gap);

  right: 0;

  bottom: var(--extra-gap);

  background-color: var(--theme-color)

}



.about-text {

  font-size: 18px;

  letter-spacing: .03em;

  margin-bottom: 40px

}



.table-style1 {

  margin-bottom: 30px

}



.table-style1 .tr {

  border-bottom: 1px solid rgba(77, 74, 73, .18);

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 22px 15px

}



.table-style1 .tr:nth-child(odd) {

  border-top: 1px solid rgba(77, 74, 73, .18);

  background-image: linear-gradient(120deg, #faf5eb 0%, rgb(254, 254, 254) 70%)

}



.table-style1 .tr:nth-child(odd) .th {

  color: var(--theme-color)

}



.table-style1 .th {

  text-transform: uppercase;

  color: var(--title-color);

  letter-spacing: .1em;

  font-weight: 500

}



.table-style1 .td {

  color: #6f6c6c

}



.table-style2 {

  background-color: rgba(0, 0, 0, .5);

  padding: 30px 40px;

  border-left: 5px solid var(--theme-color)

}



.table-style2 table {

  border: none;

  margin: 0

}



.table-style2 td,

.table-style2 th {

  border: none;

  border-bottom: 1px solid rgba(255, 255, 255, .2);

  padding: 14px 0

}



.table-style2 th {

  color: var(--white-color)

}



.table-style2 td {

  color: #bebebe;

  text-align: right

}



.table-style2 tr:first-child th,

.table-style2 tr:first-child td {

  padding-top: 0

}



.table-style2 tr:last-child td,

.table-style2 tr:last-child th {

  padding-bottom: 0;

  border-bottom: none

}



.about-box1 {

  padding-top: 24px;

  margin-bottom: 30px

}



.about-box1 .sec-subtitle {

  margin-left: -80px

}



.about-box1 .sec-title2 {

  margin: 0 0 25px -80px;

  max-width: 570px

}



.about-box1 .media-style1 {

  margin-bottom: 22px

}



.quote-text {

  font-size: 22px;

  line-height: 35px;

  letter-spacing: .03em;

  font-family: var(--title-font);

  margin: 24px 0 43px 0;

  padding: 15px 25px 15px 25px;

  color: #555;

  border-left: 3px solid var(--theme-color);

  max-width: 630px;

  background-image: linear-gradient(to right, rgba(253, 230, 216, 0.79) 0%, rgba(252, 243, 239, 0) 100%)

}



.quote-text2 {

  border-left: 3px solid var(--theme-color);

  background-image: linear-gradient(to right, rgba(253, 230, 216, 0.79) 0%, rgba(252, 243, 239, 0) 100%);

  padding: 10px 0 10px 15px;

  margin: 25px 0 25px 0

}



.list-style1 ul {

  margin-bottom: 21px

}



.list-style1 li {

  color: #6f6c6c;

  margin-bottom: 8px

}



.list-style2 ul {

  margin: 0 0 26px 0

}



.list-style2 li {

  position: relative;

  margin: 0 0 9px 0;

  padding: 0 0 0 20px

}



.list-style2 li:before {

  content: "";

  position: absolute;

  left: 0;

  top: 10px;

  width: 8px;

  height: 8px;

  background-color: var(--theme-color);

  border-radius: 50%

}



.about-number {

  font-size: 45px;

  font-weight: 700;

  color: var(--title-color);

  line-height: 1;

  display: block

}



.vs-info {

  margin: 0;

  font-size: 20px;

  font-family: var(--title-font);

  color: var(--title-color);

  letter-spacing: .04em

}



.vs-info i {

  color: var(--theme-color);

  font-size: 20px;

  margin: 0 15px 0 0

}



@media(max-width: 1500px)and (min-width: 1399px) {

  .img-box5 {

    max-width: 510px

  }

}



@media(max-width: 1399px)and (min-width: 1199px) {

  .img-box5 {

    max-width: 430px

  }

}



@media(max-width: 1500px) {

  .media-style3 .media-title {

    font-size: 76px

  }



  .media-style3 .media-label {

    font-size: 16px;

    letter-spacing: .1em

  }



  .about-box1 {

    padding-top: 0

  }



  .about-box1 .sec-subtitle {

    margin-left: 0

  }



  .about-box1 .sec-title2 {

    margin: 0 0 25px 0

  }



  .media-style1 {

    padding: 5px 0 5px 0;

    margin: 20px 0 26px 32px

  }



  .media-style1 .media-text {

    font-size: 18px

  }



  .media-style1 .circle-btn,

  .media-style1 .media-img {

    margin: 0px 20px 0 -32px

  }



  .table-style1 .tr {

    padding: 16px 20px

  }



  .img-box2 {

    padding: 0 50px 40px 40px

  }



  .img-box2 .img-1 {

    width: 100%

  }



  .img-box2 .img-1 img {

    width: 100%

  }



  .img-box2 .img-shape {

    left: 0;

    right: 0

  }



  .img-box2 .img-text {

    font-size: 46px;

    right: 3px

  }



  .img-box2 .img-2 {

    left: -8%

  }



  .media-style2 {

    padding: 95px 0 60px 0

  }



  .media-style2 .media-title {

    font-size: 46px;

    margin: 0 0 11px 0

  }



  .media-style2 .media-label {

    font-size: 16px;

    letter-spacing: .05em

  }



  .img-box3 .img-2 {

    left: -5%

  }



  .img-box3.style3 .img-2 {

    display: none

  }



  .img-box6 .img-2 {

    max-width: 300px;

    bottom: 0;

    right: 0

  }



  .img-box7 .img-3 {

    left: -20px

  }

}



@media(max-width: 1399px) {

  .img-box2 .img-2 {

    left: 0

  }



  .reservation-img-shape {

    left: 0;

    max-width: 150px

  }



  .media-style2 .media-title {

    font-size: 40px;

    margin: 0 0 5px 0

  }



  .media-style3 {

    margin-bottom: 40px

  }



  .media-style3 .media-title {

    font-size: 48px

  }



  .media-style3 .circle-btn {

    --btn-size: 85px

  }

}



@media(max-width: 1199px) {

  .img-box10 {

    justify-content: center

  }



  .img-box9 .img-2 {

    margin: -250px 0 0 auto;

    padding: 10px;

    max-width: 270px

  }



  .media-style1 .circle-btn,

  .media-style1 .media-img {

    margin: 0 20px 0 -32px

  }



  .img-box7 .img-3 {

    left: 0;

    max-width: 160px

  }



  .img-box7 .img-2 {

    max-width: 150px

  }



  .media-style2 {

    padding: 80px 0 50px 0

  }



  .media-style2 .media-title {

    font-size: 34px

  }



  .media-style2 .media-label {

    font-size: 14px;

    margin-bottom: 20px

  }

}



@media(max-width: 991px) {

  .img-box1>img {

    width: 100%

  }



  .img-box11 .img-2 {

    left: 0;

    bottom: 0;

    max-width: 180px

  }



  .img-box3 .img-1 img {

    width: 100%

  }



  .img-box3 .img-2 {

    left: 0

  }



  .img-box7 .img-1 {

    padding: 0;

    width: 100%

  }



  .img-box7 .img-1 img {

    width: 100%

  }



  .media-style1 {

    margin: 20px 0 18px 32px

  }



  .about-text {

    font-size: 16px;

    margin-bottom: 25px

  }



  .media-slider {

    --btn-size: 80px

  }



  .img-box4 .img-2 {

    right: 0

  }



  .img-box4 .img-3 {

    left: 0

  }



  .img-box4 .img-4 {

    display: none

  }

}



@media(max-width: 767px) {



  .media-style1 .circle-btn,

  .media-style1 .media-img {

    margin: 0 15px 0 -32px

  }



  .media-style1 .media-text {

    font-size: 16px;

    line-height: 24px

  }



  .img-box2 {

    padding: 0 35px 20px 20px

  }



  .img-box2 .img-text {

    font-size: 32px

  }



  .img-box2 .img-2 {

    max-width: 80px

  }



  .img-box2 .img-shape {

    max-height: 230px

  }



  .media-style3 .media-title {

    font-size: 30px

  }



  .media-style3 .media-label {

    font-size: 14px;

    letter-spacing: .1em;

    margin: 0 0 15px 0

  }



  .media-style3 .circle-btn {

    --btn-size: 70px;

    margin-right: 10px

  }



  .media-style3 .circle-btn .btn-icon {

    width: 35px;

    height: 35px;

    line-height: 35px;

    font-size: 14px

  }



  .media-slider {

    --extra-gap: 0

  }



  .about-number {

    font-size: 30px;

    min-width: 40px

  }



  .media-style2 .media-shape {

    --shape-path: none

  }



  .media-style2 .media-shape {

    --shape-bg: #84452a;

    --border-color: rgba(253, 250, 249, 0.30)

  }



  .media-style2 .media-title,

  .media-style2 .media-label {

    color: #fdf9f7

  }



  .media-style2 .media-line {

    opacity: 1;

    visibility: visible

  }



  .img-box3 {

    padding: 50px 30px 30px 30px

  }



  .img-box6 .img-2 {

    max-width: 180px

  }

  .d-sm-flex-spa-experience {
    display: block !important;
    padding-left: 10px;
}

.col-lg-6.mb-40.mb-lg-0.wow.fadeInUp.d-none.d-xl-block {
  display: block !important;
}

  .media-style4 {

    display: block

  }



  .media-style4 .media-img {

    margin-right: 0;

    margin-bottom: 20px

  }



  .media-style5 .media-icon {

    font-size: 3rem

  }



  .media-style5 {

    padding: 28px 20px 28px 20px

  }



  .media-style5 .media-number {

    font-size: 40px;

    margin-bottom: 5px

  }



  .media-style5 .media-text {

    font-size: 11px

  }



  .table-style2 {

    padding: 20px 20px

  }



  .table-style2 th,

  .table-style2 td {

    font-size: 12px;

    padding: 10px 0

  }



  .img-box7 {

    padding: 30px 0

  }



  .media-style6 {

    margin-bottom: 30px

  }



  .media-style6 .media-icon {

    width: 45px;

    height: 45px;

    line-height: 45px;

    font-size: 18px;

    margin-right: 10px

  }



  .media-style6 .media-label {

    font-size: 14px

  }



  .media-style6 .media-title {

    font-size: 22px

  }

}



@media(max-width: 575px) {

  .img-box9 {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 20px

  }



  .img-box9 img {

    width: 100%

  }



  .img-box9 .img-2 {

    margin: 0 0 0 auto;

    padding: 0;

    width: 100%;

    max-width: 100%;

    box-shadow: none

  }



  .media-style5 {

    width: 100%

  }



  .img-box7 .img-2,

  .img-box7 .img-3 {

    max-width: 100px

  }



  .about-avater .name {

    margin-bottom: 0;

    font-size: 18px

  }

}



.form-style1 {

  padding-left: 40px

}



.form-style1 input {

  background-color: rgba(0, 0, 0, 0);

  border: none;

  border-bottom: 1px solid rgba(253, 230, 216, .3);

  padding: 0 20px 0 0;

  height: 40px;

  color: var(--body-color);

  font-size: 14px;

  font-weight: 500;

  font-family: var(--body-font);

  margin: 0

}



.form-style1 button {

  border: none;

  font-size: 12px;

  letter-spacing: .22em;

  padding: 10px 23px

}



.form-style1 button:after,

.form-style1 button:before {

  background-color: var(--white-color)

}



.form-style1 button:hover {

  color: var(--theme-color)

}



.form-style1 .form-title {

  font-size: 20px;

  text-transform: uppercase;

  margin-bottom: 19px;

  margin-top: -0.2em

}



.form-style1 .form-group {

  display: flex

}



.form-style2 {

  background-color: var(--white-color);

  padding: 55px 50px 55px 50px;

  box-shadow: 1.5px 2.598px 14.88px 1.12px rgba(18, 27, 36, .06)

}



.form-style2 .form-title {

  margin: -0.25em 0 2px 0

}



.form-style2 .form-label {

  font-size: 18px;

  color: var(--theme-color);

  margin: 0 0 25px 0

}



.form-style2 .form-group {

  margin-bottom: 15px

}



.form-style2 .form-group:last-child {

  margin-bottom: 0

}



.form-style2 input {

  background-color: #faf5eb;

  border: none;

  color: #6f6c6c;

  font-size: 14px;

  padding-right: 25px;

  padding-left: 25px;

  height: 70px

}



.form-style2 input::-moz-placeholder {

  text-transform: uppercase

}



.form-style2 input::placeholder {

  text-transform: uppercase

}



.form-style2 .vs-btn {

  margin-top: 27px;

  width: 100%;

  height: 70px;

  line-height: 70px;

  padding: 0 20px

}



.form-style3 {

  padding: 1px 15px 0 15px

}



.form-style3 .form-title {

  color: var(--white-color);

  letter-spacing: .15em;

  text-transform: uppercase;

  margin: -0.24em 0 40px 0

}



.form-style3 .form-group {

  display: flex;

  max-width: 520px;

  margin-left: auto;

  margin-right: auto

}



.form-style3:not(.layout2) .vs-btn::before,

.form-style3:not(.layout2) .vs-btn::after {

  background-color: var(--secondary-color)

}



.form-style3 input {

  color: var(--title-color);

  font-size: 14px;

  border: 1.5px solid #273036;

  background-color: #1d2429;

  transition: all ease .4s

}



.form-style3 input::-moz-placeholder {

  color: #bebebe

}



.form-style3 input::placeholder {

  color: #bebebe

}



.form-style3 input:focus {

  background-color: var(--white-color);

  border-color: var(--white-color)

}



.form-style3 input:focus::-moz-placeholder {

  color: var(--title-color)

}



.form-style3 input:focus::placeholder {

  color: var(--title-color)

}



.form-style3.layout2 {

  padding: 0;

  width: 550px;

  max-width: 100%

}



.form-style3.layout2 .form-group {

  max-width: 100%;

  margin: 0

}



.form-style3.layout2 input {

  background-color: var(--white-color);

  border-color: var(--white-color)

}



.form-style3.layout2 input::-moz-placeholder {

  color: var(--title-color)

}



.form-style3.layout2 input::placeholder {

  color: var(--title-color)

}



.form-style4 {

  text-align: center;

  background-color: var(--white-color);

  padding: 60px 60px

}



.form-style4 .sec-title {

  margin-bottom: 31px

}



.form-style4 textarea,

.form-style4 input {

  background-color: #f5e4d9;

  border: none;

  margin-bottom: 10px;

  font-size: 13px;

  font-weight: 500;

  height: 65px;

  --body-color: #7f7d7d;

  letter-spacing: .08em;

  padding-left: 67px

}



.form-style4 textarea~i,

.form-style4 input~i {

  left: 30px;

  right: auto;

  color: var(--theme-color);

  top: 24px

}



.form-style4 textarea~i:after,

.form-style4 input~i:after {

  content: "";

  position: absolute;

  right: -12px;

  top: 50%;

  width: 2px;

  height: 12px;

  background-color: #c7c1be;

  margin: -6px 0 0 0

}



.form-style4 textarea {

  padding-left: 30px

}



.form-style4 .vs-btn {

  width: 100%

}



.form-style5 .form-text {

  font-size: 16px;

  margin-bottom: 22px;

  color: var(--body-color);

  margin-top: -0.4em;

  max-width: 320px

}



.form-style5 input {

  height: 50px;

  border: none;

  --body-color: #a3a2a2;

  background-color: #273036;

  margin-bottom: 15px;

  border-radius: 0;

  font-weight: 500;

  font-size: 14px;

  padding-left: 20px;

  padding-right: 20px

}



.form-style5 .vs-btn:hover {

  color: #000

}



.contact-map {

  line-height: 0

}



.contact-map iframe {

  width: 100%;

  height: 404px

}



.contact-table {

  margin: 3px 0 30px 0

}



.contact-table .tr {

  display: flex;

  justify-content: space-between;

  border-bottom: 1px solid #e9e0db;

  padding: 19px 0

}



.contact-table .th {

  font-weight: 500;

  text-transform: uppercase;

  color: var(--title-color);

  font-size: 14px;

  letter-spacing: .18em;

  margin-right: 10px

}



.contact-table .td {

  letter-spacing: .03em

}



.form-style6 {

  --bs-gutter-x: 15px

}



.form-style6 .vs-btn {

  width: 100%;

  height: 60px;

  line-height: 60px;

  padding-top: 0;

  padding-bottom: 0

}



.form-style7 {

  background-color: var(--secondary-color);

  padding: 70px 60px

}



.form-style7 .row {

  --bs-gutter-x: 20px

}



.form-style7 textarea,

.form-style7 select,

.form-style7 input {

  border: none;

  padding-right: 25px

}



.form-style7 textarea {

  min-height: 130px

}



.form-style7 .vs-btn {

  width: 100%;

  height: 60px;

  line-height: 60px;

  padding: 0 20px

}



.form-style10 select,

.form-style10 input,

.form-style8 select,

.form-style8 input {

  height: 70px;

  border-radius: 0;

  padding-left: 50px;

  font-family: var(--body-font);

  font-weight: 400;

  font-size: 14px;

  padding-right: 20px

}



.form-style10 .form-group,

.form-style8 .form-group {

  margin-bottom: 0

}



.form-style10 .form-group i,

.form-style8 .form-group i {

  top: 27px;

  left: 36px;

  right: auto;

  color: var(--white-color)

}



.form-style10 .vs-btn,

.form-style8 .vs-btn {

  height: 70px;

  padding-top: 0;

  padding-bottom: 0

}



.form-style8 input::-moz-placeholder,

.form-style8 select::-moz-placeholder {

  color: var(--white-color)

}



.form-style8 input::-moz-placeholder,

.form-style8 select::-moz-placeholder {

  color: var(--white-color)

}



.form-style8 input::placeholder,

.form-style8 select::placeholder {

  color: var(--white-color)

}



.form-style8 input,

.form-style8 input:focus,

.form-style8 select,

.form-style8 select:focus {

  background-color: rgba(0, 0, 0, 0);

  color: var(--white-color);

  border: 1px solid rgba(255, 255, 255, .5)

}



.form-style9 {

  display: flex;

  position: relative

}



.form-style9 input {

  height: 80px;

  border: none;

  padding-left: 60px;

  width: calc(100% - 225px)

}



.form-style9 .fa-envelope {

  position: absolute;

  left: 30px;

  top: 50%;

  transform: translateY(-50%)

}



.form-style9 .vs-btn {

  width: 225px;

  background-color: #933d1a

}



.form-style9 .vs-btn i {

  margin-right: 10px

}



.form-style10 {

  margin-bottom: 30px

}



.form-style10 select,

.form-style10 input {

  height: 70px;

  border-color: #ededed;

  padding-left: 55px;

  margin-bottom: 0

}



.form-style10 .form-group {

  margin-bottom: var(--bs-gutter-x)

}



.form-style10 .form-group i {

  color: var(--theme-color)

}



.form-style12 .sec-title,

.form-style11 .sec-title {

  font-size: 48px;

  max-width: 400px;

  margin-bottom: 28px

}



.form-style12 .row,

.form-style11 .row {

  --bs-gutter-x: 20px

}



.form-style12 select,

.form-style12 input,

.form-style11 select,

.form-style11 input {

  height: 55px;

  border: none

}



.form-style11 {

  background-color: var(--secondary-color);

  padding: 55px 50px

}



.form-style12 select,

.form-style12 input {

  background-color: var(--secondary-color)

}



@media(max-width: 1399px) {

  .form-style2 {

    padding: 45px 35px 45px 35px

  }



  .form-style11 .sec-title,

  .form-style12 .sec-title {

    font-size: 40px;

    max-width: 390px;

    margin-bottom: 31px

  }



  .form-style11 .sec-subtitle,

  .form-style12 .sec-subtitle {

    margin-bottom: 15px

  }



  .form-style11 {

    padding: 43px 40px

  }

}



@media(max-width: 1199px) {

  .form-style1 button {

    font-size: 12px;

    letter-spacing: 0;

    padding: 10px 15px

  }



  .form-style3 .form-title {

    letter-spacing: 0;

    margin: -0.24em 0 30px 0

  }

}



@media(max-width: 991px) {



  .form-style12 .sec-title,

  .form-style11 .sec-title {

    font-size: 36px;

    max-width: 380px;

    margin-bottom: 31px

  }



  .form-style4 {

    padding: 40px 30px

  }

}



@media(max-width: 767px) {

  .form-style2 {

    padding: 45px 15px 45px 15px

  }



  .form-style2 input {

    height: 50px

  }



  .form-style2 .vs-btn {

    margin-top: 0;

    height: 50px;

    line-height: 50px

  }



  .form-style1 {

    padding-left: 0

  }



  .form-style1 .form-title {

    text-align: center

  }



  .form-style3 .form-group {

    display: block

  }



  .form-style3 .vs-btn {

    margin-top: 15px

  }



  .form-style4 {

    padding: 40px 20px

  }



  .form-style7 {

    padding: 40px 20px

  }



  .form-style9 {

    display: block;

    text-align: center

  }



  .form-style9 .fa-envelope {

    top: 28px;

    left: 20px

  }



  .form-style9 input {

    width: 100%;

    margin-bottom: 20px;

    height: 55px;

    padding-left: 50px

  }



  .form-style12 .sec-title,

  .form-style11 .sec-title {

    font-size: 30px;

    max-width: 370px;

    margin-bottom: 26px

  }



  .form-style11 {

    padding: 42px 20px

  }

}



@media(max-width: 575px) {

  .contact-table .th {

    font-size: 10px;

    letter-spacing: 0;

    margin-right: 5px

  }



  .contact-table .td {

    letter-spacing: 0;

    font-size: 12px

  }

}



.package-style1 {

  background-color: var(--white-color);

  border-radius: 0.25rem;

  padding: 22px 40px 45px 40px;

  margin-bottom: 30px;

  position: relative

}



.package-style1:after,

.package-style1::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 100px;

  height: 100px;

  background-color: var(--theme-color);

  z-index: -1;

  transition: all ease .6s;

  opacity: 0;

  visibility: hidden;

  transform: translate(0, 0)

}



.package-style1:after {

  top: auto;

  bottom: 0;

  right: 0;

  left: auto

}



.package-style1:hover:after,

.package-style1:hover:before {

  opacity: 1;

  visibility: visible;

  transform: translate(-5px, -5px)

}



.package-style1:hover:after {

  transform: translate(5px, 5px)

}



.package-style1 .package-top {

  display: flex;

  align-items: center

}



.package-style1 .package-left {

  flex: 1

}



.package-style1 .package-price {

  font-size: 50px;

  color: var(--theme-color);

  font-family: var(--title-font);

  line-height: 1;

  margin: 0 0 1px 0;

  transition: all ease .4s

}



.price span {

  background: #b69348;

  padding: 8px 15px;

  border-radius: 20px;

  color: #fff;

  font-weight: 500;

  margin-bottom: 15px;

  font-size: 14px;

}

.service-style5:hover .price span {

  background: #000;

}

.price {

  display: flex;

  justify-content: space-around;

}



.package-style1 .currency {

  vertical-align: super;

  font-size: 36px;

  top: 5px;

  position: relative;

  margin-left: 3px

}



.package-style1 .package-duration {

  font-size: 14px;

  margin: 0;

  color: #6f6c6c;

  text-transform: uppercase;

  font-weight: 500

}



.package-style1 .package-name {

  margin: 3px 0 0 0

}



.package-style1 .package-shape {

  text-align: center;

  margin: 12px 0 30px 0

}



.package-style1 .package-list ul {

  margin: 0 0 48px 0

}



.package-style1 .package-list li {

  position: relative;

  margin: 0 0 8px 0;

  color: #6f6c6c

}



.package-style1 .package-list li:before {

  display: none;

  content: "";

  position: absolute;

  right: 0;

  top: 50%;

  background-color: rgba(154, 86, 58, .55);

  width: 26px;

  height: 26px;

  margin-top: -13px;

  color: var(--white-color);

  font-family: var(--icon-font);

  text-align: center;

  font-size: 12px;

  border-radius: 50%

}



.package-style1 .package-btn {

  text-align: center

}



.package-style1 .package-dot {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  border-radius: inherit;

  animation-duration: 40s

}



.package-style1 .package-dot:before {

  content: "";

  position: absolute;

  top: 0;

  left: 50%;

  width: 12px;

  height: 12px;

  margin: -6px 0 0 -6px;

  border-radius: inherit;

  background-color: var(--theme-color);

  opacity: .78

}



.package-style1 .package-img {

  width: var(--img-size, 175px);

  height: var(--img-size, 175px);

  padding: 12px;

  margin: 0 auto 34px auto;

  background-color: rgba(253, 231, 218, .34);

  border-radius: 50%;

  border: .25px solid rgba(154, 86, 58, .3);

  position: relative

}



.package-style1 .package-img img {

  width: 100%;

  height: 100%;

  border-radius: inherit

}



.package-style1.layout2 {

  padding: 0

}



.package-style1.layout2:after,

.package-style1.layout2:before {

  display: none

}



.package-style1.layout2 .package-top {

  padding: 26px 35px 0 35px

}



.package-style1.layout2 .package-name {

  font-size: 30px

}



.package-style1.layout2 .package-duration {

  font-weight: 400

}



.package-style1.layout2 .package-shape {

  margin: 4px 30px 23px 30px

}



.package-style1.layout2 .vs-btn {

  font-family: var(--title-font);

  font-size: 24px;

  width: 100%;

  font-weight: 400;

  text-transform: none;

  letter-spacing: 0

}



.package-style1.layout2 .vs-btn:after,

.package-style1.layout2 .vs-btn:before {

  background-color: var(--smoke-color)

}



.package-style1.layout2 .package-price {

  color: var(--title-color)

}



.package-style1.layout2:hover .package-price,

.package-style1.layout2.active .package-price {

  color: var(--theme-color)

}



.package-style1.layout2:hover .vs-btn,

.package-style1.layout2.active .vs-btn {

  background-color: var(--title-color)

}



.slick-slide .package-style1:before {

  display: none

}



.slick-slide .package-style1:after {

  bottom: 0;

  width: 100%;

  right: 0;

  transform: translate(0, 0)

}



.slick-slide .package-style1:hover:after {

  transform: translate(0, 5px)

}



.price-inner2 {

  max-width: 800px

}



.price-inner1 {

  max-width: 866px;

  width: 100%

}



.price-inner3 {

  background-color: var(--white-color);

  box-shadow: 0px 16px 32px 0px rgba(154, 86, 58, .1);

  padding: 50px 50px 30px 50px;

  border-radius: 14px;

  width: -moz-max-content;

  width: max-content;

  max-width: 100%;

  margin: 0 auto

}



.package-style2 {

  display: flex;

  margin-bottom: 20px

}



.package-style2 .package-title {

  font-size: 24px;

  margin: -0.2em 0 15px 0;

  border-bottom: 1px solid var(--secondary-color);

  padding: 0 0 15px 0

}



.package-style2 .package-text {

  margin: 0

}



.package-style2 .package-label {

  font-size: 14px;

  padding: 0px 5px;

  display: inline-block;

  background-color: var(--theme-color);

  color: var(--white-color);

  border-radius: 6px;

  font-weight: 700;

  margin: 0 5px

}



.package-style2 .package-img {

  margin-right: 20px;

  border-radius: 14px;

  overflow: hidden

}



.package-style2 .package-img img {

  transform: scale(1.001);

  transition: all ease .4s

}



.package-style2 .package-body {

  align-self: center

}



.package-style2:hover .package-img img {

  transform: scale(1.15)

}



.package-style3 {

  display: flex;

  align-items: center;

  background-color: var(--white-color);

  padding: 15px 30px 15px 15px;

  margin-bottom: 30px;

  box-shadow: 0 10px 40px 0 rgba(154, 86, 58, .07);

  transition: all ease .4s

}



.package-style3 .package-line {

  flex: 1;

  border-top: 1px dashed rgba(154, 86, 58, .2);

  margin: 0 20px;

  transition: all ease .4s

}



.package-style3 .package-icon {

  background-color: var(--white-color);

  text-align: center;

  width: var(--icon-size, 100px);

  height: var(--icon-size, 100px);

  line-height: var(--icon-size, 100px);

  margin-right: 20px;

  border: 1px dashed rgba(154, 86, 58, .2);

  transition: all ease .4s

}



.package-style3 .package-icon img {

  max-width: 70px

}



.package-style3 .package-top {

  display: flex;

  align-items: center

}



.package-style3 .package-name {

  margin: 0;

  font-size: 22px

}



.package-style3 .package-price {

  margin: 0;

  font-size: 18px;

  color: var(--title-color);

  transition: all ease .4s

}



.package-style3 .amount {

  font-size: 24px;

  color: var(--theme-color);

  font-family: var(--title-font);

  transition: all ease .4s

}



.package-style3 .package-text {

  margin: 0;

  transition: all ease .4s

}



.package-style3:hover {

  background-color: var(--theme-color)

}



.package-style3:hover .package-line {

  border-top-color: var(--white-color)

}



.package-style3:hover .package-icon {

  border-color: rgba(0, 0, 0, 0)

}



.package-style3:hover .package-name a,

.package-style3:hover .amount,

.package-style3:hover .package-price,

.package-style3:hover .package-text {

  color: var(--white-color)

}



@media(max-width: 1399px) {

  .package-style1 {

    padding: 30px 20px 45px 20px

  }



  .package-style1 .package-name {

    margin: 0 0 0 0;

    font-size: 30px

  }



  .package-style1.layout2 .package-top {

    padding: 26px 25px 0 25px;

    display: block;

    text-align: center

  }



  .package-style1.layout2 .package-left {

    margin-bottom: 5px

  }



  .package-style1.layout2 .package-price {

    font-size: 36px

  }



  .package-style1.layout2 .currency {

    font-size: 24px

  }



  .package-style1.layout2 .vs-btn {

    font-size: 18px

  }

}



@media(max-width: 1199px) {

  .price-inner1 {

    max-width: 100%;

    width: 100%

  }



  .package-style3 {

    padding: 15px 20px 20px 20px

  }

}



@media(max-width: 991px) {

  .package-style3 {

    display: block;

    text-align: center

  }



  .package-style3 .package-icon {

    display: inline-block

  }



  .package-style3 .package-top {

    display: block

  }



  .package-style3 .package-name {

    margin: 0;

    font-size: 22px

  }



  .package-style3 .package-icon {

    margin: 0 0 15px 0

  }



  .package-style3 .package-line {

    display: none

  }



  .package-style3 .package-text {

    font-size: 14px

  }

}



@media(max-width: 767px) {

  .package-style1 .package-name {

    font-size: 18px

  }



  .package-style1 .package-duration {

    font-size: 10px

  }



  .package-style1 .package-price {

    font-size: 25px;

}



  .package-style1 .currency {

    font-size: 26px;

    top: 5px

  }



  .package-style1 .package-list ul {

    margin: 0 0 38px 0

  }



  .package-style1 .package-list li {

    font-size: 14px

  }



  .package-style1 .package-shape {

    margin: 12px 0 15px 0

  }



  .price-inner3 {

    padding: 40px 15px 5px 15px

  }

}



@media(max-width: 575px) {

  .package-style2 {

    margin-bottom: 35px

  }



  .package-style2 .package-img {

    width: 80px;

    margin-right: 10px

  }



  .package-style2 .package-title {

    font-size: 16px;

    padding: 0 0 10px 0;

    margin: 0 0 10px 0

  }



  .package-style2 .package-text {

    font-size: 12px

  }



  .package-style2 .package-label {

    font-size: 10px;

    padding: 2px 2px 2px 2px;

    margin: 0 2px

  }

}



.testi-style1 {

  background-color: var(--theme-color);

  --body-color: #fff;

  --title-color: #fff;

  padding: 80px 120px 80px 70px

}



.testi-style1 .inner-title {

  margin: -0.25em 0 8px 0

}



.testi-style1 .inner-subtitle {

  font-size: 18px;

  font-weight: 500;

  margin-bottom: 32px

}



.testi-style1 .testi-title {

  font-size: 22px;

  font-weight: 500;

  font-family: var(--body-font);

  margin: 0 0 3px 0

}



.testi-style1 .testi-rating {

  color: var(--white-color);

  font-size: 14px;

  margin-bottom: 14px

}



.testi-style1 .testi-rating i {

  margin-right: 3px

}



.testi-style1 .testi-text {

  font-size: 18px;

  line-height: 30px

}



.testi-style1 .testi-avater {

  width: 75px;

  height: 75px;

  border-radius: 50%;

  padding: 3px;

  background-color: var(--white-color);

  overflow: hidden;

  margin-right: 15px;

  box-shadow: 0px 0px 9.3px .7px rgba(65, 65, 65, .13)

}



.testi-style1 .testi-avater img {

  border-radius: 50%;

  width: 100%

}



.testi-style1 .testi-name {

  font-size: 22px;

  font-weight: 700;

  font-family: var(--body-font);

  margin: 0

}



.testi-style1 .testi-degi {

  font-size: 15px;

  font-weight: 500;

  margin: 0

}



.testi-style1 .testi-author {

  display: flex;

  align-items: center;

  margin-top: 32px

}



.testi-style1 .slide-btns {

  display: flex;

  margin-top: 50px

}



.testi-style1 .slide-btns button {

  display: inline-block;

  width: 65px;

  height: 55px;

  border: 1px solid var(--white-color);

  background-color: rgba(0, 0, 0, 0);

  padding: 0;

  color: var(--white-color);

  font-size: 22px

}



.testi-style1 .slide-btns button:last-child {

  border-left: none

}



.testi-style1 .slide-btns button:hover {

  background-color: var(--white-color);

  color: var(--theme-color)

}



.testi-style2 {

  text-align: center;

  margin: 35px auto 30px auto;

  padding: 0 30px 40px 30px;

  max-width: 1165px;

  background-color: #fff;

  box-shadow: 1.5px 2.598px 16.74px 1.26px rgba(129, 136, 144, .09)

}



.testi-style2 .vs-icon {

  --icon-size: 84px;

  margin: -18px 0 37px 0;

  box-shadow: 0 0 0 15px var(--white-color)

}



.testi-style2 .testi-text {

  font-size: 22px;

  line-height: 35px;

  letter-spacing: .03em;

  font-family: var(--title-font);

  margin: 0 auto 35px auto;

  max-width: 900px

}



.testi-style2 .arrow-shape {

  opacity: .8;

  margin: 0 0 12px 0

}



.testi-style2 .testi-name {

  margin: 0 0 0 0

}



.testi-style2 .testi-degi {

  font-size: 14px;

  font-weight: 500

}



.testi-style2 .slick-arrow {

  background-color: rgba(0, 0, 0, 0);

  visibility: visible;

  width: auto;

  height: auto;

  --pos-x: 20px !important;

  color: var(--theme-color);

  opacity: .7;

  font-size: 30px;

  color: #454545;

  transition: all ease .4s

}



.testi-style2 .slick-arrow:hover {

  color: var(--theme-color);

  opacity: 1

}



.testi-style2 .fa-chevron-left:before {

  content: ""

}



.testi-style2 .fa-chevron-left:before {

  content: ""

}



.testi-style3 {

  position: relative;

  padding: 55px 30px 30px 30px;

  margin: 40px 0 30px 0;

  box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .03);

  border-bottom: 4px solid rgba(0, 0, 0, 0);

  transition: all ease .4s;

  background-color: var(--white-color)

}



.testi-style3 .testi-avater {

  width: 80px;

  height: 80px;

  position: absolute;

  top: -40px;

  padding: 7px;

  background-color: var(--white-color);

  border-radius: 50%

}



.testi-style3 .testi-avater img {

  width: 100%;

  border-radius: 50%

}



.testi-style3 .testi-name {

  font-size: 22px;

  margin-bottom: 0px

}



.testi-style3 .testi-text {

  margin: 0 0 15px 0

}



.testi-style3 .testi-degi {

  font-size: 12px;

  text-transform: uppercase;

  font-weight: 500;

  color: var(--theme-color)

}



.testi-style3 .testi-icon {

  font-size: 60px;

  line-height: 1;

  margin-top: -30px;

  position: absolute;

  right: 40px;

  top: 0;

  color: var(--theme-color);

  opacity: .2;

  transition: all ease .4s

}



.testi-style3 .testi-rating {

  color: var(--theme-color);

  margin-bottom: 5px;

  font-size: 14px

}



.testi-style3 .testi-rating i {

  margin-right: 5px

}



.testi-style3 .testi-degi {

  font-weight: 500

}



.testi-style4 {

  position: relative;

  padding: 40px 50px 50px 0

}



.testi-style4:before {

  content: "";

  position: absolute;

  left: -100px;

  top: 0;

  right: 0;

  bottom: 0;

  z-index: -1;

  background-color: var(--white-color);

  box-shadow: 15px 10px 40px 0 rgba(0, 0, 0, .05)

}



.testi-style4:after {

  content: "";

  font-family: var(--icon-font);

  position: absolute;

  right: 10%;

  top: 50%;

  transform: translateY(-50%);

  color: var(--theme-color);

  opacity: .03;

  font-size: 15rem;

  font-weight: 300;

  line-height: 1

}



.testi-style4 .testi-rating {

  color: var(--yellow-color);

  font-size: 16px;

  letter-spacing: .3em;

  margin-bottom: 10px

}



.testi-style4 .testi-text {

  font-size: 18px;

  line-height: 32px;

  margin-bottom: 10px

}



.testi-style4 .testi-name {

  font-size: 26px;

  margin: 0 0 5px 0

}



.testi-style4 .testi-degi {

  text-transform: uppercase;

  color: var(--theme-color);

  font-size: 14px;

  font-weight: 500;

  letter-spacing: .07em

}



.testi-style4 .slick-dots {

  text-align: left;

  margin-top: 15px;

  margin-bottom: 0

}



.testi-style4 .slick-dots button {

  width: 20px;

  height: 5px;

  border: none;

  background-color: rgba(154, 86, 58, .2)

}



.testi-style4 .slick-dots button:hover,

.testi-style4 .slick-dots .slick-active button {

  background-color: var(--theme-color)

}



.testi-icon1 {

  position: relative;

  width: -moz-max-content;

  width: max-content;

  margin: 0 auto 30px auto;

  padding: 0 0 40px 0

}



.testi-icon1:after,

.testi-icon1:before {

  content: "";

  position: absolute;

  background-color: var(--theme-color);

  z-index: -1;

  opacity: .2;

  border-radius: 50%

}



.testi-icon1:before {

  width: 75px;

  height: 75px;

  top: -10px;

  right: -25px

}



.testi-icon1:after {

  left: 50%;

  bottom: 0;

  height: 4px;

  width: 100px;

  margin-left: -50px

}



.testi-divider1 {

  width: calc(100% - 180px);

  height: 2px;

  margin: 0 auto 32px auto;

  background-color: var(--smoke-color);

  display: block;

  position: relative

}



.testi-divider1:after,

.testi-divider1:before {

  content: "";

  position: absolute;

  width: 80px;

  top: 0;

  height: 2px;

  left: 50%;

  margin-left: -40px;

  background-color: var(--theme-color)

}



.testi-divider1:after {

  content: "";

  border-bottom: 2px solid var(--theme-color);

  border-left: 2px solid var(--theme-color);

  width: 20px;

  height: 20px;

  margin-left: -12px;

  background-color: var(--white-color);

  margin-top: -9px;

  transform: rotate(-45deg)

}



.testi-slide1 {

  text-align: center;

  margin-bottom: 22px;

  --pos-x: -160px

}



.testi-slide1 .testi-text {

  font-size: 18px;

  margin: 0 0 10px 0

}



.testi-slide2 {

  width: 100%;

  max-width: 280px;

  padding: 0 25px;

  overflow: hidden;

  margin: 20px auto 8px auto

}



.testi-slide2 .testi-avater {

  width: 70px;

  height: 70px;

  padding: 8px;

  border-radius: 50%;

  overflow: hidden;

  margin: 0 2px 0 2px;

  margin-bottom: 10px;

  cursor: pointer;

  transition: all ease .4s;

  background-color: rgba(0, 0, 0, 0);

  box-shadow: none;

  transform: scale(0.8);

  transform-origin: 50% 50%

}



.testi-slide2 .testi-avater img {

  width: 100%;

  border-radius: 50%

}



.testi-slide2 .testi-avater:hover {

  background-color: var(--secondary-color)

}



.testi-slide2 .slick-center .testi-avater {

  transform: scale(0.99);

  background-color: var(--white-color);

  box-shadow: 0px 10px 28px 0px rgba(249, 163, 146, .3)

}



.testi-slide3 {

  text-align: center;

  margin-bottom: 20px

}



.testi-slide3 .testi-name {

  margin: 0;

  font-size: 22px

}



.testi-slide3 .testi-degi {

  font-size: 14px;

  text-transform: uppercase;

  font-weight: 500;

  color: var(--theme-color);

  letter-spacing: .1em;

  line-height: 1

}



.slick-center .testi-style3,

.testi-style3:hover {

  border-color: var(--theme-color);

  box-shadow: none

}



.slick-center .testi-style3 .testi-icon,

.testi-style3:hover .testi-icon {

  opacity: 1

}



.testi-style5 {

  position: relative;

  background-color: #fff7f2;

  z-index: 1;

  padding: 40px 40px;

  margin-bottom: 30px

}



.testi-style5:after {

  content: "";

  font-family: var(--icon-font);

  font-size: 10rem;

  line-height: 1;

  font-weight: 300;

  color: var(--theme-color);

  position: absolute;

  right: 70px;

  top: 50%;

  z-index: -1;

  transform: translateY(-50%);

  opacity: .07

}



.testi-style5 .testi-rating {

  color: var(--yellow-color);

  letter-spacing: .4em;

  margin-bottom: 10px

}



.testi-style5 .testi-text {

  font-size: 22px;

  font-family: var(--title-font);

  margin-bottom: 25px

}



.testi-style5 .testi-author {

  display: flex;

  align-items: center

}



.testi-style5 .testi-avater {

  margin-right: 20px;

  width: 70px;

  height: 70px

}



.testi-style5 .testi-avater img {

  width: 100%

}



.testi-style5 .testi-name {

  font-size: 22px;

  margin: 0 0 5px 0;

  line-height: 1

}



.testi-style5 .testi-degi {

  text-transform: uppercase;

  color: var(--theme-color);

  font-size: 14px

}



@media(max-width: 1399px) {

  .testi-style1 {

    padding: 70px 40px 70px 40px

  }

}



@media(max-width: 1199px) {

  .testi-style1 {

    padding: 55px 40px 55px 40px

  }



  .testi-style2 .slick-arrow {

    --pos-x: 0

  }



  .testi-slide1 .testi-text {

    font-size: 16px

  }



  .testi-style5 {

    padding: 30px 25px

  }



  .testi-style5 .testi-text {

    font-size: 18px

  }

}



@media(max-width: 991px) {

  .testi-style4 {

    padding: 40px 40px 50px 40px

  }



  .testi-style4::before {

    left: 0

  }



  .testi-style5:after {

    right: 20px;

    font-size: 6rem

  }

}



@media(max-width: 767px) {

  .testi-style1 {

    padding: 40px 15px 40px 15px

  }



  .testi-style1 .testi-text {

    font-size: 16px;

    line-height: 26px

  }



  .testi-style1 .testi-author {

    margin-top: 23px

  }



  .testi-style1 .inner-subtitle {

    font-size: 14px;

    margin-bottom: 22px

  }



  .testi-style2 {

    padding: 0 15px 40px 15px

  }



  .testi-style2 .testi-text {

    font-size: 18px;

    line-height: 30px;

    letter-spacing: 0;

    margin-bottom: 25px

  }



  .testi-style2 .vs-icon {

    margin-bottom: 20px

  }



  .testi-style3 {

    padding: 55px 20px 30px 20px

  }



  .testi-style3 .testi-text {

    font-size: 15px

  }



  .testi-style4 {

    padding: 30px 15px 30px 15px

  }

}



.team-thumbnail,

.team-style1 .team-img {

  background-color: #e5d4ce;

  border-radius: 9999px;

  overflow: hidden;

  margin: 7px;

  outline: .5px solid rgba(154, 86, 58, .4);

  outline-offset: 5px;

  position: relative;

  transition: all ease .4s

}



.team-thumbnail:after,

.team-thumbnail:before,

.team-style1 .team-img:after,

.team-style1 .team-img:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 0%;

  height: 100%;

  background-color: var(--theme-color);

  z-index: 1;

  transition: all ease .4s;

  opacity: .1

}



.team-thumbnail:after,

.team-style1 .team-img:after {

  left: auto;

  right: 0;

  top: auto;

  bottom: 0

}



.team-thumbnail img,

.team-style1 .team-img img {

  width: 100%;

  position: relative;

  z-index: 2;

  transform: scale(1.001);

  transition: all ease .4s

}



.team-style1 {

  text-align: center;

  margin: 0 0 22px 0

}



.team-style1 .team-img {

  background-color: #e5d4ce;

  border-radius: 9999px;

  overflow: hidden;

  margin: 7px;

  outline: .5px solid rgba(154, 86, 58, .4);

  outline-offset: 5px;

  position: relative;

  transition: all ease .4s

}



.team-style1 .team-img:after,

.team-style1 .team-img:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 0%;

  height: 100%;

  background-color: var(--theme-color);

  z-index: 1;

  transition: all ease .4s;

  opacity: .1

}



.team-style1 .team-img:after {

  left: auto;

  right: 0;

  top: auto;

  bottom: 0

}



.team-style1 .team-img img {

  width: 100%;

  position: relative;

  z-index: 2;

  transform: scale(1.001);

  transition: all ease .4s

}



.team-style1 .team-name {

  font-size: 26px;

  margin: 30px 0 6px 0

}



.team-style1 .team-name a {

  color: inherit

}



.team-style1 .team-name a:hover {

  color: var(--theme-color)

}



.team-style1 .team-degi {

  margin: 0

}



.team-style1:hover .team-img {

  outline-color: var(--theme-color)

}



.team-style1:hover .team-img img {

  transform: scale(1.05)

}



.team-style1:hover .team-img:after,

.team-style1:hover .team-img:before {

  width: 50%

}



.team-about {

  padding: 60px 60px 60px 0px

}



.team-about .team-degi {

  color: var(--theme-color);

  font-size: 16px;

  text-transform: uppercase;

  font-weight: 500;

  letter-spacing: .1em;

  margin: -0.1em 0 5px 0;

  display: block

}



.team-about .team-name {

  margin-bottom: 13px

}



.team-about .team-text {

  margin-bottom: 24px

}



.team-about .team-info {

  margin-bottom: 40px

}



.team-about .team-info .title {

  font-weight: 500;

  text-transform: uppercase;

  color: var(--title-color);

  font-size: 14px;

  letter-spacing: .18em;

  margin-right: 10px

}



.team-about .team-info li {

  margin-bottom: 10px;

  border-bottom: 1px solid var(--border-color);

  margin: 0 0 10px 0;

  padding: 0 0 11px 0

}



.team-skill-area {

  margin-bottom: 20px

}



.vs-skillbar {

  margin-bottom: 28px

}



.vs-skillbar .skillbar-head {

  display: flex;

  justify-content: space-between

}



.vs-skillbar .skillbar-title {

  font-size: 20px

}



.vs-skillbar .skillbar-number {

  font-size: 20px;

  font-weight: 500;

  color: var(--title-color);

  font-family: var(--title-font)

}



.vs-skillbar .skillbar-progress {

  height: 10px;

  width: 100%;

  background-color: var(--secondary-color)

}



.vs-skillbar .progress-value {

  height: 100%;

  background-color: var(--theme-color)

}



.team-style2 {

  text-align: center;

  position: relative;

  z-index: 1;

  margin: calc(var(--avater-size, 140px)/2) auto 30px auto;

  padding: .1px 0 30px 0;

  background-color: rgba(154, 86, 58, .08);

  transition: all ease .4s

}



.team-style2 .team-img {

  width: var(--avater-size, 140px);

  height: var(--avater-size, 140px);

  margin: calc(var(--avater-size, 140px)/-2) auto 24px auto;

  border: 2px solid var(--theme-color);

  overflow: hidden;

  border-radius: 50%

}



.team-style2 .team-img img {

  width: 100%;

  border-radius: 50%;

  transition: all ease .4s;

  transform: scale(1)

}



.team-style2 .team-name {

  margin: 0 0 4px 0;

  font-size: 26px

}



.team-style2 .team-name a {

  color: inherit;

  transition: .4s all ease

}



.team-style2 .team-name a:hover {

  color: var(--white-color)

}



.team-style2 .team-degi {

  color: var(--theme-color);

  font-weight: 500;

  letter-spacing: .1em;

  font-size: 14px;

  text-transform: uppercase;

  display: block;

  transition: .4s all ease;

  margin-bottom: 11px

}



.team-style2 .team-social {

  margin-bottom: 18px

}



.team-style2 .team-social a {

  display: inline-block;

  color: var(--body-color);

  margin-right: 7px;

  transition: .4s all ease

}



.team-style2 .team-social a:last-child {

  margin-right: 0

}



.team-style2 .team-social a:hover {

  color: var(--white-color)

}



.team-style2 .vs-btn {

  padding: 10px 15px;

  font-size: 12px;

  background-color: rgba(0, 0, 0, 0);

  border: 1px solid var(--border-color);

  color: var(--theme-color)

}



.team-style2 .vs-btn:hover {

  color: var(--white-color);

  border-color: rgba(0, 0, 0, 0)

}



.team-style2:hover {

  background-color: var(--theme-color)

}



.team-style2:hover .team-img img {

  transform: scale(1.15)

}



.team-style2:hover .team-name a:hover,

.team-style2:hover .team-social a:hover {

  color: var(--title-color)

}



.team-style2:hover .vs-btn,

.team-style2:hover .team-degi,

.team-style2:hover .team-social a,

.team-style2:hover .team-name a {

  color: var(--white-color)

}



.team-style3 {

  text-align: center;

  margin-bottom: 25px;

  --image-size: 200px;

  --links-size: 40px

}



.team-style3 .member-img {

  border-radius: 50%;

  position: relative;

  width: var(--image-size);

  height: var(--image-size);

  margin: 0 auto

}



.team-style3 .member-img img {

  position: relative;

  transition: all ease .4s;

  transform: scale(1);

  width: 100%;

  border-radius: 50%

}



.team-style3 .degi {

  text-transform: uppercase;

  color: var(--theme-color);

  letter-spacing: .2em;

  display: block;

  margin-bottom: 7px;

  font-size: 14px

}



.team-style3 .member-content {

  padding-top: 20px;

  position: relative

}



.team-style3 .sign {

  position: absolute;

  left: 50%;

  top: calc(50% + 40px);

  transform: translate(-50%, -50%);

  transition: all ease .4s;

  opacity: 0;

  visibility: hidden

}



.team-style3 .member-links ul>* {

  display: block;

  position: absolute;

  top: 50%;

  left: 50%;

  width: 40px;

  height: 40px;

  line-height: 40px;

  margin: -20px

}



.team-style3 .member-links ul>*:nth-of-type(1) {

  transform: rotate(110deg) translate(100px) rotate(-110deg)

}



.team-style3 .member-links ul>*:nth-of-type(2) {

  transform: rotate(138deg) translate(100px) rotate(-138deg)

}



.team-style3 .member-links ul>*:nth-of-type(3) {

  transform: rotate(166deg) translate(100px) rotate(-166deg)

}



.team-style3 .member-links ul>*:nth-of-type(4) {

  transform: rotate(194deg) translate(100px) rotate(-194deg)

}



.team-style3 .member-links ul>*:nth-of-type(5) {

  transform: rotate(222deg) translate(100px) rotate(-222deg)

}



.team-style3 .member-links a,

.team-style3 .member-links span.icon {

  display: inline-block;

  width: var(--links-size);

  height: var(--links-size);

  line-height: var(--links-size);

  background-color: var(--white-color);

  color: var(--theme-color);

  border-radius: 50%;

  transition: all ease .4s;

  box-shadow: -12px 0 22px 0px rgba(0, 0, 0, .05)

}



.team-style3 .member-links a:hover,

.team-style3 .member-links span.icon:hover {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.team-style3 .member-links a {

  opacity: 0;

  visibility: hidden

}



.team-style3:hover .member-links a,

.team-style3:hover .sign {

  opacity: 1;

  visibility: visible

}



.team-style4 {

  text-align: center;

  border: rgba(0, 0, 0, 0);

  background-color: var(--white-color);

  padding: 10px 10px 20px 10px;

  text-align: center;

  margin-bottom: 30px;

  border-radius: 0;

  transition: all ease .4s

}



.team-style4 .team-img {

  overflow: hidden;

  margin-bottom: 15px;

  position: relative

}



.team-style4 .team-img img {

  width: 100%;

  transform: scale(1.001);

  transition: all ease .4s

}



.team-style4 .team-img .team-social {

  position: absolute;

  top: 50%;

  left: 20px;

  transform: translateY(-50%);

  margin: 0

}



.team-style4 .team-img .team-social a {

  display: block;

  margin: 0 0 10px 0;

  transform: translateX(-40px);

  opacity: 0;

  visibility: hidden;

  transition: all ease .4s

}



.team-style4 .team-img .team-social a:nth-of-type(1) {

  transition-delay: 0s

}



.team-style4 .team-img .team-social a:nth-of-type(2) {

  transition-delay: .1s

}



.team-style4 .team-img .team-social a:nth-of-type(3) {

  transition-delay: .2s

}



.team-style4 .team-img .team-social a:nth-of-type(4) {

  transition-delay: .3s

}



.team-style4 .team-img .team-social a:last-child {

  margin-bottom: 0

}



.team-style4 .team-name {

  font-size: 26px;

  margin: 0 0 5px 0;

  line-height: 1

}



.team-style4 .team-degi {

  text-transform: uppercase;

  color: var(--theme-color);

  font-size: 14px;

  font-weight: 500;

  margin-bottom: 0;

  display: block

}



.team-style4 .team-social {

  margin-top: 15px

}



.team-style4 .team-social a {

  display: inline-block;

  width: 40px;

  height: 40px;

  line-height: 40px;

  font-size: 16px;

  text-align: center;

  color: var(--title-color);

  background-color: #fef6f4;

  margin-right: 10px;

  border-radius: 0

}



.team-style4 .team-social a:last-child {

  margin-right: 0

}



.team-style4 .team-social a:hover {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.team-style4:hover {

  border-color: var(--theme-color)

}



.team-style4:hover .team-img img {

  transform: scale(1.15)

}



.team-style4:hover .team-img .team-social a {

  opacity: 1;

  visibility: visible;

  transform: translateX(0)

}



@media(min-width: 1199px) {



  .team-align-style1>[class*=col-]:nth-child(even),

  .team-align-style1 .slick-slide:nth-child(even) {

    margin-top: 50px

  }

}



@media(max-width: 1399px) {

  .team-about {

    padding: 0

  }

}



@media(max-width: 767px) {

  .team-style4 .team-social a {

    width: 35px;

    height: 35px;

    line-height: 35px;

    font-size: 14px;

    margin-right: 5px

  }



  .team-style4 .team-name {

    font-size: 22px

  }



  .team-style4 .team-degi {

    font-size: 12px

  }

}



.gallery-style1 {

  position: relative;

  overflow: hidden

}



.gallery-style1 .gallery-img {

  overflow: hidden

}



.gallery-style1 .gallery-img img {

  transition: all ease .4s;

  transform: scale(1.001);

  width: 100%

}



.gallery-style1 .gallery-img.img-rounded {

  border-radius: 9999px

}



.gallery-style1 .gallery-shape {

  position: absolute;

  left: var(--shape-gap, 13px);

  top: var(--shape-gap, 13px);

  right: var(--shape-gap, 13px);

  bottom: var(--shape-gap, 13px);

  z-index: 2;

  opacity: 0;

  visibility: hidden;

  transform: rotate3d(1, 1, 0, -45deg);

  transform-origin: bottom left;

  transition: all ease .6s

}



.gallery-style1 .gallery-content {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  width: 100%;

  text-align: center;

  z-index: 3;

  transform: translateY(-50%)

}



.gallery-style1 .gallery-title {

  font-size: 26px;

  text-transform: uppercase;

  margin: 0 0 12px 0

}



.gallery-style1 .gallery-tag {

  text-transform: uppercase;

  letter-spacing: .05em;

  color: var(--theme-color);

  display: block;

  line-height: 1

}



.gallery-style1 .gallery-btn {

  font-size: 36px;

  color: var(--title-color);

  display: inline-block;

  margin: 0 0 15px 0

}



.gallery-style1 .gallery-btn:hover {

  color: var(--theme-color)

}



.gallery-style1 .gallery-btn,

.gallery-style1 .gallery-tag,

.gallery-style1 .gallery-title {

  transform: translateY(30px);

  transition: all ease .4s;

  opacity: 0;

  visibility: hidden

}



.gallery-style1:hover .gallery-img img {

  transform: scale(1.15)

}



.gallery-style1:hover .gallery-shape,

.gallery-style1:hover .gallery-tag,

.gallery-style1:hover .gallery-btn,

.gallery-style1:hover .gallery-title {

  opacity: 1;

  visibility: visible;

  transition-delay: .3s;

  transform: translateY(0)

}



.gallery-style1:hover .gallery-title {

  transition-delay: .4s

}



.gallery-style1:hover .gallery-tag {

  transition-delay: .5s

}



.gallery-style1:hover .gallery-shape {

  transition-delay: 0s;

  transform: rotate3d(1, 1, 0, 0)

}



.gallery-style2 {

  position: relative;

  margin-bottom: 50px

}



.gallery-style2 .gallery-img {

  overflow: hidden;

  padding-top: 0;

  transition: all ease .4s

}



.gallery-style2 .gallery-img img {

  width: 100%

}



.gallery-style2 .circle-btn {

  position: absolute;

  left: 50%;

  bottom: -20px;

  transform: translateX(-50%);

  transition: all ease .4s;

  opacity: 0;

  visibility: hidden

}



.gallery-style3 {

  position: relative;

  border-bottom: 4px solid var(--theme-color)

}



.gallery-style3 .gallery-img img {

  width: 100%

}



.gallery-style3:before,

.gallery-style3:after {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  opacity: 0;

  width: 0;

  height: 0;

  z-index: 1;

  transition: all .3s linear;

  background-color: var(--theme-color)

}



.gallery-style3:after {

  left: auto;

  right: 0;

  top: auto;

  bottom: 0

}



.gallery-style3:hover:before,

.gallery-style3:hover:after {

  width: 100%;

  height: 100%;

  opacity: .1

}



.gallery-style3:hover .icon-btn {

  opacity: 1;

  visibility: visible

}



.gallery-style3 .icon-btn {

  position: absolute;

  left: 50%;

  top: 50%;

  z-index: 3;

  transform: translate(-50%, -50%);

  opacity: 0;

  visibility: hidden;

  transition-delay: .2;

  --icon-size: 50px;

  --icon-font-size: 18px;

  border-radius: 50%

}



.gallery-bar {

  box-shadow: 0 0 40px 0 rgba(154, 86, 58, .08);

  padding: 30px 60px;

  margin: -70px 50px 40px 50px;

  position: relative;

  z-index: 2;

  background-color: var(--white-color)

}



.gallery-bar .row {

  --bs-gutter-y: 15px

}



.gallery-bar .bar-title {

  display: block;

  text-transform: uppercase;

  color: var(--theme-color);

  font-family: var(--body-font);

  font-weight: 500;

  letter-spacing: .22em;

  line-height: 1;

  margin: 6px 0 6px 0;

  font-size: 14px

}



.gallery-bar .bar-info {

  font-size: 26px;

  font-family: var(--title-font);

  display: block;

  margin: 0 0 0 0;

  color: var(--title-color)

}



@media(min-width: 991px) {

  .slick-slide .gallery-style2 .gallery-img {

    padding-top: 12px

  }

}



.slick-current .gallery-style2 .gallery-img {

  padding-top: 0

}



.slick-current .gallery-style2 .circle-btn {

  bottom: -50px;

  opacity: 1;

  visibility: visible;

  transition-delay: .4s

}



.gallery-slider1 {

  margin: 0 0 -36px 0

}



.gallery-shape1 {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  height: 304px;

  background-color: rgba(253, 231, 218, .58);

  background-image: linear-gradient(to bottom, #fff8f5 0%, rgba(0, 0, 0, 0) 100%)

}



@media(max-width: 1399px) {

  .gallery-bar {

    padding: 30px 30px;

    margin: -70px 20px 40px 20px

  }

}



@media(max-width: 1199px) {

  .gallery-bar {

    padding: 30px 30px;

    margin: 30px 0 30px 0

  }



  .gallery-bar .bar-info {

    font-size: 22px

  }

}



@media(max-width: 991px) {

  .gallery-bar .bar-title {

    font-size: 12px;

    letter-spacing: 0

  }



  .gallery-bar .bar-info {

    font-size: 20px

  }



  .gallery-bar .play-btn {

    --icon-size: 60px;

    --icon-font-size: 17px

  }

}



@media(max-width: 767px) {

  .gallery-style1 .gallery-btn {

    font-size: 24px;

    margin: 0 0 10px 0

  }



  .gallery-style1 .gallery-title {

    font-size: 20px;

    margin-bottom: 6px

  }



  .gallery-style1 .gallery-tag {

    letter-spacing: 0;

    font-size: 14px

  }



  .gallery-style2 .circle-btn {

    --btn-size: 80px

  }



  .gallery-style2 .arrows-style1 button {

    font-size: 12px

  }



  .gallery-bar {

    padding: 30px 15px;

    margin: 30px 0 30px 0

  }



  .gallery-bar .bar-info {

    font-size: 18px

  }



  .gallery-bar [class*=col-] {

    order: 2

  }



  .gallery-bar [class*=col-]:last-child {

    order: 1

  }

}



@media(max-width: 575px) {

  .gallery-bar .bar-info {

    font-size: 17px

  }

}



.feature-style1 {

  text-align: center;

  background-color: var(--white-color);

  padding: 0 40px 42px 40px;

  outline: 1px dashed rgba(154, 86, 58, .5);

  outline-offset: -12px;

  margin: 35px 0 30px 0;

  box-shadow: 2px 3.464px 19.53px 1.47px rgba(18, 27, 36, .11);

  transition: all ease .4s

}



.feature-style1 .vs-icon {

  margin: -29px 0 25px 0;

  --icon-size: 85px;

  box-shadow: 0 0 0 14px var(--white-color)

}



.feature-style1 .arrow-shape {

  margin: 13px 0 14px 0;

  opacity: .8

}



.feature-style1 .arrow-shape .arrow {

  transition: all ease .4s

}



.feature-style1 .feature-title {

  font-size: 26px;

  margin: 0 0 10px 0

}



.feature-style1 .feature-text {

  color: #6f6c6c;

  margin: 0;

  transition: all ease .4s

}



.feature-style1:hover {

  background-color: var(--theme-color);

  outline-color: var(--white-color);

  box-shadow: none

}



.feature-style1:hover .vs-icon {

  box-shadow: 0 0 0 14px var(--theme-color);

  background-color: var(--title-color)

}



.feature-style1:hover .vs-icon:before {

  border-color: var(--white-color)

}



.feature-style1:hover .arrow-shape .arrow {

  background-color: var(--white-color)

}



.feature-style1:hover .feature-text,

.feature-style1:hover .feature-title a {

  color: var(--white-color)

}



.feature-style2 {

  text-align: center;

  outline: 1px dashed rgba(154, 86, 58, .5);

  outline-offset: -15px;

  padding: .1px 55px 55px 55px;

  background-color: var(--white-color);

  --icon-size: 140px;

  margin: calc(var(--icon-size)/3 + 8px) 0 30px 0;

  box-shadow: 1.5px 2.598px 14.88px 1.12px rgba(116, 117, 117, .1)

}



.feature-style2 .feature-text {

  margin: 0 auto 28px auto;

  color: #6f6c6c;

  line-height: 22px;

  max-width: 275px

}



.feature-style2 .vs-icon {

  margin: calc(var(--icon-size)/-3) auto 24px auto;

  display: block;

  transition: all ease .4s

}



.feature-style2 .vs-icon img {

  filter: none;

  transition: all ease .4s;

  transform: rotateY(0)

}



.feature-style2 .arrow-shape {

  margin: 17px 0 17px 0;

  opacity: .5

}



.feature-style2:hover {

  outline-color: var(--theme-color)

}



.feature-style2:hover .vs-icon {

  background-color: var(--theme-color)

}



.feature-style2:hover .vs-icon img {

  filter: brightness(0) invert(1);

  transform: rotateY(180deg)

}



@media(max-width: 1399px) {

  .feature-style2 {

    padding: .1px 40px 40px 40px

  }



  .feature-style2 .feature-title {

    font-size: 24px

  }



  .feature-style2 .feature-text {

    margin: 0 auto 18px auto;

    font-size: 14px

  }



  .feature-style2 .arrow-shape {

    margin: 7px 0 7px 0

  }

}



@media(max-width: 1199px) {

  .feature-style1 .feature-title {

    font-size: 22px

  }



  .quote-text {

    font-size: 18px;

    line-height: 28px;

    padding: 10px 20px 10px 15px

  }



  .feature-style2 {

    --icon-size: 100px

  }



  .feature-style2 .feature-text {

    margin: 0 auto 10px auto

  }

}



.service-style1 {

  display: flex;

  max-width: 430px;

  margin: 0 0 45px 0;

  align-items: center

}



.service-style1:last-child {

  margin-bottom: 0

}



@media(min-width: 991px) {

  .service-style1.reverse {

    flex-direction: row-reverse;

    text-align: right

  }



  .service-style1.reverse .service-content {

    padding: 0 20px 0 0

  }

}



.service-style1 .service-icon {

  width: var(--icon-size, 100px);

  height: var(--icon-size, 100px);

  line-height: var(--icon-size, 100px);

  margin: 5px;

  background-color: var(--theme-color);

  text-align: center;

  border-radius: 50%;

  position: relative;

  transition: all ease .4s

}



.service-style1 .service-icon:before {

  content: "";

  position: absolute;

  top: -5px;

  right: -5px;

  bottom: -5px;

  left: -5px;

  border: 1px dashed var(--theme-color);

  border-radius: inherit;

  animation: spin 30s infinite linear

}



.service-style1 .service-content {

  padding: 0 0 0 20px;

  flex: 1

}



.service-style1 .service-title {

  font-size: 26px;

  margin: .08em 0 11px 0

}



.service-style1 .service-text {

  margin: 0

}



.service-style1:hover .vs-icon {

  background-color: var(--title-color)

}



.service-style1:hover .vs-icon:before {

  border-color: var(--title-color)

}



.service-style2 {

  padding: 40px 50px 40px 50px;

  background-color: var(--white-color);

  text-align: center;

  box-shadow: 1.5px 2.598px 14.88px 1.12px rgba(54, 72, 89, .05);

  outline: 1px solid rgba(154, 86, 58, .25);

  outline-offset: -9px;

  transition: all ease .4s;

  margin: 0 0 30px 0

}



.service-style2 .vs-icon {

  margin-bottom: 28px

}



.service-style2 .service-title {

  font-size: 26px;

  transition: all ease .4s

}



.service-style2 .service-text {

  margin-bottom: 0;

  transition: all ease .4s

}



.service-style2 .arrow-shape {

  margin-bottom: 15px;

  opacity: .4

}



.service-style2:hover {

  background-color: var(--theme-color);

  outline-color: var(--white-color)

}



.service-style2:hover .vs-icon {

  background-color: var(--white-color)

}



.service-style2:hover .vs-icon:before {

  border-color: var(--white-color)

}



.service-style2:hover .service-text,

.service-style2:hover .service-title {

  color: var(--white-color)

}



.service-style2:hover .arrow-shape .arrow {

  background-color: var(--white-color)

}



.service-style3 {

  background-color: var(--secondary-color);

  padding: 50px 50px 23px 50px;

  text-align: center;

  margin-bottom: 30px;

  transition: all ease .4s

}



.service-style3 .service-img {

  width: 100%;

  max-width: 200px;

  margin: 0 auto;

  margin-bottom: 25px;

  position: relative

}



.service-style3 .service-img img {

  width: 100%

}



.service-style3 .service-icon {

  position: absolute;

  right: 0;

  top: 0;

  background-color: var(--white-color);

  color: var(--white-color);

  width: 70px;

  height: 70px;

  line-height: 70px;

  border-radius: 50%;

  margin: -25px -25px 0 0;

  text-align: center

}



.service-style3 .service-icon img {

  max-height: 40px

}



.service-style3 .service-title {

  font-size: 26px;

  margin-bottom: 6px

}



.service-style3 .service-text {

  color: #6f6c6c

}



.service-style3 .service-icon,

.service-style3 .service-text,

.service-style3 .service-title a {

  transition: all ease .3s

}



.service-style3:hover,

.slick-center .service-style3 {

  background-color: var(--theme-color)

}



.service-style3:hover .service-icon,

.slick-center .service-style3 .service-icon {

  background-color: var(--white-color);

  color: var(--title-color)

}



.service-style3:hover .service-text,

.service-style3:hover .service-title a,

.slick-center .service-style3 .service-text,

.slick-center .service-style3 .service-title a {

  color: var(--white-color)

}



.service-style4 {

  text-align: center;

  margin-bottom: 25px

}



.service-style4 .service-icon {

  width: var(--icon-size, 100px);

  height: var(--icon-size, 100px);

  line-height: calc(var(--icon-size, 100px) - 10px);

  display: inline-block;

  text-align: center;

  transition: all ease .4s;

  background-color: var(--white-color);

  border: 4px solid rgba(0, 0, 0, 0);

  border-radius: 12px;

  box-shadow: 0px 8px 16px 0px rgba(154, 86, 58, .2);

  transition: all ease .8s

}



.service-style4 .service-title {

  position: relative;

  font-size: 26px;

  padding: 23px 0 0 0;

  margin: 17px 0 12px 0

}



.service-style4 .service-title:before {

  content: "";

  position: absolute;

  left: 50%;

  top: 0;

  height: 4px;

  width: 40px;

  margin-left: -20px;

  background-color: var(--theme-color);

  border-radius: 10px

}



.service-style4 .service-text {

  margin: 0 auto 0 auto;

  max-width: 260px

}



.service-style4:hover .service-icon {

  border-color: var(--theme-color);

  box-shadow: none

}



.service-style5 {

  background-color: var(--white-color);

  text-align: center;

  padding: 15px 15px 10px 15px;

  position: relative;

  z-index: 2;

  transition: all ease .4s;

  margin: 15px;

}



.service-style5 .service-btn {

  width: 50px;

  height: 50px;

  line-height: 48px;

  position: absolute;

  bottom: 30px;

  left: 50%;

  margin: 0 0 -25px -25px;

  opacity: 0;

  visibility: hidden;

  color: var(--white-color);

  background-color: var(--title-color);

  border: 2px solid rgba(0, 0, 0, 0);

  font-size: 18px;

  transition: all ease .4s

}



.service-style5 .service-btn:hover {

  background-color: var(--white-color);

  color: var(--theme-color);

  border-color: var(--title-color)

}



.service-style5 .service-title {

  font-size: 26px;

  transition: all ease .4s

}



.service-style5 .service-icon {

  margin-bottom: 25px

}



.service-style5 .service-icon img {

  transition: all ease .4s;

  transform: rotateY(0);

  filter: none

}



.service-style5 .service-text {

  max-width: 280px;

  margin: 0 auto;

  font-size: 14px;

  transition: all ease .4s;

  height: 120px;

}

.linkmore a {

  background: #cd9834;

  padding: 8px 20px;

  border-radius: 20px;

  display: inline-block;

  margin-bottom: 15px;

  color: #fff;

  border: solid 1px;

}



.service-style5:hover .linkmore a{

  background: none;

  border: solid 1px #fff;

}



.service-style5:hover {

  z-index: 3;

  background-color: var(--theme-color)

}



.service-style5:hover .service-icon img {

  filter: brightness(1) invert(0);

  transform: rotateY(0deg);

}



.service-style5:hover .service-text,

.service-style5:hover .service-title a {

  color: var(--white-color)

}



.service-style5:hover .service-btn {

  bottom: 0;

  opacity: 1;

  visibility: visible;

  transition-delay: .15s

}



.service5-slider {

  margin-bottom: -30px

}



.service5-slider .service-style5 {

  margin-bottom: 30px

}



.service-style6 {

  margin-bottom: 26px

}



.service-style6 .text-inherit:hover {

  color: var(--title-color)

}



.service-style6 .service-icon {

  margin-bottom: 23px

}



.service-style6 .service-name {

  font-size: 26px

}



.service-style6 .service-text {

  margin: 0;

  font-size: 14px

}



.service-inner1 {

  position: relative;

  max-width: 1750px;

  margin: 0 auto;

  z-index: 1

}



.service-inner1:after,

.service-inner1:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 50%;

  height: 100%;

  border-radius: 0 200px 200px 0;

  background-image: linear-gradient(var(--gradient-direction, to right), rgb(254, 254, 254) 0%, #faf5eb 100%);

  z-index: -1

}



.service-inner1:after {

  left: auto;

  right: 0;

  border-radius: 200px 0 0 200px;

  --gradient-direction: to left

}



.service-box {

  width: 325px;

  max-width: 100%;

  margin-bottom: 50px

}



.service-box .box-title {

  font-size: 24px;

  background-color: #fdebe0;

  border: 1px solid rgba(196, 198, 200, .2);

  border-left: 3px solid var(--theme-color);

  padding: 23.5px 20px 23.5px 25px;

  margin: 0

}



.service-box a {

  border: 1px solid rgba(196, 198, 200, .3);

  border-top: none;

  padding: 20.5px 25px;

  font-weight: 500;

  font-size: 16px;

  color: #6f6c6c;

  display: block

}



.service-box a:hover {

  color: var(--white-color);

  background-color: var(--theme-color)

}



@media(max-width: 1399px) {

  .service-inner1 {

    padding: 40px 0

  }

}



@media(max-width: 1199px) {

  .service-style1 .service-text {

    margin: 0;

    font-size: 14px

  }



  .service-style3 {

    padding: 40px 35px 10px 35px

  }



  .service-style3 .service-text {

    font-size: 14px

  }



  .service-style3 .service-title {

    font-size: 22px

  }



  .service-box {

    width: 100%

  }

}



@media(max-width: 991px) {

  .service-style1 {

    display: block;

    text-align: center;

    max-width: 100%

  }



  .service-style1 .service-content {

    padding: 0

  }



  .service-style2 {

    padding: 40px 30px 40px 30px

  }



  .service-style2 .service-title {

    font-size: 22px

  }



  .service-inner1 {

    padding: 50px 30px

  }



  .service-inner1:after,

  .service-inner1:before {

    border-radius: 0;

    width: 51%

  }

}



@media(max-width: 767px) {



  section.space {

    padding: 40px 0px;

}

section.space-top.space-extra-bottom.popular-services.arrow-wrap {

  padding: 30px 0px;

}

.service-style5 .service-text {

  height: 100%;

}

  .service-inner1 {

    padding: 40px 0

  }



  .service-style2 {

    padding: 40px 30px 40px 30px

  }



  .service-style2 .service-text {

    font-size: 14px

  }



  .service-style4 .service-icon {

    --icon-size: 70px

  }



  .service-style4 .service-icon img {

    max-width: 40px

  }



  .service-style4 .service-title {

    font-size: 22px

  }



  .service-style4 .service-text {

    font-size: 14px

  }



  .service-style5 {

    padding: 15px 15px 15px 15px;

}

.linkmore {

  margin-top: 10px;

}



  .service-style5 .service-title {

    font-size: 22px

  }

}



.banner-inner1 {

  padding: 50px 45px;

  background-color: #fff;

  box-shadow: 1.5px 2.598px 16.74px 1.26px rgba(127, 59, 29, .09)

}



.banner-style1 {

  display: flex;

  flex-direction: row-reverse;

  background-color: #faefeb;

  border-radius: 10px;

  height: 270px;

  align-items: center

}



.banner-style1 .banner-title {

  font-size: 24px;

  text-transform: uppercase;

  font-family: var(--body-font);

  font-weight: 700;

  color: #4d4a49;

  margin: -0.23em -40px 0 0

}



.banner-style1 .banner-price {

  font-size: 32px;

  font-weight: 500;

  color: var(--theme-color);

  display: flex;

  flex-direction: column-reverse

}



.banner-style1 .banner-price del {

  font-size: 20px;

  font-weight: 500;

  color: #717171;

  display: block;

  margin-bottom: 5px;

  text-decoration-thickness: 1px;

  text-decoration-color: var(--theme-color)

}



.banner-style1 .banner-content {

  flex: 1;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding: 50px 0 45px 30px;

  align-self: stretch

}



.banner-style1 .banner-img {

  padding: 20px 30px 10px 0

}



.banner-style1.layout2 {

  background-color: #faebee

}



.banner-style1.layout3 {

  background-color: #faefeb

}



.banner-style1.layout3 .banner-img {

  margin-right: -55px;

  padding-top: 50px

}



.banner-style2 {

  position: relative;

  margin-bottom: 30px

}



.banner-style2 .banner-img img {

  width: 100%

}



.banner-style2 .banner-content {

  position: absolute;

  width: 100%;

  max-width: 300px;

  right: 0;

  top: 50%;

  transform: translateY(-50%)

}



.banner-style2 .banner-label {

  font-size: 14px;

  text-transform: uppercase;

  color: var(--theme-color);

  font-weight: 700;

  letter-spacing: .2em;

  display: block;

  margin-bottom: 3px

}



.banner-style2 .banner-title {

  margin-bottom: 21px

}



.banner-style2.layout2 .banner-content {

  right: auto;

  left: 10%

}



.banner-style2.layout2 .vs-btn {

  background-color: var(--white-color);

  color: var(--theme-color)

}



.banner-style2.layout2 .vs-btn:hover {

  color: var(--white-color)

}



.banner-style3 {

  position: relative

}



.banner-style3 .banner-img img {

  width: 100%

}



.banner-style3 .banner-label {

  font-size: 18px;

  color: var(--title-color);

  display: block;

  margin-bottom: 5px

}



.banner-style3 .banner-title {

  max-width: 400px;

  margin-bottom: 40px

}



.banner-style3 .banner-content {

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  padding: 30px 60px

}



@media(max-width: 1399px) {

  .banner-style1 .banner-title {

    font-size: 18px

  }



  .banner-style1 .banner-price {

    font-size: 24px

  }



  .banner-style1 .banner-price del {

    font-size: 16px

  }

}



@media(max-width: 1199px) {

  .banner-style1 .banner-img {

    padding: 8px 20px 15px 0

  }



  .banner-style1 .banner-title {

    font-size: 16px

  }



  .banner-style1 .banner-content {

    padding: 35px 0 28px 25px

  }



  .banner-inner1 {

    padding: 30px 30px

  }



  .banner-style2 .banner-content {

    max-width: 250px

  }



  .banner-style3 .banner-content {

    padding: 20px 30px

  }



  .banner-style3 .banner-label {

    font-size: 16px;

    display: block

  }



  .banner-style3 .banner-title {

    max-width: 260px;

    margin-bottom: 20px;

    font-size: 24px

  }



  .banner-style3 .vs-btn {

    letter-spacing: 0;

    font-size: 12px;

    padding: 15px 25px

  }

}



@media(max-width: 991px) {

  .banner-style2 .banner-title {

    font-size: 22px;

    margin-bottom: 10px

  }



  .banner-style2 .banner-label {

    font-size: 12px

  }



  .banner-style2 .banner-content {

    max-width: 180px

  }



  .banner-style2 .vs-btn {

    padding: 10px 20px;

    font-size: 12px

  }



  .banner-style3 .banner-content {

    padding: 20px 20px

  }



  .banner-style3 .banner-label {

    font-size: 14px

  }



  .banner-style3 .banner-title {

    max-width: 240px;

    margin-bottom: 15px;

    font-size: 22px

  }



  .banner-style3 .vs-btn {

    font-size: 10px;

    padding: 13px 20px

  }

}



@media(max-width: 767px) {

  .banner-inner1 {

    padding: 30px 15px

  }

}



.category-style1 {

  padding: 30px 20px 35px 20px;

  background-color: var(--white-color);

  text-align: center;

  box-shadow: 1.5px 2.598px 14.88px 1.12px rgba(54, 72, 89, .1);

  outline: 1px solid rgba(154, 86, 58, .25);

  outline-offset: -9px;

  transition: all ease .4s

}



.category-style1 .category-icon {

  margin-bottom: 23px

}



.category-style1 .category-icon img {

  transition: all ease .4s;

  filter: none

}



.category-style1 .category-name {

  font-size: 14px;

  text-transform: uppercase;

  font-family: var(--body-font);

  font-weight: 700;

  letter-spacing: .15em;

  margin: 0

}



.category-style1 .category-name a {

  transition: all ease .4s

}



.category-style1:hover {

  background-color: var(--theme-color);

  outline-color: var(--white-color)

}



.category-style1:hover .category-icon img {

  filter: brightness(0) invert(1)

}



.category-style1:hover .category-name a {

  color: var(--white-color)

}



.category-style1:hover .category-name a:hover {

  text-decoration: underline

}



.info-box {

  padding: 50px 60px;

  z-index: 1;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  height: 100%

}



.info-box:before {

  z-index: -1

}



.info-box .sec-title {

  color: var(--white-color);

  margin-bottom: 40px

}



.info-box .info-title {

  font-size: 16px;

  color: var(--white-color);

  font-family: var(--body-font);

  font-weight: 700;

  line-height: 1;

  margin: 0 0 15px 0

}



.info-box .info-text {

  color: #e4e1e1;

  line-height: 28px;

  margin: 0

}



.info-box .info-item {

  margin: 0 0 30px 0

}



.info-box .vs-btn {

  margin: 20px 0 0 0

}



.brand-inner1 {

  border-top: 1px solid #ebebeb;

  border-bottom: 1px solid #ebebeb;

  padding: 80px 0

}



.schedule-box1 {

  position: relative

}



.schedule-box1 .schedule-content {

  position: absolute;

  top: 50%;

  left: 0;

  right: 0;

  transform: translateY(-50%);

  z-index: 1;

  text-align: center

}



.schedule-box1 .schedule-label {

  font-size: 16px;

  text-transform: uppercase;

  letter-spacing: .06em;

  font-weight: 700;

  display: block;

  margin-bottom: 2px

}



.schedule-box1 .schedule-title {

  margin-bottom: 30px

}



.schedule-box1 .schedule-time {

  color: var(--title-color);

  margin: 0 0 10px 0;

  font-weight: 500

}



.schedule-box1 .schedule-time:last-child {

  margin-bottom: 0

}



.schedule-box1 .schedule-img img {

  width: 100%

}



.schedule-box1.style2:before {

  content: "";

  position: absolute;

  border: 5px solid var(--theme-color);

  top: 20px;

  right: 20px;

  bottom: -20px;

  left: -20px

}



@media(max-width: 991px) {

  .info-box {

    padding: 40px 30px

  }



  .schedule-box1.style2 {

    margin-left: 20px

  }

}



@media(max-width: 767px) {

  .info-box .sec-title {

    margin-bottom: 20px

  }



  .info-box .info-item {

    margin: 0 0 20px 0

  }



  .info-box .vs-btn {

    margin: 0px 0 0 0

  }

}



.sidemenu-wrapper {

  position: fixed;

  z-index: 99999;

  right: 0;

  top: 0;

  height: 100%;

  width: 0;

  background-color: rgba(0, 0, 0, .75);

  opacity: 0;

  visibility: hidden;

  transition: all ease .8s

}



.sidemenu-wrapper .closeButton {

  display: inline-block;

  border: 1px solid;

  width: 50px;

  height: 50px;

  line-height: 50px;

  font-size: 24px;

  padding: 0;

  position: absolute;

  top: 20px;

  right: 20px;

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

  color: var(--white-color);

  border-radius: 50%;

  transform: rotate(0);

  transition: all ease .4s;

  z-index: 2

}



.sidemenu-wrapper .closeButton:hover {

  color: var(--white-color);

  background-color: var(--theme-color);

  border-color: rgba(0, 0, 0, 0);

  transform: rotate(90deg)

}



.sidemenu-wrapper .sidemenu-content {

  background-color: var(--body-bg);

  width: 400px;

  margin-left: auto;

  padding: 40px 40px 80px 40px;

  height: 100%;

  overflow: scroll;

  position: relative;

  right: -500px;

  cursor: auto;

  transition-delay: 1s;

  transition: right ease 1s

}



.sidemenu-wrapper .sidemenu-content::-webkit-scrollbar-track {

  box-shadow: inset 0 0 1px rgba(0, 0, 0, .1);

  background-color: #f5f5f5

}



.sidemenu-wrapper .sidemenu-content::-webkit-scrollbar {

  width: 2px;

  background-color: #f5f5f5

}



.sidemenu-wrapper .widget {

  padding: 0;

  border: none;

  background-color: rgba(0, 0, 0, 0)

}



.sidemenu-wrapper .widget_title {

  margin-bottom: 36px;

  padding-bottom: 15px;

  text-transform: uppercase

}



.sidemenu-wrapper .widget_title::before {

  content: "";

  position: absolute;

  left: 0;

  bottom: -1px;

  width: 50px;

  height: 2px;

  background-color: var(--theme-color)

}



.sidemenu-wrapper .footer-info {

  color: #554319

}



.sidemenu-wrapper.show {

  opacity: 1;

  visibility: visible;

  width: 100%;

  transition: all ease .8s

}



.sidemenu-wrapper.show .sidemenu-content {

  right: 0;

  opacity: 1;

  visibility: visible

}



.popup-search-box {

  position: fixed;

  top: 0;

  left: 50%;

  background-color: rgba(0, 0, 0, .95);

  height: 0;

  width: 0;

  overflow: hidden;

  z-index: 99999;

  opacity: 0;

  visibility: hidden;

  border-radius: 50%;

  transform: translateX(-50%);

  transition: all ease .4s

}



.popup-search-box button.searchClose {

  width: 60px;

  height: 60px;

  line-height: 60px;

  position: absolute;

  top: 40px;

  right: 40px;

  border: none;

  color: var(--theme-color);

  background-color: var(--white-color);

  font-size: 30px;

  border-radius: 50%;

  transform: rotate(0);

  transition: all ease .4s

}



.popup-search-box button.searchClose:hover {

  color: var(--white-color);

  background-color: var(--theme-color);

  transform: rotate(90deg)

}



.popup-search-box form {

  position: absolute;

  top: 50%;

  left: 50%;

  display: inline-block;

  padding-bottom: 40px;

  cursor: auto;

  width: 100%;

  max-width: 700px;

  transform: translate(-50%, -50%) scale(0);

  transition: transform ease .4s

}



@media(max-width: 1199px) {

  .popup-search-box form {

    max-width: 600px

  }

}



.popup-search-box form input {

  font-size: 18px;

  height: 70px;

  width: 100%;

  border: 2px solid var(--theme-color);

  background-color: rgba(0, 0, 0, 0);

  padding-left: 30px;

  color: #fff;

  border-radius: 50px

}



.popup-search-box form input::-moz-placeholder {

  color: #fff

}



.popup-search-box form input::placeholder {

  color: #fff

}



.popup-search-box form button {

  position: absolute;

  top: 0px;

  background-color: rgba(0, 0, 0, 0);

  border: none;

  color: #fff;

  font-size: 24px;

  right: 12px;

  color: var(--white-color);

  cursor: pointer;

  width: 70px;

  height: 70px;

  transition: all ease .4s;

  transform: scale(1.001)

}



.popup-search-box form button:hover {

  transform: scale(1.1)

}



.popup-search-box.show {

  opacity: 1;

  visibility: visible;

  width: 100.1%;

  height: 100%;

  transition: all ease .4s;

  border-radius: 0

}



.popup-search-box.show form {

  transition-delay: .5s;

  transform: translate(-50%, -50%) scale(1)

}



.woocommerce-message,

.woocommerce-info {

  position: relative;

  border: 1px solid var(--border-color);

  padding: 11px 20px;

  background-color: var(--smoke-color);

  color: var(--title-color);

  font-size: 14px;

  font-weight: 700;

  margin-bottom: 30px;

  border-radius: 0

}



.woocommerce-message a,

.woocommerce-info a {

  color: inherit;

  text-decoration: underline

}



.woocommerce-message a:hover,

.woocommerce-info a:hover {

  text-decoration: underline

}



.woocommerce-message:before,

.woocommerce-info:before {

  content: "";

  font-family: var(--icon-font);

  font-weight: 900;

  margin-right: 10px

}



.woocommerce-notices-wrapper .woocommerce-message {

  background-color: var(--theme-color);

  color: var(--white-color);

  border-color: rgba(0, 0, 0, 0)

}



.woocommerce-notices-wrapper .woocommerce-message:before {

  content: "";

  font-weight: 300

}



.star-rating {

  overflow: hidden;

  position: relative;

  width: 90px;

  height: 1.2em;

  line-height: 1.2em;

  display: block;

  font-family: var(--icon-font);

  font-weight: 700;

  font-size: 14px

}



.star-rating:before {

  content: "";

  color: var(--theme-color);

  float: left;

  top: 0;

  left: 0;

  position: absolute;

  letter-spacing: 3px;

  font-weight: 400

}



.star-rating span {

  overflow: hidden;

  float: left;

  top: 0;

  left: 0;

  position: absolute;

  padding-top: 1.5em

}



.star-rating span:before {

  content: "";

  top: 0;

  position: absolute;

  left: 0;

  color: var(--theme-color);

  letter-spacing: 3px;

  font-weight: 700

}



.quantity {

  position: relative;

  width: -moz-max-content;

  width: max-content;

  display: flex;

  align-items: center

}



.quantity>label {

  text-transform: uppercase;

  font-size: 12px;

  color: var(--body-color);

  font-weight: 700;

  letter-spacing: .1em;

  margin: 0 20px 0 0

}



.quantity input {

  padding: 0 10px 0 10px;

  width: 70px;

  height: 50px;

  text-align: center;

  font-size: 14px;

  font-weight: 700;

  --body-color: var(--title-color);

  border: 1px solid rgba(147, 149, 151, .2);

  border-left: none;

  border-right: none

}



.quantity .qty-btn {

  border: 1px solid rgba(147, 149, 151, .2);

  background-color: rgba(0, 0, 0, 0);

  padding: 0;

  width: 50px;

  height: 50px;

  line-height: 50px;

  color: #bcbcbc;

  font-size: 16px

}



.quantity .qty-btn:hover {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.quantity .quantity-plus {

  bottom: 30px

}



.rating-select {

  margin-top: -0.4em

}



.rating-select label {

  margin: 0 10px 0 0;

  display: inline-block;

  color: var(--body-color)

}



.rating-select p.stars {

  margin-bottom: 0;

  line-height: 1;

  display: inline-block

}



.rating-select p.stars a {

  position: relative;

  height: 14px;

  width: 18px;

  text-indent: -999em;

  display: inline-block;

  text-decoration: none

}



.rating-select p.stars a::before {

  display: block;

  position: absolute;

  top: 0;

  left: 0;

  width: 18px;

  height: 14px;

  line-height: 1;

  font-family: var(--icon-font);

  content: "";

  font-weight: 400;

  text-indent: 0;

  color: var(--theme-color)

}



.rating-select p.stars a:hover~a::before {

  content: "";

  font-weight: 400

}



.rating-select p.stars:hover a::before {

  content: "";

  font-weight: 700

}



.rating-select p.stars.selected a.active::before {

  content: "";

  font-weight: 700

}



.rating-select p.stars.selected a.active~a::before {

  content: "";

  font-weight: 400

}



.rating-select p.stars.selected a:not(.active)::before {

  content: "";

  font-weight: 700

}



.product-big-img {

  background-color: #f1f1f1;

  border: 1px solid rgba(203, 203, 203, .3);

  margin-bottom: 20px

}



.product-thumb-slide {

  margin-bottom: 22px

}



.product-thumb-slide.row {

  --bs-gutter-x: 20px

}



.product-thumb-slide .thumb {

  background-color: #f1f1f1;

  overflow: hidden;

  transition: all ease .4s;

  border: 1px solid rgba(203, 203, 203, .3);

  cursor: pointer

}



.product-thumb-slide .thumb img {

  transition: all ease .4s;

  width: 100%

}



.product-thumb-slide .thumb:hover {

  border-color: var(--theme-color)

}



.product-thumb-slide .slick-current .thumb {

  border-color: var(--theme-color)

}



.product-thumb-slide .slick-current .thumb img {

  transform: scale(1.15)

}



.vs-sort-bar {

  margin-bottom: 40px

}



.vs-sort-bar .row {

  --bs-gutter-y: 20px

}



.woocommerce-result-count {

  margin: 0

}



.woocommerce-ordering select {

  height: 50px;

  --body-color: #555555;

  padding: 0 30px 0 20px;

  background-position: right 17px center;

  font-size: 14px

}



.product-about {

  margin-bottom: 21px

}



.product-about .product-rating {

  display: flex;

  align-items: center;

  font-weight: 500;

  margin: 0 0 5px 0

}



.product-about .product-rating .star-rating {

  margin-right: 10px;

  font-size: 12px;

  width: 80px

}



.product-about .product-title {

  font-size: 46px;

  margin-bottom: 12px

}



.product-about .product-price {

  font-size: 32px;

  font-weight: 500;

  color: var(--title-color);

  line-height: 1;

  margin: 0 0 28px 0

}



.product-about .product-price del {

  font-size: .7em;

  color: var(--body-color);

  font-weight: 400

}



.product-about .product-text {

  margin-bottom: 31px

}



.product-about .quantity {

  width: 100%

}



.product-about .actions {

  display: flex;

  flex-wrap: wrap;

  gap: 20px 10px;

  margin-bottom: 20px

}



.product-about .actions .vs-btn {

  flex: 1

}



.product-about .product-getway {

  border-bottom: 1px solid var(--border-color);

  padding: 0 0 30px 0;

  margin-bottom: 22px

}



.product-about .getway-title {

  font-size: 12px;

  font-weight: 700;

  letter-spacing: .1em;

  display: block;

  margin-bottom: 8px

}



.inner-pane {

  background-color: #f1f1f1;

  padding: 32px 35px 5px 35px

}



#productTabContent {

  margin-bottom: 79px

}



.product_meta {

  font-family: var(--body-font);

  font-size: 13px;

  font-weight: 500;

  text-transform: uppercase

}



.product_meta>span {

  display: block;

  margin-bottom: 3px;

  color: var(--title-color)

}



.product_meta>span:last-child {

  margin-bottom: 0

}



.product_meta>span a {

  color: inherit

}



.product_meta>span a:hover {

  color: var(--theme-color)

}



.product_meta>span>a,

.product_meta>span>span {

  position: relative;

  margin-left: 3px;

  color: var(--body-color);

  text-transform: capitalize;

  font-weight: 400

}



.product_meta>span>a:first-child,

.product_meta>span>span:first-child {

  margin-left: 5px

}



.product_meta>span>a:not(:last-child)::after,

.product_meta>span>span:not(:last-child)::after {

  content: ",";

  margin-right: 3px

}



.product-tab1 {

  margin: 49px 0 30px 0;

  border-bottom: 1px solid var(--border-color);

  padding-bottom: 20px;

  position: relative

}



.product-tab1:before {

  content: "";

  position: absolute;

  left: 0;

  bottom: 3px;

  width: 100%;

  height: 1px;

  border-bottom: inherit

}



.product-tab1 a {

  text-transform: uppercase;

  font-size: 14px;

  font-weight: 700;

  letter-spacing: .03em;

  padding: 0;

  color: var(--body-color)

}



.product-tab1 a:after {

  content: "-";

  position: relative;

  display: inline-block;

  margin: 0 23px 0 23px;

  color: var(--body-color)

}



.product-tab1 a:hover,

.product-tab1 a.active {

  color: var(--theme-color)

}



.product-tab1 li:last-child a:after {

  display: none

}



.product-style1 {

  margin: 0 0 22px 0

}



.product-style1 .product-img {

  background-color: #f8efea;

  text-align: center;

  position: relative;

  margin: 0 0 20px 0

}



.product-style1 .product-img:before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  height: 100%;

  width: 100%;

  background-color: var(--theme-color);

  opacity: 0;

  visibility: hidden;

  transition: all ease .4s;

  z-index: 1;

  transform: scale(0.7)

}



.product-style1 .product-img img {

  transition: all ease .4s;

  transform: scale(1.001)

}



.product-style1 .actions {

  position: absolute;

  left: 0;

  right: 0;

  top: 50%;

  transform: translateY(-50%);

  z-index: 3

}



.product-style1 .actions .vs-btn,

.product-style1 .actions .icon-btn {

  transition: all ease .4s;

  opacity: 0;

  visibility: hidden;

  transform: translateY(-20px)

}



.product-style1 .actions .icon-btn {

  margin-left: 5px

}



.product-style1 .actions .icon-btn:first-child {

  margin-left: 0

}



.product-style1 .actions .vs-btn {

  display: block;

  width: -moz-max-content;

  width: max-content;

  margin: 20px auto 0 auto;

  transform: translateY(20px)

}



.product-style1 .product-body {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between

}



.product-style1 .product-title {

  font-size: 24px;

  margin: 0 0 2px 0

}



.product-style1 .product-price {

  font-size: 18px;

  color: var(--theme-color);

  margin: 2px 0 0 0;

  line-height: 1;

  font-family: var(--title-font)

}



.product-style1 .product-price del {

  font-size: .8em;

  color: var(--body-color);

  margin-left: 5px

}



.product-style1 .product-category a {

  color: #6f6c6c

}



.product-style1 .product-category a:hover {

  color: var(--theme-color)

}



.product-style1:hover .product-img:before {

  opacity: .51;

  visibility: visible;

  transform: scale(1.001)

}



.product-style1:hover .product-img img {

  transform: scale(1.05)

}



.product-style1:hover .actions .icon-btn,

.product-style1:hover .actions .vs-btn {

  transform: translateY(0);

  opacity: 1;

  visibility: visible;

  transition-delay: .2s

}



.product-style2 {

  margin-bottom: 50px

}



.product-style2 .product-img {

  background-color: #f1f1f1;

  overflow: hidden;

  margin-bottom: 23px;

  position: relative

}



.product-style2 .product-img img {

  transform: scale(1.001);

  transition: all ease .4s

}



.product-style2 .actions {

  position: absolute;

  right: 15px;

  top: 15px

}



.product-style2 .actions .icon-btn {

  display: block;

  border-radius: 0;

  margin-bottom: 10px;

  transform: translateX(60px);

  opacity: 0;

  visibility: hidden

}



.product-style2 .actions .icon-btn:last-child {

  margin-bottom: 0

}



.product-style2 .product-title {

  font-size: 24px;

  line-height: 1;

  margin: 0 0 4px 0

}



.product-style2 .product-category a {

  color: #555

}



.product-style2 .product-category a:hover {

  color: var(--theme-color)

}



.product-style2 .product-price {

  font-size: 24px;

  font-family: var(--title-font);

  color: var(--title-color);

  margin: -0.08em 0 0 0

}



.product-style2 .product-price .currency {

  font-size: .7em;

  vertical-align: top;

  position: relative;

  margin-right: 2px;

  top: -0.1em

}



.product-style2 .product-body {

  display: flex;

  flex-wrap: wrap;

  justify-content: space-between

}



.product-style2:hover .product-img img {

  transform: scale(1.1)

}



.product-style2:hover .actions .icon-btn {

  transform: translateX(0);

  opacity: 1;

  visibility: visible

}



.product-style2:hover .actions .icon-btn:nth-child(1) {

  transition-delay: .1s

}



.product-style2:hover .actions .icon-btn:nth-child(2) {

  transition-delay: .15s

}



.product-style2:hover .actions .icon-btn:nth-child(3) {

  transition-delay: .2s

}



.slick-slide .product-style2 {

  margin-bottom: 21px

}



@media(max-width: 1199px) {

  .product-about .product-title {

    font-size: 36px;

    margin-bottom: 12px

  }



  .product-about .product-price {

    font-size: 26px;

    margin: 0 0 18px 0

  }

}



@media(max-width: 991px) {

  .product-thumb-slide {

    margin-bottom: 30px

  }

}



@media(max-width: 767px) {

  .product-about .product-title {

    font-size: 30px;

    margin-bottom: 12px

  }



  .product-about .product-price {

    font-size: 22px;

    margin: 0 0 18px 0

  }



  .inner-pane {

    padding: 32px 15px 5px 15px

  }

}



.accordion-style1 .accordion-item {

  margin: 0 0 20px 0;

  padding: 0 35px 6.5px 35px;

  background-color: var(--white-color);

  border: 1px solid var(--border-color);

  box-shadow: 7.5px 12.99px 40px 0px rgba(154, 86, 58, .05);

  border-radius: 0;

  transition: all ease .4s

}



.accordion-style1 .accordion-item.active,

.accordion-style1 .accordion-item:hover {

  border-color: var(--theme-color)

}



.accordion-style1 .accordion-button {

  background-color: rgba(0, 0, 0, 0);

  border: none;

  padding: 24.5px 0 18px 0;

  font-size: 20px;

  font-family: var(--title-font);

  color: var(--title-color);

  text-align: left

}



.accordion-style1 .accordion-button:after {

  position: absolute;

  right: 0;

  content: "";

  font-family: var(--icon-font);

  font-weight: 300;

  color: var(--title-color);

  border: none;

  width: auto;

  height: auto;

  background-image: none;

  transform: rotate(-90deg);

  transition: all ease .4s;

  margin-left: 10px

}



.accordion-style1 .accordion-button:focus {

  box-shadow: none

}



.accordion-style1 .accordion-button:not(.collapsed):after {

  transform: rotate(0)

}



.accordion-style1 .accordion-button:hover {

  color: var(--theme-color)

}



.accordion-style1 .accordion-body {

  padding: 20px 0 20px 0;

  border-top: 1px solid var(--border-color)

}



.accordion-style1 .accordion-body p {

  font-size: 16px

}



.accordion-style1 .accordion-body p:last-child {

  margin-bottom: 0

}



.accordion-style1 .accordion-collapse {

  border: none

}



@media(max-width: 1399px) {

  .accordion-style1 .accordion-item {

    margin: 0 0 20px 0;

    padding: 0 20px 6.5px 20px

  }



  .accordion-style1 .accordion-button {

    padding: 18px 0 14px 0;

    font-size: 18px

  }

}



.py-50 {

  padding-top: 50px;

  padding-bottom: 50px

}



.pt-20 {

  padding-top: 20px

}



.pb-20 {

  padding-bottom: 20px

}



.pb-30 {

  padding-bottom: 30px

}



.pb-1px {

  padding-bottom: 1px

}



.pt-30 {

  padding-top: 30px

}



.mt-n1 {

  margin-top: -0.25rem

}



.mt-n2 {

  margin-top: -0.5rem

}



.mt-n3 {

  margin-top: -1rem

}



.mt-n4 {

  margin-top: -1.5rem

}



.mt-n5 {

  margin-top: -3rem

}



.mb-n1 {

  margin-bottom: -0.25rem

}



.mb-n2 {

  margin-bottom: -0.5rem

}



.mb-n3 {

  margin-bottom: -1rem

}



.mb-n4 {

  margin-bottom: -1.5rem

}



.mb-n5 {

  margin-bottom: -3rem

}



.mb-10 {

  margin-bottom: 10px

}



.mb-30 {

  margin-bottom: 30px

}



.mb-40 {

  margin-bottom: 40px

}



.mt-30 {

  margin-top: 30px

}



.space,

.space-top {

  padding-top: var(--section-space)

}



.space,

.space-bottom {

  padding-bottom: var(--section-space)

}



.space-extra,

.space-extra-top {

  padding-top: calc(var(--section-space) - 30px)

}



.space-extra,

.space-extra-bottom {

  padding-bottom: calc(var(--section-space) - 30px)

}



@media(max-width: 991px) {



  .space,

  .space-top {

    padding-top: var(--section-space-mobile)

  }



  .space,

  .space-bottom {

    padding-bottom: var(--section-space-mobile)

  }



  .space-extra,

  .space-extra-top {

    padding-top: calc(var(--section-space-mobile) - 30px)

  }



  .space-extra,

  .space-extra-bottom {

    padding-bottom: calc(var(--section-space-mobile) - 30px)

  }



  .space-top-md-none {

    padding-top: 0

  }

}



.vs-features-layout1 .shape1 {

  bottom: 0;

  left: 48%;

  transform: translateX(-50%);

  width: 100%;

  max-width: 560px

}



.vs-features-layout1 .shape2 {

  position: absolute;

  top: 0;

  left: -100px;

  right: -100px;

  height: 100%;

  z-index: -1;

  background-color: #fcf2ee;

  background-color: var(--secondary-color)

}



.vs-features-layout1 .shape3 {

  left: 0;

  bottom: 0;

  width: 100%;

  max-width: 100%;

  text-align: center;

  z-index: 2

}



.vs-features-layout1 .shape5,

.vs-features-layout1 .shape4 {

  width: 920px;

  height: 920px;

  margin-left: -460px;

  margin-top: -440px;

  display: inline-block;

  left: 50%;

  top: 0;

  border-radius: 50%;

  background: var(--white-color);

  z-index: 1

}



.vs-features-layout1 .shape5 {

  transform: scale(0.96);

  background-color: rgba(0, 0, 0, 0);

  border: 34px solid var(--theme-color);

  opacity: .5

}



.vs-features-layout1 .inner-wrapper {

  position: relative;

  z-index: 5;

  padding: 120px 0

}



.vs-features-layout1 .feature-text:last-child {

  margin-bottom: 0

}



.vs-features-layout1 .media-icon {

  margin-top: 3px;

  margin-right: 25px

}



.vs-features-layout1 .media-icon .icon-btn:hover {

  color: var(--theme-color) !important

}



.vs-features-layout1 .icon-btn {

  position: relative;

  --icon-size: 60px;

  border-radius: 50%

}



.vs-features-layout1 .icon-btn.has-border:before {

  content: "";

  position: absolute;

  top: -6px;

  right: -6px;

  bottom: -6px;

  left: -6px;

  border: 1px dashed var(--theme-color);

  border-radius: inherit

}



.vs-features-layout1 .vs-feature {

  margin-bottom: 40px;

  display: flex

}



.vs-features-layout1 .vs-feature:last-child {

  margin-bottom: 0

}



@media(min-width: 1199px) {

  .vs-features-layout1 .row>div:nth-child(1) {

    padding-right: 50px

  }



  .vs-features-layout1 .row>div:nth-child(2) {

    padding-left: 50px

  }



  .vs-features-layout1 .row>div:nth-child(2n+1) .vs-feature {

    flex-direction: row-reverse;

    text-align: right

  }



  .vs-features-layout1 .row>div:nth-child(2n+1) .media-icon {

    margin-right: 0;

    margin-left: 25px

  }

}



.vs-features-layout1 .row.has-default-view>div:nth-child(1) {

  padding-right: 15px

}



.vs-features-layout1 .row.has-default-view>div:nth-child(2) {

  padding-left: 15px

}



.vs-features-layout1 .row.has-default-view>div .vs-feature {

  flex-direction: row;

  text-align: left

}



.vs-features-layout1 .row.has-default-view>div .vs-feature:last-child {

  margin-bottom: 40px

}



.vs-features-layout1 .row.has-default-view>div .vs-feature .media-icon {

  margin-right: 25px;

  margin-left: 0

}



@media(max-width: 1500px) {

  .vs-features-layout1 .shape2 {

    left: 0;

    right: 0

  }

}



@media(max-width: 1199px) {

  .vs-features-layout1 .inner-wrapper {

    padding: 50px 0

  }

}



@media(max-width: 991px) {

  .vs-features-layout1 .vs-feature {

    margin-bottom: 20px

  }



  .vs-features-layout1 .inner-wrapper.pb-60 {

    padding-bottom: 0

  }



  .vs-features-layout1 .row.has-default-view>div .vs-feature:last-child {

    margin-bottom: 30px

  }

}



@media(max-width: 767px) {

  .vs-features-layout1 .vs-feature {

    display: block;

    text-align: center

  }



  .vs-features-layout1 .row.has-default-view>div .vs-feature {

    text-align: center

  }



  .vs-features-layout1 .media-icon {

    margin-right: 0;

    margin-bottom: 15px

  }

}



.vs-team-layout1 a {

  color: inherit

}



.vs-team-layout1 .vs-team-degi {

  display: block;

  margin-bottom: 10px;

  font-weight: 700

}



.vs-team-layout1 .social-links {

  margin-bottom: 10px;

  transition: all ease .4s;

  position: relative;

  top: -50px;

  opacity: 0;

  visibility: hidden;

  margin: -20px 0 10px 0;

  padding: 0;

  list-style-type: none

}



.vs-team-layout1 .social-links li {

  display: inline-block;

  margin: 0 5px

}



.vs-team-layout1 .social-links a {

  display: inline-block;

  width: 40px;

  height: 40px;

  background-color: var(--white-color);

  line-height: 40px;

  box-shadow: 0px 6px 12px 0px rgba(249, 163, 146, .2);

  border-radius: 50%

}



.vs-team-layout1 .social-links a:hover {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.vs-team-layout1 .vs-team {

  text-align: center;

  margin-bottom: 20px

}



.vs-team-layout1 .vs-team:hover .social-links {

  top: 0;

  opacity: 1;

  visibility: visible

}



.vs-gallery-layout1 .vs-gallery-overlay {

  position: absolute;

  left: 0;

  top: 0;

  width: 100%;

  height: 0;

  z-index: 1;

  opacity: 0;

  visibility: hidden;

  transition: all ease .4s;

  background-color: rgba(0, 0, 0, .6)

}



.vs-gallery-layout1 .vs-gallery-content {

  text-align: center;

  position: absolute;

  left: 0;

  top: 45%;

  width: 100%;

  z-index: 2;

  opacity: 0;

  visibility: hidden;

  transition: all ease .4s;

  transform: translateY(-50%)

}



.vs-gallery-layout1 .vs-gallery-btn {

  width: 80px;

  height: 80px;

  line-height: 78px;

  font-size: 22px;

  display: inline-block;

  border: 2px solid rgba(255, 255, 255, .6);

  margin-bottom: 25px;

  color: var(--white-color);

  border-radius: 50%

}



.vs-gallery-layout1 .vs-gallery-btn:hover {

  background-color: var(--theme-color);

  color: var(--white-color);

  border-color: rgba(0, 0, 0, 0)

}



.vs-gallery-layout1 .instagram-btn {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 80px;

  height: 80px;

  line-height: 80px;

  margin: -40px 0 0 -40px;

  z-index: 3;

  opacity: 0;

  visibility: hidden;

  transition: all ease .4s

}



.vs-gallery-layout1 .instagram-btn i {

  line-height: 78px

}



.vs-gallery-layout1 .vs-gallery {

  position: relative

}



.vs-gallery-layout1 .vs-gallery:hover .vs-gallery-content,

.vs-gallery-layout1 .vs-gallery:hover .vs-gallery-overlay,

.vs-gallery-layout1 .vs-gallery:hover .instagram-btn {

  opacity: 1;

  visibility: visible

}



.vs-gallery-layout1 .vs-gallery:hover .vs-gallery-content {

  top: 50%;

  transition-delay: .4s

}



.vs-gallery-layout1 .vs-gallery:hover .vs-gallery-overlay {

  height: 100%

}



.gallery-box {

  position: relative;

  --shape-space: 45px;

  --btn-size: 50px;

  overflow: hidden

}



.gallery-box.box-rounded {

  border-radius: 50%

}



.gallery-box img {

  border-radius: inherit;

  transition: all ease .4s

}



.gallery-box .gal-btn {

  background-color: rgba(0, 0, 0, 0);

  display: inline-block;

  text-align: center;

  width: var(--btn-size);

  height: var(--btn-size);

  line-height: var(--btn-size);

  position: absolute;

  left: 50%;

  top: 50%;

  font-size: 26px;

  z-index: 3;

  color: var(--white-color);

  transform: translate(-50%, -50%);

  transition: all ease .4s;

  opacity: 0;

  visibility: hidden

}



.gallery-box .gal-btn:hover {

  background-color: var(--white-color);

  color: var(--theme-color)

}



.gallery-box:before {

  content: "";

  position: absolute;

  top: var(--shape-space);

  right: var(--shape-space);

  bottom: var(--shape-space);

  left: var(--shape-space);

  z-index: 2;

  opacity: 0;

  background-color: var(--theme-color);

  border-radius: inherit;

  transition: all ease .4s;

  transform: scale(0)

}



.gallery-box:hover .gal-btn {

  opacity: 1;

  visibility: visible;

  transition-delay: .2s

}



.gallery-box:hover:before {

  opacity: .86;

  transform: scale(1)

}



.gallery-box:hover img {

  transform: scale(1.2)

}



@media(max-width: 1199px) {

  .gallery-box {

    --shape-space: 20px;

    --btn-size: 30px

  }



  .vs-gallery-layout1 .instagram-btn {

    width: 60px;

    height: 60px;

    line-height: 60px;

    font-size: 14px

  }



  .vs-gallery-layout1 .instagram-btn i {

    line-height: inherit

  }

}



@media(max-width: 575px) {

  .vs-gallery-layout1 .vs-gallery-title {

    font-size: 18px

  }



  .vs-gallery-layout1 .vs-gallery-btn {

    width: 60px;

    height: 60px;

    line-height: 60px;

    font-size: 18px

  }

}



@media(min-width: 1199px) {

  .instagram-align-style1>[class*=col-]:nth-child(even),

  .instagram-align-style1 .slick-slide:nth-child(even) {

    margin-top: 30px

  }

}



.instagram-box {

  position: relative;

  overflow: hidden

}



.instagram-box .insta-btn {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  background-color: var(--white-color);

  font-family: var(--title-font);

  font-size: 18px;

  font-weight: 400;

  color: var(--theme-color);

  display: inline-block;

  width: 182px;

  height: 50px;

  text-align: center;

  line-height: 50px;

  transition: all ease .4s;

  opacity: 0;

  visibility: hidden

}



.instagram-box .insta-btn:hover {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.instagram-box .insta-btn i {

  margin-right: 10px

}



.instagram-box:hover .insta-btn {

  opacity: 1;

  visibility: visible

}



@media(max-width: 767px) {

  .instagram-box .insta-btn {

    width: 130px

  }

}



.vs-pricing-layout2 .vs-price {

  font-size: 80px;

  font-family: var(--title-font);

  line-height: 1;

  position: relative;

  bottom: -5px

}



.vs-pricing-layout2 .vs-price sub {

  font-size: 24px;

  position: relative;

  bottom: 0

}



.vs-pricing-layout2 .vs-price-head {

  position: relative;

  border-bottom: 2px solid rgba(154, 86, 58, .3);

  padding-bottom: 30px;

  margin-bottom: 63px

}



.vs-pricing-layout2 .vs-price-list {

  list-style: none;

  margin: 0;

  padding: 0;

  text-align: left;

  margin-bottom: 43px

}



.vs-pricing-layout2 .vs-price-list li {

  display: block;

  clear: both;

  margin: 15px 0;

  padding-right: 40px;

  margin-bottom: 20px;

  position: relative

}



.vs-pricing-layout2 .vs-price-list li:after {

  content: "";

  font-family: var(--icon-font);

  position: absolute;

  right: 0;

  top: -6px;

  background-color: var(--white-color);

  text-align: center;

  width: 35px;

  height: 35px;

  line-height: 35px;

  color: var(--theme-color);

  z-index: 1;

  border-radius: 50%;

  transition: all ease .4s

}



.vs-pricing-layout2 .vs-price-box {

  background-color: #fff;

  position: relative;

  z-index: 1;

  padding: 80px;

  padding-top: 74px;

  border-bottom: 10px solid rgba(0, 0, 0, 0);

  transition: all ease .4s

}



.vs-pricing-layout2 .vs-price-box[data-overlay=theme]:before {

  opacity: .5;

  z-index: -1;

  transition: all ease .4s;

  bottom: -10px;

  background-color: var(--secondary-color)

}



.vs-pricing-layout2 .vs-price-box:hover {

  border-color: var(--theme-color)

}



.vs-pricing-layout2 .vs-price-box:hover .vs-price-list li:after {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.vs-pricing-layout2 .vs-price-box:hover::before {

  opacity: 0;

  visibility: hidden

}



@media(max-width: 1199px) {

  .vs-pricing-layout2 .vs-price-box {

    padding: 40px;

    padding-top: 34px

  }

}



@media(max-width: 991px) {

  .vs-pricing-layout2 .vs-price-box {

    padding: 40px 20px

  }



  .vs-pricing-layout2 .vs-price {

    font-size: 42px;

    bottom: -2px

  }



  .vs-pricing-layout2 .package-name {

    font-size: 18px

  }



  .vs-pricing-layout2 .vs-price-head {

    padding-bottom: 15px;

    margin-bottom: 25px

  }



  .vs-pricing-layout2 .vs-price-list {

    margin-bottom: 23px

  }



  .tabs-style1 a {

    padding: 12px 20px

  }

}



.vs-blog-layout2 .vs-blog {

  display: block;

  overflow: hidden;

  background-color: var(--white-color);

  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, .05)

}



.vs-blog-layout2 .blog-content {

  padding: 25px 30px;

  padding-bottom: 15px

}



.vs-blog-layout2 .blog-meta {

  border-top: 1px solid var(--border-color);

  padding-top: 15px;

  margin-top: 20px

}



.vs-blog-layout2 .blog-meta a {

  text-transform: capitalize

}



.vs-blog-layout2 .blog-meta a i {

  color: var(--theme-color)

}



@media(max-width: 1199px) {

  .vs-blog-layout2 .blog-content {

    padding: 15px;

    padding-bottom: 15px

  }



  .vs-blog-layout2 .blog-meta a {

    font-size: 14px

  }

}



.counter-inner1 {

  padding: 40px 0

}



.counter-media {

  padding: 13px 40px

}



.counter-media .sec-title {

  margin-bottom: 10px

}



.counter-media .counter-text {

  letter-spacing: .2em;

  text-transform: uppercase;

  margin-bottom: 0;

  font-weight: 300

}



@media(max-width: 1199px) {

  .counter-media {

    padding: 13px 10px

  }

}



@media(max-width: 991px) {

  .counter-media {

    padding: 10px 20px

  }

}



@media(min-width: 1199px) {

  .testimonial-box-img {

    position: absolute;

    left: 0;

    top: 0;

    right: 0;

    z-index: 1

  }

}



.testimonial-box-img .slick-arrow {

  --icon-size: 60px;

  left: auto;

  right: -1px;

  top: 0;

  transform: none;

  margin: 0;

  opacity: 1;

  visibility: visible;

  background-color: var(--white-color);

  color: var(--theme-color)

}



.testimonial-box-img .slick-arrow:hover {

  background-color: var(--theme-color);

  color: var(--white-color)

}



.testimonial-box-img .slick-arrow.slick-next {

  top: var(--icon-size);

  right: calc(var(--icon-size)*-1);

  bottom: auto;

  left: auto

}



.testimonial-box {

  background-color: var(--white-color);

  text-align: center;

  padding: 78px 40px 80px 40px;

  margin-top: 120px;

  z-index: 2;

  position: relative

}



.testimonial-box .testi-title {

  font-size: 36px;

  margin-bottom: 10px

}



.testimonial-box .quote-icon {

  margin-bottom: 20px

}



.testimonial-box .vs-btn {

  margin-top: 20px;

  border: 2px solid #f4f3f2

}



.testimonial-box .vs-btn i {

  margin-right: 10px

}



.testimonial-box .testi-text {

  max-width: 500px;

  display: inline-block

}



.testi-text-shape {

  font-size: 200px;

  font-family: var(--title-font);

  font-weight: 300;

  color: #f5eee5;

  line-height: 1;

  position: absolute;

  left: 160px;

  bottom: 113px

}



@media(max-width: 1199px) {

  .testimonial-box {

    margin-top: 0;

    padding: 48px 40px 50px 40px

  }



  .testimonial-box .testi-text {

    max-width: 700px

  }



  .testimonial-box .testi-title {

    font-size: 30px

  }

}



@media(max-width: 767px) {

  .testimonial-box {

    padding: 38px 20px 40px 20px

  }



  .testimonial-box .testi-title {

    font-size: 26px

  }



  .testimonial-box .testi-text {

    max-width: 100%;

    margin-bottom: 5px

  }

}







* {

  box-sizing: border-box;

}



body {

  --page-gutter: clamp(1rem, 4vw, 2rem);

  font-family: system-ui, sans-serif;

  line-height: 1.4;

  margin: 0;

}



main {

  inline-size: min(60rem, 100% - var(--page-gutter) * 2);

  margin: 4rem auto;

}



.wrapper {

  display: flex;

  overscroll-behavior-x: contain;

  overflow-x: auto;

  margin-inline: calc(var(--page-gutter) * -1);

  padding-inline: var(--page-gutter);

  padding-block: 1rem;

}



h1 {

  line-height: 1.2;

}



table {

  border-spacing: 0;

  overflow: hidden;

  inline-size: 100%;

  text-align: left;

  background-color: inherit;

  border: 1px solid lightgray;

  border-radius: 0.5rem;

  box-shadow: 0px 4px 6px -2px rgba(14, 30, 37, 0.12);

}



:is(th, td) {

  padding: 1rem;

  min-inline-size: 14rem;

  border-block-end: 1px solid lightgray;

}



tfoot :is(th, td) {

  border-block-end: unset;

}



tfoot tr {

  background-color: whitesmoke;

}



:is(th, td):not(:first-child) {

  border-inline-start: 1px solid lightgray;

  min-inline-size: 8rem;

}



.visually-hidden {

  clip: rect(0 0 0 0);

  clip-path: inset(50%);

  height: 1px;

  overflow: hidden;

  position: absolute;

  white-space: nowrap;

  width: 1px;

}



.find-spa-select-bar{

  position: relative;

  z-index: 9;

}



.select2-search__field {

  height: 30px !important;

}



.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {

  background-color: var(--theme-color);

  color: var(--white-color);

}



.select2-container--default .select2-selection--single,

.select2-dropdown {

  border: none;

  height: 40px;

  box-shadow: 1px 1px rgb(0, 0, 0, 0.1) !important;

}



.select2-container--default .select2-selection--single .select2-selection__arrow{

  height: 40px;

}



.select2-container--default .select2-selection--single .select2-selection__rendered {

  line-height: 2.4;

  color: var(--black-color);

}



.select2-container--default .select2-search--dropdown .select2-search__field {

  border-color: var(--theme-color) !important;

}



#cards-result .service-style5 {

  padding: 10px;

}



.select2-results {

  background-color: var(--white-color);

  box-shadow: 3px 3px 3px rgb(85, 67, 25, 0.5);

}



.select-location{

  font-weight: 500;

  letter-spacing: .22em;

  padding: 12.5px 25px;

  text-transform: uppercase;

  border: 1px solid var(--black-color);

  color: var(--black-color);

  background-color: transparent;

}



.service-style5:hover .select-location{

  border: 1px solid var(--white-color);

  color: var(--white-color);

}



#serviceLocationsButton:hover{

color: var(--theme-color) !important;

}



.service-text,

.testi-text{

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 6;

  -webkit-box-orient: vertical;

}



.testi-text{

  -webkit-line-clamp: 4; 

}



.popular-services .service-text{

  -webkit-line-clamp: 5;

}



.service-style3:hover .service-text,

.service-style5:hover .service-text,

.testi-style3:hover .testi-text{

  overflow: visible !important;

  display: 'block' !important;

  text-overflow: unset !important;

  -webkit-box-orient: unset !important;

}



.main-menu>.tel{

  font-family: var(--body-font) !;

  font-weight: 600;

  font-size: 14px;

  color: var(--title-color);

  text-transform: uppercase

}



.main-menu .tel:hover {

  color: var(--theme-color)

}



@media(min-width: 200px) and (max-width:766px) {

  .service-text,.testi-text{

  overflow: visible !important;

  display: 'block' !important;

  text-overflow: unset !important;

  -webkit-box-orient: unset !important;

}



.d-sm-flex-spa-experience{

  display: flex;

  padding-left: 10px;

}



.d-sm-flex-spa-experience .media-img{

  align-self: center;

  padding: 15px 10px 0 0;

}



.d-sm-flex-spa-experience .media-text{

  text-align: justify;

}



.serenity-heaven .service-style3{

  margin: 5px 30px;

  padding-left: 15px;

  padding-right: 15px;

}



}



.membership-type{

  padding: 75px 50px;

}



.membership-type:hover h2,

.membership-type:hover p{

  color: var(--white-color) !important;

}



.membership-type button{

  color: var(--body-color);

  background-color: var(--theme-color);

  border: none;

}



.membership-type:hover button{

  background-color: var(--white-color);

  border: none !important;

}



.how-does-it-work .sec-title4{

  font-size: 40px;

}



.flow-step{

  padding: 28px 0;

  max-width: 412px;

  max-height: 324px;

}



.how-does-it-work .flow-step{

  border: 2px dotted #9A563A;

  text-align: center;

}



.how-does-it-work .flow-step h2{

  color: #9A563A;

  font-size: 30px;

  font-weight: 600;

}



.how-does-it-work .flow-step h3{

  color: var(--body-color);

  font-weight: 400;

  font-size: 24px;

  line-height: 0.75;

}



.how-does-it-work .flow-step div{

  color: var(--body-color);

  font-size: 18px;

}



.help-sub-container{

  max-width: 850px;

}



.help-sub-container a{

  color: var(--body-color);

}



.help-sub-container h2{

  color: var(--body-color);

}



.help-sub-container p{

  margin-bottom: 6px !important;

}



.whatsapp-btn{

  bottom: 60px;

  position: fixed;

  right: 20px;

  border-radius: 50%;

  z-index: 99;

}



.whatsapp-btn i {

  background-color: #28D146 !important;

  font-size: 28px; 

  cursor: pointer;

}



@media(max-width: 767px) {

  .whatsapp-btn{

    --btn-size: 40px;

    --extra-shape: -4px;

    right: 18px;

    bottom: 70px;

  }

}



@media(max-width: 1920px)and (min-width: 1600px) {



.membership-price-section .slick-current .select-location{

  background-color: var(--white-color) !important;

  color: var(--black-color) !important;

}



.membership-price-section .slick-current .membership-type h2,

.membership-price-section .slick-current .membership-type p{

  color: var(--white-color) !important;

}



}



.membership-type h2{

  font-size: 38px;

}



.gallerybox img {

  width: 100%;

  border: solid #b99450 1px;

  padding: 10px;

  height: 250px;

  object-fit: cover;

}

.gallerybox {

  margin-bottom: 25px;

}