/* VELLURA - Spa and Beauty HTML Template */


/* TABLE OF CONTENT 

1.Main Header style
2.Hidden Sidebar style
3.Hidden info bar style
4.Banner Slider Section
5.Title Box Section
6.Feature list
7.FAQs Section
8.Story Section
9.video Section
10.Menu Section Tab Style
11.Special Offer Section
12.Testimonials Section
13.Reservation Section 
14.Team Section
15.News Section
16.IG post Section
17.blog list page Section
18.Blog Detail Page
19.Main Footer
20.Inner page Banner Section
21.About us page
22.about-intro Section
23.company overview
24.Feature boxes Section
25.Services Section
26.Treatment style 1 Section
27.Gift Voucher
28.Treatment accrodian style 
29.Membership plan with toggle button
30.Service Category
31.Offer banner
32.Testimonials two Section
33.Testimonials page - masonry style
34.Why Us Two Section
35.Image Gallery Section
36.Treatment block style
37.Service details
38.Contact Page
39.Floating Whatsapp button
40.Masonary Gallery
41.hamburger section




*/

/*** 

====================================================================
      Fonts
====================================================================

 ***/


@import url('global.css');
@import url('swiper.css');
@import url('owl.css');
@import url('preloader.css');
@import url('font-awesome.css');
@import url('simple-line-icons.css');
@import url('animate.css');
@import url('jquery-ui.css');
@import url('jquery.fancybox.min.css');
@import url('custom-animate.css');


/*** 

====================================================================

  Main Header style

====================================================================

***/

.main-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  padding: 0;
  background: none;
  min-height: 0;
  z-index: 999;
  transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
}

.fixed-header.header-down {
  top: 0;
}

.fixed-header.header-up {
  top: -175px;
}

.main-header .auto-container {
  max-width: 1850px;
  padding: 0 20px;
}

.header-top {
  position: relative;
  padding-top: 10px;
  padding-bottom: 10px;
  background: none;
  color: #ffffff;
  border-bottom: 1px solid var(--white-color-opacity-four);
  display: none;
}

.header-top .top-left {
  position: relative;
  float: left;
  line-height: 30px;
}

.header-top .top-info {
  position: relative;
}

.header-top .top-info li {
  position: relative;
  float: left;
  margin-right: 70px;
  line-height: 30px;
  color: #ffffff;
  font-size: 14px;
  font-weight: 400;
}

.header-top .top-info li:last-child {
  margin-right: 0;
}

.header-top .top-info li .icon {
  position: relative;
  padding-right: 5px;
}

.header-top .top-info li:after {
  content: '';
  position: absolute;
  left: 100%;
  margin-left: 30px;
  top: 50%;
  margin-top: -4px;
  height: 8px;
  width: 8px;
  border: 1px solid var(--main-color);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.header-top .top-info li:last-child:after {
  display: none;
}

.header-top .top-info li a {
  position: relative;
  display: block;
  line-height: 30px;
  color: #ffffff;
  transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
}

.header-top .top-info li a:hover {
  color: var(--main-color);
}

.header-top .top-right {
  position: relative;
  float: right;
  line-height: 30px;
}

.main-header .header-upper {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  background: none;
  padding: 0 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.0);
  transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
}

.fixed-header .header-upper {
  position: relative;
  /*top: 0;*/
  /*background: #202020;
  border-bottom-color: rgba(0,0,0,0.15);*/
  backdrop-filter: blur(9px);
  background-color: rgba(252, 250, 242, 0.8);
}

.header-two.fixed-header .header-upper {
  background: #ffffff;
}

.main-header ul,
.main-header ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-header .main-box {
  position: relative;
  padding: 0px;
}

.main-header .main-box .logo-box {
  position: relative;
  display: block;
  float: left;
  padding: 24px 0px;
  transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  z-index: 5;
}


.fixed-header .main-box .logo-box {
  padding: 20px 0px;
}

.fixed-header .main-menu .navigation>li {
  padding: 10px 0px;
}

.main-header.fixed-header .main-menu .navigation>li>ul {
  top: 134%;
}

.main-header.fixed-header .header-upper .links-box {
  padding: 15px 0px;
}

.main-header .main-box .logo-box .logo {
  position: relative;
  display: block;
}

.main-header .main-box .logo-box .logo img {
  position: relative;
  display: block;
  height: 83px;
  z-index: 1;
}

/* ==========================================
   1280 x 800 Laptop View
========================================== */
@media only screen and (min-width:1200px) and (max-width:1366px) {

  .main-header .auto-container {
    max-width: 100%;
    padding: 0 25px;
  }

  .main-header .main-box .logo-box {
    padding: 1px 0;
  }

  .main-header .main-box .logo-box .logo img {
    height: 68px;
    margin-top: 30px;
    width: auto;
  }

  .main-header .header-upper .links-box {
    padding: 22px 0;
    margin-left: 30px;
  }

  .main-header .header-upper .links-box .link {
    margin-left: 18px;
  }

  .main-menu .navigation>li {
    margin-left: 24px;
    padding: 22px 0;
  }

  .main-menu .navigation>li:first-child {
    margin-left: 0;
  }

  .main-menu .navigation>li>a {
    font-size: 15px;
    padding: 12px 0;
  }

  .main-header .nav-toggler {
    margin-top: 22px;
  }

  .banner-section {
    padding-top: 125px;
  }

}

/* @media only screen and (min-width:1200px) and (max-width:1366px) {

  .main-header .main-box {
    display: flex;
    align-items: center;
  }

  .main-header .main-box .logo-box {
    display: flex;
    align-items: center;
    padding: 0;
    height: 100%;
  }

  .main-header .main-box .logo-box .logo {
    display: flex;
    align-items: center;
  }

  .main-header .main-box .logo-box .logo img {
    height: 68px;
    width: auto;
    margin-top: 0;
  }

} */

.main-header .nav-box {
  position: static;
  float: right;
}

.main-header .header-upper .links-box {
  position: relative;
  float: left;
  padding-top: 16px;
  padding-bottom: 4px;
  margin-left: 150px;
}

.main-header .header-upper .links-box .link {
  position: relative;
  float: left;
  margin-left: 50px;
}

.main-header .header-upper .links-box .link:first-child {
  margin-left: 0;
}

.main-header .info-btn {
  position: relative;
  cursor: pointer;
  background: none;
  font-size: 16px;
  color: var(--white-color);
  padding-top: 15px;
  line-height: 34px;
}

.main-header .info-btn img {
  height: 20px;
}

.main-header .nav-toggler {
  position: relative;
  float: left;
  left: 0;
  top: 0;
  padding: 0;
  margin-top: 40px;
  margin-left: 20px;
  display: none;
}

.fixed-header .nav-toggler {
  margin-top: 18px;
}

.main-header .nav-toggler button {
  position: relative;
  width: 30px;
  height: 40px;
  line-height: 40px;
  background: none;
  color: #e1e1e1;
  font-size: 16px;
  margin: 0px;
  border-radius: 0px;
  outline: none !important;
}

.main-header .nav-toggler button img {
  position: relative;
  display: inline-block;
  vertical-align: middle;
}

.main-header .nav-outer {
  position: static;
  float: left;
}

.main-menu {
  position: static;
  display: block;
  padding: 0px 0px;
}

.main-menu .navbar-collapse {
  padding: 0px;
  margin: 0px;
  border: none;
  box-shadow: none;
}

.main-menu .navigation {
  position: static;
  z-index: 1;
}

.main-menu .navigation>li {
  position: static;
  display: block;
  float: left;
  padding: 7px 0px;
  margin-left: 50px;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.main-menu .navigation>li>a {
  position: relative;
  display: block;
  font-size: 16px;
  color: var(--black-color);
  padding-top: 20px;
  padding-bottom: 20px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: normal;
  text-transform: capitalize;
  opacity: 1;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}






.main-menu .navigation>li.dropdown {
  position: relative;
}

.main-menu .navigation>li.dropdown.has-mega-menu {
  position: static;
}

.main-menu .navigation>li.dropdown>a {
  padding-right: 20px;
}

.main-menu .navigation>li.dropdown>a:after {
  font-family: 'Font Awesome 6 Pro';
  content: "\f107";
  position: absolute;
  right: 0px;
  top: 18px;
  display: block;
  line-height: 30px;
  font-size: 12px;
  font-weight: 400;
  z-index: 5;
}

.main-menu .navigation>li>a:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 15px;
  display: block;
  height: 5px;
  border-top: 1px solid var(--main-color);
  -ms-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.main-menu .navigation>li.dropdown>a:before {
  right: 20px;
}

.main-menu .navigation>li:hover>a:before,
.main-menu .navigation>li.current>a:before,
.main-menu .navigation>li.current-menu-item>a:before {
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

.main-menu .navigation>li:hover>a,
.main-menu .navigation>li.current>a,
.main-menu .navigation>li.current-menu-item>a {
  color: var(--main-color);
  text-decoration: none;
  opacity: 1;
}

.main-menu .navigation>li>ul {
  position: absolute;
  left: -35px;
  top: 100%;
  width: 310px;
  padding-top: 30px;
  padding-bottom: 30px;
  z-index: 100;
  opacity: 1;
  text-align: left;
  background: var(--main-color);
  border: none;
  border-radius: 0;
  -webkit-box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.03), -2px 0px 10px 1px rgba(0, 0, 0, 0.03);
  -ms-box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.03), -2px 0px 10px 1px rgba(0, 0, 0, 0.03);
  -o-box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.03), -2px 0px 10px 1px rgba(0, 0, 0, 0.03);
  -moz-box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.03), -2px 0px 10px 1px rgba(0, 0, 0, 0.03);
  box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.03), -2px 0px 10px 1px rgba(0, 0, 0, 0.03);
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  -moz-transition: all 100ms ease;
  -webkit-transition: all 100ms ease;
  -ms-transition: all 100ms ease;
  -o-transition: all 100ms ease;
  transition: all 100ms ease;
}

.main-menu .navigation>li.dropdown.has-mega-menu>ul {
  left: 0;
  width: 100%;
  padding-top: 55px;
  padding-bottom: 20px;
}

.main-menu .navigation>li.dropdown.has-mega-menu>ul .auto-container {
  max-width: 1200px;
}

.main-menu .navigation>li .mega-menu {
  position: relative;
}

.main-menu .navigation>li.dropdown.has-mega-menu>ul:before {
  content: '';
  position: absolute;
  top: 0;
  right: 100%;
  width: 2000px;
  height: 100%;
  background: var(--main-color);
}

.main-menu .navigation>li.dropdown.has-mega-menu>ul:after {
  content: '';
  position: absolute;
  top: 0;
  left: 100%;
  width: 2000px;
  height: 100%;
  background: var(--main-color);
}

.main-menu .navigation>li .mega-menu .menu-inner {
  position: relative;
}

.main-menu .navigation>li .mega-menu .row {
  margin: 0 -25px;
}

.main-menu .navigation>li .mega-menu .menu-block {
  position: relative;
  padding: 0 25px;
  margin-bottom: 30px;
  text-align: center;
}

.main-menu .navigation>li .mega-menu .menu-block .image {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid transparent;
  margin-bottom: 15px;
  overflow: hidden;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.main-menu .navigation>li .mega-menu .menu-block:hover .image {
  border-color: var(--main-color);
  border-radius: 8px;
}

.main-menu .navigation>li .mega-menu .menu-block .image img {
  display: block;
  width: 100%;
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.main-menu .navigation>li .mega-menu .menu-block:hover .image img {
  transform: scale(1.05);
  border-radius: 8px;
}

.main-menu .navigation>li .mega-menu .menu-block .title {
  position: relative;
  display: block;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.main-menu .navigation>li .mega-menu .menu-block .title a {
  position: relative;
  color: var(--white-color);
  -webkit-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.main-menu .navigation>li .mega-menu .menu-block:hover .title a {
  color: var(--white-color);
}

.main-menu .navigation>li>ul>li {
  position: relative;
  margin-bottom: 10px;
}

.main-menu .navigation>li>ul>li:last-child {
  margin-bottom: 0;
}

.main-menu .navigation>li>ul>li>a {
  position: relative;
  display: block;
  padding-left: 35px;
  padding-right: 35px;
  font-size: 17px;
  line-height: 30px;
  font-weight: normal;
  color: var(--white-color);
  text-transform: capitalize;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
  letter-spacing: normal;
}

.main-menu .navigation>li>ul>li.dropdown>a:after {
  font-family: 'Font Awesome 6 Pro';
  content: "\f105";
  position: absolute;
  right: 30px;
  top: 0px;
  display: block;
  line-height: 30px;
  font-size: 12px;
  font-weight: 400;
  z-index: 5;
}

.main-menu .navigation>li>ul>li>a:before {
  content: '';
  position: absolute;
  left: 35px;
  top: 50%;
  margin-top: -4px;
  height: 8px;
  width: 8px;
  border-radius: 100px;
  background-color: var(--white-color);
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  visibility: hidden;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.main-menu .navigation>li>ul>li:hover>a:before,
.main-menu .navigation>li>ul>li.current>a:before {
  opacity: 1;
  visibility: visible;
}

.main-menu .navigation>li>ul>li:hover>a,
.main-menu .navigation>li>ul>li.current>a {
  color: var(--white-color);
  padding-left: 55px;
}


.main-menu .navigation>li.dropdown:hover>ul {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  transform: translateY(-30px);
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.main-menu .navigation>li>ul>li>ul {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 2px;
  width: 280px;
  padding-top: 30px;
  padding-bottom: 30px;
  z-index: 100;
  opacity: 1;
  text-align: left;
  background: var(--main-color);
  border: none;
  border-radius: 0;
  -webkit-box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.03), -2px 0px 10px 1px rgba(0, 0, 0, 0.03);
  -ms-box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.03), -2px 0px 10px 1px rgba(0, 0, 0, 0.03);
  -o-box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.03), -2px 0px 10px 1px rgba(0, 0, 0, 0.03);
  -moz-box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.03), -2px 0px 10px 1px rgba(0, 0, 0, 0.03);
  box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.03), -2px 0px 10px 1px rgba(0, 0, 0, 0.03);
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  -moz-transition: all 100ms ease;
  -webkit-transition: all 100ms ease;
  -ms-transition: all 100ms ease;
  -o-transition: all 100ms ease;
  transition: all 100ms ease;
}

.main-menu .navigation>li>ul>li>ul:before {
  content: '';
  position: absolute;
  left: -2px;
  top: 0;
  width: 2px;
  height: 100%;
}

.main-menu .navigation>li>ul>li>ul>li {
  position: relative;
  margin-bottom: 10px;
}

.main-menu .navigation>li>ul>li>ul>li:last-child {
  margin-bottom: 0;
}

.main-menu .navigation>li>ul>li>ul>li>a {
  position: relative;
  display: block;
  padding-left: 35px;
  padding-right: 35px;
  font-size: 16px;
  line-height: 30px;
  font-weight: 400;
  color: var(--white-color);
  text-transform: capitalize;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
}

.main-menu .navigation>li>ul>li>ul>li>a:before {
  content: '';
  position: absolute;
  left: 35px;
  top: 50%;
  margin-top: -4px;
  height: 8px;
  width: 8px;
  background-color: var(--white-color);
  opacity: 0;
  visibility: hidden;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  transition: all 300ms ease;
  border-radius: 100px;
}

.main-menu .navigation>li>ul>li>ul>li:hover>a:before,
.main-menu .navigation>li>ul>li>ul>li.current>a:before {
  opacity: 1;
  visibility: visible;
}

.main-menu .navigation>li>ul>li>ul>li.dropdown>a:after {
  font-family: 'Font Awesome 6 Pro';
  content: "\f105";
  position: absolute;
  right: 30px;
  top: 0px;
  display: block;
  line-height: 30px;
  font-size: 12px;
  font-weight: 400;
  z-index: 5;
}

.main-menu .navigation>li>ul>li>ul>li:hover>a,
.main-menu .navigation>li>ul>li>ul>li.current>a {
  color: var(--white-color);
  padding-left: 55px;
}

.main-menu .navigation>li>ul>li.dropdown:hover>ul {
  visibility: visible;
  opacity: 1;
  top: 0;
  -webkit-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  transform: translateY(-30px);
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

/*** 

====================================================================
  Hidden Sidebar style
====================================================================

***/

body.visible-sidebar {
  overflow-y: hidden;
}

.menu-backdrop {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9990;
  background: var(--black-color-opacity);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
}

.visible-sidebar .menu-backdrop {
  opacity: 1;
  visibility: visible;
}

.hidden-bar {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: 360px;
  background: var(--main-color);
  height: 100%;
  overflow-y: auto;
  z-index: 9999;
  visibility: hidden;
  -ms-transform: translateX(-400px);
  transform: translateX(-400px);
  transition: all 500ms ease-in;
  -webkit-transition: all 500ms ease-in-out;
  -ms-transition: all 500ms ease-in-out;
  -o-transition: all 500ms ease-in-out;
  -moz-transition: all 500ms ease-in-out;
}

.hidden-bar.visible-sidebar {
  opacity: 1;
  visibility: visible;
  -ms-transform: translateX(0px);
  transform: translateX(0px);
}

.hidden-bar ol,
.hidden-bar ol li,
.hidden-bar ul,
.hidden-bar ul li {
  list-style-type: none;
  margin: 0px;
}

.hidden-bar .inner-box {
  position: relative;
  background-color: var(--main-color);
  padding-top: 17px;
  padding-bottom: 50px;
}

.hidden-bar .inner-box .cross-icon {
  position: absolute;
  right: 30px;
  top: 30px;
  cursor: pointer;
  color: var(--white-color);
  font-size: 14px;
  width: 26px;
  height: 26px;
  line-height: 24px;
  text-align: center;
  border: 1px solid var(--white-color);
  border-radius: 50%;
}

.hidden-bar .inner-box .cross-icon:hover {
  color: var(--white-color);
  border-color: var(--white-color);
}

.hidden-bar .inner-box .logo-box {
  position: relative;
  line-height: 50px;
  margin-bottom: 60px;
  padding-left: 30px;
  padding-right: 30px;
  text-align: left;
}

.hidden-bar .inner-box .logo-box img {
  position: relative;
  max-height: 25px;
}

.hidden-bar h5 {
  position: relative;
  text-transform: capitalize;
  margin-bottom: 15px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hidden-bar h5::before,
.hidden-bar h5::after {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../images/icons/star-element.svg);
  background-size: contain;
  background-repeat: no-repeat;
  display: inline-block;
}

.hidden-bar .info {
  position: relative;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}

.hidden-bar .info li {
  position: relative;
  line-height: 1.6em;
  color: var(--main-color);
  margin-bottom: 10px;
}

.hidden-bar .info li:last-child {
  margin-bottom: 0;
}

.hidden-bar .info li a {
  color: var(--main-color);
}

.hidden-bar .info li a:hover {
  color: var(--main-color);
}

.hidden-bar .separator {
  position: relative;
  margin-top: 30px;
  margin-bottom: 30px;
}

.hidden-bar .separator span {
  position: relative;
  display: block;
  height: 8px;
  width: 8px;
  border: 1px solid var(--main-color);
  margin: 0 auto;
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hidden-bar .booking-info {
  position: relative;
  text-align: center;
  padding-left: 20px;
  padding-right: 20px;
}

.hidden-bar .booking-info .bk-title {
  position: relative;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 5px;
}

.hidden-bar .booking-info .bk-no {
  position: relative;
  font-size: 30px;
  color: var(--main-color);
  line-height: 1em;
}

.hidden-bar .booking-info .bk-no a {
  position: relative;
  display: inline-block;
  color: var(--main-color);
}

.hidden-bar .booking-info .bk-no a:before {
  position: absolute;
  content: '';
  left: 5px;
  right: 5px;
  bottom: -7px;
  height: 5px;
  opacity: 0;
  transform: scale(0.2, 1);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  border-top: 1px solid var(--main-color);
  border-bottom: 1px solid var(--main-color);
}

.hidden-bar .booking-info .bk-no a:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.hidden-bar .side-menu {
  position: relative;
  display: block;
  padding-left: 30px;
  padding-right: 60px;
  margin-bottom: 100px;
}

.hidden-bar .side-menu ul {
  position: relative;
  border-top: 1px solid var(--white-color-opacity-four);
}

.hidden-bar .side-menu ul li {
  position: relative;
  display: block;
  border-bottom: 1px solid var(--white-color-opacity-four);
}

.hidden-bar .side-menu ul li a {
  position: relative;
  color: var(--white-color);
  display: block;
  font-weight: 400;
  font-size: 18px;
  line-height: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}

.hidden-bar .side-menu ul li:hover>a,
.hidden-bar .side-menu ul>li.current>a,
.hidden-bar .side-menu ul>li>ul>li.current>a {
  color: var(--white-color);
}

.hidden-bar .side-menu ul li:hover>a,
.hidden-bar .side-menu ul li.current>a {
  color: var(--white-color);
}

.hidden-bar .side-menu ul li ul li:last-child {
  border-bottom: none;
}

.hidden-bar .side-menu .dropdown ul li a {
  color: var(--white-color-opacity-two);
  font-size: 16px;
}

.hidden-bar .side-menu ul li .btn-expander {
  position: absolute;
  top: 10px;
  right: 0px;
  background: none;
  color: var(--white-color);
  font-size: 12px;
  height: 30px;
  width: 30px;
  text-align: right;
  line-height: 30px;
  border-radius: 0px;
  outline: none;
  cursor: pointer;
  z-index: 1;
}

.hidden-bar .side-menu ul li .btn-expander i {
  font-weight: 700;
}


/*** 

====================================================================
  Hidden info bar style
====================================================================

***/

.info-bar {
  position: fixed;
  right: -440px;
  top: 0px;
  width: 100%;
  max-width: 440px;
  height: 100%;
  overflow-y: auto;
  z-index: 99999;
  opacity: 0;
  background: var(--main-color);
  visibility: hidden;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  color: var(--white-color);
}

.info-back-drop {
  position: fixed;
  right: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: var(--black-color-opacity-two);
  visibility: hidden;
  z-index: 9990;
  transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -webkit-transition: all 0.5s ease;
  -ms-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
}

.side-content-visible .info-back-drop {
  opacity: 1;
  visibility: visible;
}

.side-content-visible .info-bar {
  right: 0px;
  opacity: 1;
  visibility: visible;
}

.info-bar .inner-box {
  position: relative;
  background: var(--main-color);
  padding-top: 100px;
  padding-bottom: 50px;
  padding-left: 70px;
  padding-right: 70px;
  text-align: left;
}

.info-bar .inner-box .cross-icon {
  position: absolute;
  right: 30px;
  top: 30px;
  cursor: pointer;
  color: var(--white-color);
  font-size: 14px;
  width: 26px;
  height: 26px;
  line-height: 24px;
  text-align: center;
  border: 1px solid var(--white-color);
  border-radius: 50%;
}

.info-bar .inner-box .cross-icon:hover {
  color: var(--white-color);
  border-color: var(--white-color);
}

.info-bar .inner-box .logo-box {
  position: relative;
  line-height: 50px;
  margin-bottom: 35px;
}

.info-bar .inner-box .logo-box img {
  position: relative;
  max-height: 50px;
}

.info-bar .data-box {
  padding: 40px 0;
  margin-top: 40px;
  border-top: solid 1px var(--white-color-opacity-three);
}

.info-bar .info {
  padding-bottom: 30px;
}

.info-bar .info .ib-ttl {
  padding-bottom: 15px;
  font-size: 20px;
}

.info-bar .info .ib-ttl i {
  margin-right: 5px;
}

.info-bar .info p {
  color: var(--white-color-opacity-two);
  padding-left: 28px;
}

.info-bar .info p a {
  color: var(--white-color-opacity-two);
  padding-left: 6px;
  line-height: 1.8em;
  position: relative;
  text-decoration: none;
}

/* Hidden underline (start) */
.info-bar .info p a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  /* sits exactly under the text */
  width: 0;
  height: 1px;
  background-color: var(--white-color);
  transition: width 0.3s ease;
  margin-left: 6px;
}

/* Full underline on hover */
.info-bar .info p a:hover::after {
  width: 100%;
}

.info-bar .booking-info {
  position: relative;
}

.info-bar .booking-info .bk-no {
  position: relative;
  color: var(--main-color);
  line-height: 1em;
}

.info-bar .booking-info .bk-no a {
  position: relative;
  display: inline-block;
  color: var(--main-color);
}

.info-bar .booking-info .bk-no a:before {
  position: absolute;
  content: '';
  left: 5px;
  right: 5px;
  bottom: -8px;
  height: 5px;
  opacity: 0;
  transform: scale(0.2, 1);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  border-top: 1px solid var(--main-color);
}

.info-bar .booking-info .bk-no a:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}


/*** 

====================================================================
  Banner Slider Section
====================================================================

***/

.banner-section {
  position: relative;
  padding: 90px 0px 0px 0px;
}


.banner-section.banner-section .banner-container {
  position: relative;
}

.banner-section .banner-slider {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.banner-section .slide-item {
  position: relative;
  width: 100%;
  padding: 0px;
  overflow: hidden;
  border-radius: 8px;
}

.banner-section .slide-item:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.0);
  z-index: 1;
}

.banner-section .slide-item .image-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  -ms-transform: scale(1.0);
  transform: scale(1.0);
  -webkit-transition: all 0ms linear 0ms;
  -ms-transition: all 0ms linear 0ms;
  -o-transition: all 0ms linear 0ms;
  -moz-transition: all 0ms linear 0ms;
  transition: all 0ms linear 0ms;
}

.banner-section .slide-item.swiper-slide-active .image-layer {
  -ms-transform: scale(1.15);
  transform: scale(1.15);
  -webkit-transition: all 7000ms linear 0ms;
  -ms-transition: all 7000ms linear 0ms;
  -o-transition: all 7000ms linear 0ms;
  -moz-transition: all 7000ms linear 0ms;
  transition: all 7000ms linear 0ms;
}

.banner-section .slide-item .image-layer:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.banner-section .slide-item .content-box {
  position: relative;
  display: table;
  vertical-align: middle;
  width: 100%;
  /*padding-top: 30px;
  padding-bottom: 50px;*/
  height: 750px;
  /*min-height: 100vh;*/
  z-index: 10;
}

.banner-section .slide-item .content {
  position: relative;
  display: table-cell;
  width: 100%;
  vertical-align: middle;
  z-index: 5;
}

.banner-section .slide-item .inner {
  position: relative;
  display: block;
  max-width: 950px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  z-index: 5;
}

.banner-section .slide-item .subtitle {
  position: relative;
  color: var(--white-color);
  font-size: 16px;
  margin-top: 120px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
}


.banner-section .swiper-slide-active .subtitle,
.banner-section .swiper-slide-active .pattern-image {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
  -webkit-transition: all 1000ms ease 2000ms;
  -ms-transition: all 1000ms ease 2000ms;
  -o-transition: all 1000ms ease 2000ms;
  -moz-transition: all 1000ms ease 2000ms;
  transition: all 1000ms ease 2000ms;
}


.banner-section .slide-item h1 {
  position: relative;
  font-size: 50px;
  font-weight: normal;
  color: var(--white-color);
  text-transform: uppercase;
  line-height: 1.0em;
  margin: 0px 0px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
  text-shadow:
    0.4px 0 var(--white-color),
    -0.4px 0 var(--white-color),
    0 0.4px var(--white-color),
    0 -0.4px var(--white-color);
}

.banner-section .slide-item h1 span {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.banner-section .swiper-slide-active h1 {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
  -webkit-transition: all 1000ms ease 1000ms;
  -ms-transition: all 1000ms ease 1000ms;
  -o-transition: all 1000ms ease 1000ms;
  -moz-transition: all 1000ms ease 1000ms;
  transition: all 1000ms ease 1000ms;
}

.banner-section .slide-item .text {
  position: relative;
  display: block;
  font-size: 20px;
  margin-top: 20px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
}

.banner-section .swiper-slide-active .text {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
  -webkit-transition: all 1000ms ease 1500ms;
  -ms-transition: all 1000ms ease 1500ms;
  -o-transition: all 1000ms ease 1500ms;
  -moz-transition: all 1000ms ease 1500ms;
  transition: all 1000ms ease 1500ms;
  color: var(--white-color);
}

.banner-section .slide-item .links-box {
  position: relative;
  display: block;
  padding-top: 30px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(30px);
  -ms-transform: translateY(30px);
  transform: translateY(30px);
}

.banner-section .swiper-slide-active .links-box {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translate(0);
  -ms-transform: translate(0);
  transform: translate(0);
  -webkit-transition: all 1000ms ease 2000ms;
  -ms-transition: all 1000ms ease 2000ms;
  -o-transition: all 1000ms ease 2000ms;
  -moz-transition: all 1000ms ease 2000ms;
  transition: all 1000ms ease 2000ms;
}

.banner-section .slide-item .links-box .link {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

.banner-section .slide-item .links-box .link .theme-btn {}

.banner-section .swiper-button-next,
.banner-section .swiper-button-prev {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  display: inline-block;
  vertical-align: top;
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 24px;
  text-align: center;
  background: transparent;
  color: var(--white-color);
  border-radius: 0%;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

.banner-section .swiper-button-next span,
.banner-section .swiper-button-prev span {
  position: relative;
  z-index: 1;
}

.banner-section .swiper-button-next:after,
.banner-section .swiper-button-prev:after {
  display: none;
}

.banner-section .swiper-button-next:before,
.banner-section .swiper-button-prev:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--white-color-opacity-three);
  border-radius: 100px;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

.banner-section .swiper-button-next {
  right: 30px;
}

.banner-section .swiper-button-prev {
  left: 30px;
}

.banner-section .swiper-button-next:hover,
.banner-section .swiper-button-prev:hover {
  color: var(--white-color);

}

.banner-section .swiper-button-next:hover:before,
.banner-section .swiper-button-prev:hover:before {
  background: var(--main-color);
}


/* explore menu badge */
.banner-section .explore-menu-btn {
  position: absolute;
  right: 0;
  left: 0;
  margin: 0 auto;
  bottom: 0px;
  width: 117px;
  /* full badge size */
  height: 170px;
  z-index: 10;
  /*display: flex;*/
  display: none;
  align-items: center;
  justify-content: center;
  background: url(../images/resource/menu-badge.png) no-repeat center center;
  background-size: contain;
  text-decoration: none;
  /* remove underline if any */
}

.banner-section .explore-menu-btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 40px;
  z-index: 1;
}

.banner-section .explore-menu-btn .icon img {
  max-width: 100%;
  max-height: 100%;
  display: block;
  animation: bounce-down-delay 3s infinite ease-in-out;
}


@keyframes bounce-down-delay {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  10% {
    transform: translateY(10px);
    opacity: 0.6;
  }

  20% {
    transform: translateY(0);
    opacity: 1;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}



/* Parent container to position it inside the banner */
.banner-section .banner-social-list {
  position: absolute;
  left: 30px;
  /* adjust as needed */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  /* stack vertically */
  align-items: center;
  gap: 10px;
  z-index: 10;
  display: none;
}

/* Top and bottom vertical lines */
.banner-social-list .line {
  width: 1px;
  height: 25px;
  background-color: var(--white-color-opacity-three);
}

/* Vertical list */
.banner-social-list .custom-ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 25px;
}

.banner-social-list .custom-ul li {
  position: relative;
  font-size: 14px;
  color: var(--white-color);
  padding: 0 5px;
  transform: rotate(-90deg);
  transform-origin: center center;
}

.banner-social-list .custom-ul li a {
  color: var(--white-color);
}

.banner-social-list .custom-ul li a:hover {
  color: var(--white-color);
}


/* Add star only to non-last items */
.banner-social-list .custom-ul li:not(:first-child)::after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background-color: var(--white-color-opacity-three);
  position: absolute;
  right: -22px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 100px;
}


/* Container positioning */
.banner-section .banner-call {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 90px;
  /* space between lines and text */
  z-index: 10;
  display: none;
}

/* Lines (above and below text) */
.banner-call .line {
  width: 1px;
  height: 25px;
  background-color: var(--white-color-opacity-three);
}

/* List styling */
.banner-call .call-ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.banner-call .call-ul li {
  transform: rotate(-90deg);
  transform-origin: center center;
  white-space: nowrap;
  /* prevent wrapping */
  text-transform: uppercase;
  letter-spacing: 1px;
}

.banner-call .call-ul li a {
  font-size: 14px;
  color: var(--white-color);
  text-decoration: none;
}

.banner-call .call-ul li a:hover {
  color: var(--white-color);
}



/* banner contact info text */
.banner-info {
  position: absolute;
  bottom: 30px;
  z-index: 100;
  width: 100%;
  display: none;
}

.banner-info .cinfo-box {
  position: relative;
  color: var(--white-color);
  text-align: center;
}

.banner-info .cinfo-box .cinfo-ttl {
  font-family: var(--font-family-Italiana);
  font-size: 22px;
}

.banner-info .cinfo-box p {
  font-family: var(--font-family-jost);
  font-size: 16px;
  padding-top: 10px;
  margin: 0;
}

.banner-info .cinfo-box p a {
  color: var(--white-color);
}

.banner-info .cinfo-box p a {
  display: inline-block;
  vertical-align: top;
  color: var(--white-color);
  line-height: 1.5em;
  padding-bottom: 2px;
}


/* on hover underline animation */

.banner-info .cinfo-box p a:before {
  position: absolute;
  content: '';
  left: 3px;
  right: 3px;
  bottom: 0px;
  height: 4px;
  opacity: 0;
  transform: scale(0.2, 1);
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  border-bottom: 1px solid var(--white-color);
}

.banner-info .cinfo-box p a:hover::before {
  opacity: 1;
  transform: scale(1, 1);
}

.banner-info .cinfo-box p a:hover {
  color: var(--white-color);
  border-color: var(--white-color);
}

/*  */

.banner-info .cinfo-box.middle {
  position: relative;
}

.banner-info .cinfo-box.middle::before,
.banner-info .cinfo-box.middle::after {
  content: "";
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
  background-color: var(--white-color-opacity-three);
}

.banner-info .cinfo-box.middle::before {
  left: 0;
}

.banner-info .cinfo-box.middle::after {
  right: 0;
}


/*** 

====================================================================
  Title Box Section
====================================================================

***/

.title-box {
  position: relative;
  padding-bottom: 40px;
  max-width: 800px;
}

.title-box.centered {
  margin: 0 auto;
  text-align: center;
}

.title-box p {
  padding-top: 20px;
}

.title-box .subtitle {
  position: relative;
  display: inline-flex;
  /* Make it inline so it wraps only around content */
  align-items: center;
  /* Vertically center the SVGs and text */
  text-transform: uppercase;
  font-weight: 500;
  color: var(--white-color);
  font-size: 14px;
  letter-spacing: 0.10em;
  line-height: 1em;
  margin-bottom: 10px;
  background-color: var(--main-color);
  border-radius: 100px;
  padding: 5px 13px;
}

/* white subtitle */
.title-box .subtitle.white {
  color: var(--main-color);
  background-color: var(--white-color);
}

.title-box .title-badge {
  width: 205px;
  margin: 0 auto;
  text-align: center;
  padding: 0 0 10px 0;
}


.title-box h2 {
  position: relative;
  margin-bottom: 0;
}

.title-box h3 {
  position: relative;
  margin-bottom: 0;
}

.title-box .text {
  position: relative;
  line-height: 1.85em;
}

.title-box.centered .text {
  max-width: 420px;
  margin: 0 auto;
}

.title-box.centered .heading-element {
  text-align: center;
  display: flex;
  margin: 0 auto;
  padding-bottom: 25px;
}


/*** 

====================================================================
  Feature list
====================================================================

***/

.feature-info {
  position: relative;
  padding: 60px 0;
  border-bottom: solid 1px var(--black-color-opacity-four);
}

.feature-info-box {
  position: relative;
  width: 100%;
}

/* Add vertical line after 1st, 2nd, and 3rd boxes */
.feature-info-box:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: var(--black-color-opacity-four);
}

.feature-info .feature-info-box .data {
  display: flex;
  align-items: center;
  text-align: left;
}

.feature-info .feature-info-box .data h5 {
  color: var(--main-color);
  text-align: left;
  padding-left: 15px;
}

.feature-info-box img {
  transition: transform 0.5s ease;
}

.feature-info-box:hover img {
  transform: scaleX(-1);
}



/*** 

====================================================================
  home about Section
====================================================================

***/
.about-section {
  position: relative;

}

.about-section .title-box {
  max-width: 1050px;
}

.about-section .text-col .text {
  text-align: center;
  padding: 0 100px 40px 100px;
}

.about-section .lower-link-box {
  margin-bottom: 80px;
}

.about-section .floating-images {
  position: relative;
  width: 100%;
  height: 200px;
  /* adjust as needed */
  /*top: -350px;*/
}

.about-section .floating-images>div {
  position: absolute;
}

.about-section .abt-image1 {
  top: -300px;
  left: 50px;
}

.about-section .abt-image1 img {
  rotate: -10deg;
}

.about-section .abt-image2 {
  top: 0;
  left: 50%;
  transform: translateX(-50%) !important;
}

.about-section .abt-image2 img {
  width: 330px;
}

.about-section .abt-image3 {
  top: -500px;
  right: 0;
}

.about-section .abt-image3 img {
  rotate: 5deg;
}

.about-section .abt-image4 {
  top: -600px;
  left: 150px;
}

.about-section .floating-images img {
  /*width: 280px; /* or any size that works visually */
  height: auto;
  display: block;
}


.about-section .booking-info {
  position: relative;
  display: flex;
  padding-bottom: 100px;
  gap: 30px;
  justify-content: center;
}

.about-section .booking-info .bk-title {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: -5px;
  color: var(--white-color);
}

.about-section .booking-info .bk-title .call-icon {
  transform: rotate(-45deg);
}

.about-section .booking-info .bk-title i {
  font-size: 35px;
  color: var(--main-color);
}

.about-section .booking-info .bk-no {
  color: var(--main-color);
  line-height: 1.5em;
  padding-left: 15px;
  position: relative;
  text-decoration: none;
  text-align: left;
}

.about-section .booking-info .bk-no a {
  color: var(--main-color);
  padding-bottom: 5px;
}

/* underline animation */
.about-section .booking-info .bk-no::after {
  content: "";
  position: absolute;
  left: 15px;
  /* aligns under phone number text */
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--main-color);
  transition: width 0.4s ease;
}

/* show underline on hover */
.about-section .booking-info .bk-no:hover::after {
  width: calc(100% - 15px);
}

/*** 

====================================================================
  FAQs Section
====================================================================

***/
.faq_section .title-box p {
  padding-bottom: 20px;
}

.faq_section .accordion {
  margin-bottom: -20px;
}

.faq_section .card {
  background-color: inherit;
  border: none;
  border-top: solid 1px var(--black-color-opacity-four);
  border-bottom: solid 1px var(--black-color-opacity-four);
}

.faq_section .card .card-header {
  padding: 25px 0;
  border: 0;
}

.card-header {
  background-color: inherit;
}

.faq_section .card .card-header button {
  width: 100%;
  text-align: left;
  color: var(--main-color);
  text-decoration: none;
  padding: 0;
  font-weight: 500;
  position: relative;
  padding-right: 50px;
  font-size: 21px;
}

.faq_section .card .card-header button.collapsed {
  color: var(--black-color);
}

.faq_section .card .card-header i {
  color: var(--main-color);
  font-size: 21px;
}

.faq_section .card .card-header button:focus {
  outline: none;
  box-shadow: none;
}

.faq_section .card .card-header button .icons i {
  position: absolute;
  right: 0;
  top: 4px;
  color: var(--text-color-light);
}

.faq_section .card .card-header button.collapsed .icons .fa-minus,
.faq_section .card .card-header button .icons .fa-plus {
  display: none;
}

.faq_section .card .card-header button .icons .fa-minus,
.faq_section .card .card-header button.collapsed .icons .fa-plus {
  display: block;
}

.faq_section .card .card-body {
  padding-top: 0;
  padding-left: 0;
}




/*** 

====================================================================
  Story Section
====================================================================

***/

.story-section {
  position: relative;
  background-color: var(--main-color);
}

.story-section .title-box {
  max-width: 1050px;
  margin-bottom: 10px;
}


.story-section .text-col {
  position: relative;
  z-index: 1000;
}

.story-section .text-col .inner {
  position: relative;
  display: block;
  padding-right: 90px;
  text-align: left;
}

.story-section .booking-info {
  position: relative;
  display: flex;
  padding-top: 30px;
}

.story-section .booking-info .bk-title {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: -5px;
  margin-left: 40px;
  color: var(--white-color);
}

.story-section .booking-info .bk-title .call-icon {
  transform: rotate(-45deg);
}

.story-section .booking-info .bk-title i {
  font-size: 35px;

}

.story-section .booking-info .bk-no {
  color: var(--white-color);
  line-height: 1.5em;
  padding-left: 15px;
  position: relative;
  text-decoration: none;
  text-align: left;
}

.story-section .booking-info .bk-no a {
  color: var(--white-color);
  padding-bottom: 5px;
}

/* underline animation */
.story-section .booking-info .bk-no::after {
  content: "";
  position: absolute;
  left: 15px;
  /* aligns under phone number text */
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--white-color);
  transition: width 0.4s ease;
}

/* show underline on hover */
.story-section .booking-info .bk-no:hover::after {
  width: calc(100% - 15px);
}

.story-section .image-col {
  position: relative;
}

.story-section .image-col .inner {
  position: relative;
  display: block;
  padding-left: 70px;
}


.story-section .image-col .images {
  position: relative;
}

.story-section .image-col .images img {
  position: relative;
  display: block;
  width: 100%;
  z-index: 1;
}

.story-section .image-col .image {
  position: relative;
  display: inline-block;
}

.story-section .about-year {
  position: relative;
  display: flex;
  padding-top: 100px;
  align-items: flex-end;
  /* ⬅ bottom-aligns image & text box */
}

.story-section .about-year .about-img2 img {
  position: relative;
  border-radius: 400px 400px 0 0;
}

.story-section .about-year .year-box {
  position: relative;
  color: var(--white-color);
  padding-left: 30px;

  display: flex;
  /* make it flexbox */
  flex-direction: column;
  /* stack children vertically */
  align-items: flex-start;
  /* align left */
  gap: 5px;
}

.story-section .about-year .year-box i {
  font-size: 30px;
  display: block;
}

.story-section .about-year .year-box .year-txt {
  font-size: 55px;
  font-weight: 600;
  padding: 20px 0 15px 0;
}

.story-section .about-year .year-box p {
  font-weight: 500;
  margin: 0;
}

.story-section .round-stamp-2 {
  position: absolute;
  left: 0px;
  top: 280px;
  width: 148px;
  height: 148px;
  display: flex;
  /* Flexbox added */
  align-items: center;
  /* Vertical centering */
  justify-content: center;
  /* Horizontal centering */
  z-index: 100;
}

.story-section .round-stamp-2 .stamp_icon {
  position: relative;
  z-index: 100;
}

.story-section .round-stamp-2:before {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: url(../images/resource/badge-outer.png) no-repeat;
}


/* cta text link - common css used from global css ->text link  */
a.cta-link {
  position: absolute;
  right: 20px;
  margin-top: 20px;
}




/*** 

====================================================================
  video Section
====================================================================

***/

/* video section css start */

.video-section {
  position: relative;
  width: 90%;
  margin: 0 auto;
}

.video-section .bg-video-wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 80vh;
  border-radius: 10px;
}

.video-section .bg-video-wrap video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: 1;
  transform: translate(-50%, -50%);
  object-fit: cover;
  pointer-events: none;
  border-radius: 10px;
}

.video-section .overlay {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .2);
  z-index: 2;
  border-radius: 10px;
}

.video-section .content-box {
  position: absolute;
  width: 50%;
  left: 80px;
  bottom: 80px;
  z-index: 3;
  text-align: left;
}

.video-section .content-box h3 {
  text-transform: uppercase;
  text-shadow:
    0.4px 0 var(--white-color),
    -0.4px 0 var(--white-color),
    0 0.4px var(--white-color),
    0 -0.4px var(--white-color);
}

.video-section .content-box p {
  padding: 10px 0 20px 0;
}

.video-section .content-box p span {
  font-weight: 700;
  text-transform: uppercase;
}

.video-section .content-box .cta-box {
  display: flex;
  gap: 20px;
}



/*** 

====================================================================
  Menu Section Tab Style
====================================================================

***/

.menu-section {
  position: relative;
  overflow: hidden;
  background-color: var(--main-color);
}

.menu-section .title-box h2 {
  color: var(--white-color);
  text-shadow:
    0.4px 0 var(--white-color),
    -0.4px 0 var(--white-color),
    0 0.4px var(--white-color),
    0 -0.4px var(--white-color);
}

.tabs-box {
  position: relative;
}

.tabs-box .tab-buttons {
  position: relative;
}

.tabs-box .tab-buttons .tab-btn {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.tabs-box .tabs-content {
  position: relative;
  border-top: solid 1px var(--white-color-opacity-four);
  border-bottom: solid 1px var(--white-color-opacity-four);
}

.tabs-box .tabs-content .tab {
  position: relative;
  display: none;
  padding: 0;
}

.tabs-box .tabs-content .active-tab {
  display: block;
}

.menu-tabs {
  position: relative;
}

.menu-tabs .buttons {
  position: relative;
  padding-bottom: 30px;
  margin-bottom: 0px;
}

.menu-tabs .buttons .tab-buttons {
  position: relative;
  text-align: center;
  font-family: var(--font-family-Italiana);
}

.menu-tabs .buttons .tab-buttons .tab-btn {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 0 auto;
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 500;
  line-height: 25px;
  text-transform: capitalize;
  padding: 8px 30px;
  font-family: var(--font-family-jost);
  border: solid 1px var(--white-color-opacity-three);
  border-radius: 100px;
}

.menu-tabs .buttons .tab-buttons .tab-btn span {
  color: var(--white-color-opacity-two);
}

.menu-tabs .buttons .tab-buttons .tab-btn.active-btn {
  -ms-transform: scaleX(1);
  transform: scaleX(1);
  background-color: var(--white-color);
  color: var(--main-color);
}

.menu-tabs .buttons .tab-buttons .tab-btn.active-btn span {
  color: var(--main-color);
}

.tabs-box .tabs-content .tab .row {
  display: flex;
  align-items: center;
  /* This vertically centers the two columns */
  flex-wrap: wrap;
  /* Ensures responsiveness for smaller screens */
}

.menu-tabs .menu-col .inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Vertical centering inside the column */
  height: 100%;
}

.menu-tabs .menu-col.img-col {
  text-align: center;
}

.menu-tabs .menu-col.img-col .inner {
  display: block;
}

.menu-tabs .menu-col:nth-child(2) .inner {
  padding-right: 0;
  border-right: none;
}

.menu-tabs .menu-col:nth-child(2) .inner:after {
  display: none;
}

.menu-tabs .menu-col.img-col .image {
  position: relative;
  display: inline-block;
}

.menu-tabs .menu-col.img-col .image img {
  display: block;
  border-radius: 300px 300px 0 0;
  position: relative;
  z-index: 1;
}

.menu-tabs .dish-block {
  position: relative;
  margin-bottom: 20px;
  padding: 20px;
}

.menu-tabs .dish-block.popular {
  background-color: var(--white-color-opacity-three);
  border: solid 1px var(--black-color-opacity-four);
}

.menu-tabs .dish-block:last-child {
  margin-bottom: 0;
}

.menu-tabs .dish-block .inner-box {
  position: relative;
  padding-left: 150px;
  min-height: 120px;
  display: grid;
  align-items: center;
}

.menu-tabs .dish-block .dish-image {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  border-radius: 400px;
  overflow: hidden;
}

.menu-tabs .dish-block .dish-image img {
  position: relative;
  display: block;
  width: 120px;
  height: 120px;
  border-radius: 400px;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.menu-tabs .dish-block .inner-box:hover .dish-image img {
  transform: scale(1.1);
}

.menu-tabs .dish-block .title {
  position: relative;
  line-height: 24px;
  margin-bottom: 10px;
  display: flex;
}

.menu-tabs .dish-block .title .menu-list-line {
  flex-grow: 1;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom-style: dashed;
  border-bottom-width: 1px;
  border-bottom-color: var(--black-color-opacity-three);
  height: 21px;
}

.menu-tabs .dish-block .title .ttl {
  position: relative;
  float: left;
  padding-right: 0px;
  text-transform: capitalize;
}

.menu-tabs .dish-block .title .ttl a {
  color: var(--main-color);
}

.menu-tabs .dish-block .title .ttl .s-info {
  position: relative;
  display: inline-block;
  line-height: 18px;
  padding: 1px 8px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 500;
  color: var(--white-color);
  letter-spacing: 1px;
  background: var(--main-color);
  margin-left: 8px;
  font-family: var(--font-family-jost);
  text-transform: uppercase;
}

.menu-tabs .dish-block .title .price {
  position: relative;
  float: right;
  font-family: var(--font-family-Italiana);
  font-size: 25px;
  color: var(--main-color);
  padding-left: 5px;
  margin-top: -5px;
}

.menu-tabs .dish-block .title .price span {
  font-size: 22px;
  position: relative;
  bottom: -.2em;
}

.menu-tabs .dish-block .desc {
  position: relative;
  font-size: 18px;
  color: var(--text-color-light);
  padding-right: 50px;
}

.menu-tabs .dish-block .desc a {
  color: var(--text-color-light);
}

.menu-section .open-timing {
  position: relative;
  text-align: center;
}

.menu-section .open-timing .hours {
  position: relative;
  padding: 25px 0;
}


/*** 

====================================================================
  Menu Section Tab Style 2  - common style as per above
====================================================================

***/

.menu-section .tabs-content .serv-block {
  position: relative;
  width: 100%;
  text-align: center;
}

.menu-section .tabs-content .serve-col {
  padding: 0;
}


.menu-section .serv-block {
  position: relative;
  width: 100%;
  min-height: 550px;
  padding: 60px 30px;
  text-align: center;
  overflow: hidden;
}

.menu-section .col-xl-3:not(:last-child) .serv-block {
  border-right: 1px solid var(--white-color-opacity-four);
}

.menu-section .serv-block .serv-datagrp {
  position: relative;
  z-index: 2;
}

.menu-section .serv-icon {
  margin-bottom: 70px;
  transition: opacity 0.3s ease;
}


.menu-section .serv-block .serv-datagrp .title h3 a {
  position: relative;
  color: var(--white-color);
  text-transform: uppercase;
  text-shadow:
    0.4px 0 var(--white-color),
    -0.4px 0 var(--white-color),
    0 0.4px var(--white-color),
    0 -0.4px var(--white-color);
}

.menu-section .serv-block .serv-datagrp .serv-price {
  color: var(--white-color);
  border-radius: 100px;
  border: solid 1px var(--white-color-opacity-four);
  display: inline-block;
  padding: 0 22px;
  font-size: 16px;
  margin-top: 20px;
}

.menu-section .serv-cta {
  margin-top: 18px;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.4s ease;
}

.menu-section .serv-cta a {
  color: var(--white-color);
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

.menu-section .serv-divider {
  display: block;
  width: 1px;
  height: 60px;
  /* line height */
  background: rgba(255, 255, 255, 0.6);
  margin: 70px auto;
  /* 70px space above & below */
  transition: opacity 0.3s ease;
}


.menu-section .serv-block::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

/* Hover state */
.menu-section .serv-block:hover::after {
  opacity: 1;
}

/* Hide icon & divider */
.menu-section .serv-block:hover .serv-icon,
.menu-section .serv-block:hover::before {
  opacity: 0;
}

/* Show CTA */
.menu-section .serv-block:hover .serv-cta {
  opacity: 1;
  transform: translateY(0);
}

.menu-section .serv-block:hover .serv-price {
  background-color: var(--white-color);
  color: var(--main-color);
  border-color: var(--white-color);
  transform: scale(1.05);
}

.menu-section .pkg-link {
  font-family: var(--font-family-Italiana);
  font-size: 30px;
  color: var(--white-color);
  text-align: center;
  padding: 40px 20px 0 20px;
}

.menu-section .pkg-link a {
  color: var(--white-color);
}



/*** 

====================================================================
  Promo banner Section
====================================================================

***/

.promo-block-section {
  position: relative;
}

.promo-block-section .promo-banner {
  position: relative;
  width: 100%;
  background: var(--promo-bg) center/cover no-repeat;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 80px 40px;
}

/* dark overlay */
.promo-block-section .promo-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--black-color-opacity-five);
}

.promo-block-section .promo-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  /* uses same background image */
  background-size: cover;
  background-position: center;
  transform: scale(1) rotate(0deg);
  transition: transform 0.8s ease;
  z-index: 0;
}

.promo-block-section .promo-banner:hover::after {
  transform: scale(1.08) rotate(-1.2deg);
}

/* content */
.promo-block-section .promo-content {
  position: relative;
  z-index: 2;
  color: var(--white-color);
}

/* offer badge */
.promo-block-section .offer-badge {
  display: inline-block;
  background: var(--white-color);
  color: var(--black-color);
  font-size: 16px;
  font-weight: 600;
  padding: 0px 16px;
  border-radius: 100px;
  margin-bottom: 18px;
}

/* heading */
.promo-block-section .promo-content h3 {
  font-family: var(--font-family-Italiana);
  color: var(--white-color);
  margin-bottom: 6px;
}

/* subtitle */
.promo-block-section .promo-content p {
  margin-bottom: 26px;
}

.promo-block-section .txt-link {
  text-transform: uppercase;
  font-size: 14px;
}

/*** 

====================================================================
  Special Offer Section
====================================================================

***/

.special-offer {
  position: relative;
  background: var(--color-two);
}

.special-offer {
  position: relative;
  background: var(--color-two);
}

.special-offer .outer-container {
  position: relative;
  /*max-width: 1600px;*/
  padding: 0 15px;
  margin: 0 auto;
}

.special-offer .auto-container {
  max-width: 1650px;
}

.special-offer .offer-block-two {
  position: relative;
  margin-bottom: 30px;
}

.special-offer .owl-theme .offer-block-two {
  margin-bottom: 0;
}

.special-offer .offer-block-two .inner-box {
  position: relative;
  display: block;
  text-align: center;
  background-color: var(--white-color-opacity-three);
  border: solid 1px var(--black-color-opacity-four);
  padding: 40px;
}

.special-offer .offer-block-two .inner-box:hover {
  background-color: var(--white-color);
  border: solid 1px var(--main-color);
  transition: all ease 0.5s;
}

.special-offer .offer-block-two .pkg-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 20px;
}

.special-offer .offer-block-two .pkg-header {
  flex: 1;
  text-align: left;
}

.special-offer .offer-block-two .pkg-ttl {
  font-family: var(--font-family-jost);
  font-size: 24px;
  padding-bottom: 20px;
  padding-right: 20px;
  text-transform: uppercase;
}

.special-offer .offer-block-two p {
  padding-right: 50px;
  color: var(--text-color-light);
}

.special-offer .offer-block-two .pkg-image {
  flex-shrink: 0;
  /* don’t shrink the image container */
  display: inline-block;
  text-align: right;
}

.special-offer .offer-block-two .pkg-image img {
  width: auto;
  /* keep actual image width */
  max-width: none;
  /* ensure it's not limited by parent */
  height: auto;
  /* maintain aspect ratio */
  border-radius: 200px 120px;
  border: solid 1px var(--white-color);
  -webkit-box-shadow: 7px 7px 0px -5px rgba(47, 41, 36, 1);
  -moz-box-shadow: 7px 7px 0px -5px rgba(47, 41, 36, 1);
  box-shadow: 7px 7px 0px -5px rgba(47, 41, 36, 1);
}

.special-offer .offer-block-two .pkg-price {
  display: flex;
  align-items: center;
  width: 100%;
}

.special-offer .offer-block-two .main-price {
  font-size: 40px;
  color: var(--main-color);
  font-weight: 600;
}

.special-offer .offer-block-two .duration {
  position: relative;
  font-size: 14px;
  color: var(--text-color-light);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  margin-left: 15px;
  padding-left: 15px;
  line-height: 1.6em;
}

/* add a vertical line that fits content height */
.special-offer .offer-block-two .duration::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 1px;
  background: var(--black-color-opacity-four);
}

.special-offer .offer-block-two .duration span {
  font-size: 18px;
  color: var(--text-color-light);
  font-weight: 500;
}

.special-offer .offer-block-two .pkg-service-group {
  position: relative;
  width: 100%;
  padding: 60px 0 40px 0;
}

.special-offer .offer-block-two .pkg-service-group h6 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 16px;
  text-transform: uppercase;
  color: var(--main-color);
  font-weight: 500;
  letter-spacing: 0.5px;
  margin-bottom: 15px;
}

.special-offer .offer-block-two .pkg-service-group h6::after {
  content: "";
  flex-grow: 1;
  height: 1px;
  background-color: var(--black-color-opacity-four);
}


/* packages service list */
.special-offer .offer-block-two .pkg-service-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* each row: left name, middle connector, right duration */
.special-offer .offer-block-two .pkg-service-list .service-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  color: var(--text-color-dark);
}

/* name (left) */
.special-offer .offer-block-two .pkg-service-list .service-name {
  flex: 0 0 auto;
  /* only as wide as its content */
  white-space: nowrap;
}

/* connector — this draws the dashed line and grows to fill the gap */
.special-offer .offer-block-two .pkg-service-list .service-connector {
  flex: 1 1 auto;
  /* fills remaining space */
  border-bottom: 1px dashed var(--black-color-opacity-four);
  height: 1px;
  align-self: center;
  margin: 12px 0 0 0;
  /* spacing handled by gap on .service-item */
}

/* duration (right) */
.special-offer .offer-block-two .pkg-service-list .service-duration {
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--main-color);
  font-weight: 400;
}

.special-offer .link-box {
  text-align: left;
}

.special-offer .pkg-cta {
  font-size: 18px;
  width: 100%;
  text-align: center;
  padding: 30px 0 0 0;
}

.special-offer .pkg-cta a {
  font-weight: 500;
  color: var(--main-color);
  text-decoration: none;
}

/* underline (half by default) */
.special-offer .pkg-cta a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 50%;
  /* half underline */
  background-color: var(--main-color);
  transition: width 0.4s ease;
}

/* on hover → animate to full underline */
.special-offer .pkg-cta a:hover::after {
  width: 100%;
}

.special-offer .owl-theme .owl-dots {
  display: none;
}

.special-offer .owl-theme .owl-nav {
  position: absolute;
  left: -100px;
  right: -100px;
  height: 0;
  top: 50%;
  margin-top: -22px;
}

.special-offer .owl-theme .owl-nav .owl-next,
.special-offer .owl-theme .owl-nav .owl-prev {
  position: absolute;
  top: 50%;
  display: inline-block;
  vertical-align: top;
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 24px;
  text-align: center;
  background: transparent;
  color: var(--main-color);
  border-radius: 0%;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

.special-offer .owl-theme .owl-nav .owl-next span,
.special-offer .owl-theme .owl-nav .owl-prev span {
  position: relative;
  z-index: 1;
}

.special-offer .owl-theme .owl-nav .owl-next:before,
.special-offer .owl-theme .owl-nav .owl-prev:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--black-color-opacity-four);
  background-color: var(--white-color);
  border-radius: 100px;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

.special-offer .owl-theme .owl-nav .owl-next {
  right: 15px;
}

.special-offer .owl-theme .owl-nav .owl-prev {
  left: 15px;
}

.special-offer .owl-theme .owl-nav .owl-next:hover,
.special-offer .owl-theme .owl-nav .owl-prev:hover {
  color: var(--white-color);
}

.special-offer .owl-theme .owl-nav .owl-next:hover:before,
.special-offer .owl-theme .owl-nav .owl-prev:hover:before {
  background: var(--main-color);
}



/*** 

====================================================================
  Testimonials Section
====================================================================

***/

.testimonials-section {
  position: relative;
}

.testimonials-section .image-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.30;
}

.testimonials-section .carousel-box {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

.testimonials-section .testi-top {
  position: relative;
  text-align: center;
  padding: 40px 80px 100px 80px;
}

.testimonials-section .testi-top .rating {
  color: var(--orange-color);
  padding-bottom: 10px;
}

.testimonials-section .testi-top .quote-text {
  position: relative;
  line-height: 1.6em;
  font-size: 26px;
}

.testimonials-section .thumbs-carousel-box {
  position: relative;
  max-width: 390px;
  margin: 0 auto;
  overflow: hidden;
  margin-top: -50px;
}

.testimonials-section .testi-thumbs {
  position: relative;
  max-width: 130px;
  margin: 0 auto;
  text-align: center;
}

.testimonials-section .testi-thumbs .owl-stage-outer {
  overflow: visible;
}

.testimonials-section .testi-thumbs .image {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  margin-bottom: 15px;
  -ms-transform: scale(0.80);
  transform: scale(0.80);
  cursor: pointer;
  border-radius: 50%;
  transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  border: solid 2px var(--black-color-opacity-four);
}

.testimonials-section .testi-thumbs .image img {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 50%;
}

.testimonials-section .testi-thumbs .active .image {
  -ms-transform: scale(1);
  transform: scale(1);
  border: solid 2px var(--main-color);
}

.testimonials-section .testi-thumbs .auth-title {
  position: relative;
  text-transform: uppercase;
  color: var(--main-color);
  font-size: 16px;
  opacity: 0;
  visibility: hidden;
  transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
}

.testimonials-section .testi-thumbs .active .auth-title {
  opacity: 1;
  visibility: visible;
}

.testimonials-section .owl-theme .owl-nav,
.testimonials-section .owl-theme .owl-dots {
  display: none;
}



/*** 

====================================================================
  Reservation Section - Common css and other css for different options
====================================================================

***/

.reserve-section {
  position: relative;
}

.reserve-section .image-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  opacity: 0.50;
}

.reserve-section .outer-box {
  position: relative;
  z-index: 1;
}

.reserve-section .outer-box>.row {
  margin: 0 0;
}

.reserve-section .reserv-col {
  position: relative;
  padding: 0 0;
}

.reserve-section .reserv-col .inner {
  position: relative;
  min-height: 100%;
}

.reserve-section .reserv-col .title {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
}

.reserve-section .reserv-col .title h2 {
  line-height: 1.2em;
}

.reserve-section .reserv-col .request-info a {
  color: var(--main-color);
}

.reserve-section .reserv-col .request-info a:hover {
  color: var(--main-color);
  text-decoration: underline;
}

.reserve-section .reserv-col form .row {
  margin: 0 -10px;
}

.reserve-section .reserv-col form .row .form-group {
  padding: 0 10px;
  margin-bottom: 15px;
}

.reserve-section .reserv-col form .btn-style-one {
  display: block;
  width: 100%;
}

.reserve-section .reserv-col form .btn-style-one .btn-wrap .text-two,
.reserve-section .reserv-col form .btn-style-one .btn-wrap {
  width: 100%;
}


/* reservation split style ( common css used from above css) */
.reserve-section.splitscreen .graphic-col .graphic-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.reserve-section.splitscreen .graphic-col .image {
  display: none;
}

.reserve-section.splitscreen .reserv-col {
  background-color: var(--main-color);
}

.reserve-section.splitscreen .reserv-col .inner {
  background-color: var(--main-color);
}

.reserve-section.splitscreen .reserv-col .inner {
  position: relative;
  padding: 150px 180px;
  min-height: 100%;
  display: inline-block;
}

.reserve-section.splitscreen .reserv-col .inner::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 1px solid var(--main-color);
  pointer-events: none;
  z-index: 2;
  box-sizing: border-box;
}

.reserve-section.splitscreen .reserv-col .inner .title-box h2 {
  padding-bottom: 0;
}


/* css for style two ( comon css used as above css) */
.reserve-section.style-two {
  position: relative;

}

.reserve-section.style-two .outer-box {
  margin: 0 0;
  top: 0;
}

.reserve-section.style-two .reserv-col .inner .title-box h2 {
  padding-bottom: 0;
}



/* css for style two Reserve PAGE ( comon css used as above css) */
.reserve-section.style-two.reserve-page {
  display: flex;
  height: 100vh;
  /* full screen height */
}

.reserve-section.style-two.reserve-page .leftpart {
  width: 75%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 50px 400px;
  position: relative;
}

.reserve-section.style-two.reserve-page .leftpart .inner {
  position: relative;
  z-index: 2;
}

.reserve-section.style-two.reserve-page .leftpart .form-part {
  padding-top: 100px;
}

.reserve-section.style-two.reserve-page .leftpart .form-back {
  position: relative;
  text-align: left;
  color: var(--text-color-light);
  bottom: 25px;
}

.reserve-section.style-two.reserve-page .leftpart .form-back:hover {
  text-align: left;
  color: var(--main-color);
}


/* side elements */
.reserve-page .side-element {
  position: absolute;
  inset: 0;
  /* ensures it fills .leftpart */
  pointer-events: none;
  z-index: 1;
  /* behind the main form */
}

.reserve-page .side-element .left-side-element,
.reserve-page .side-element .right-side-element {
  position: absolute;
  width: 150px;
}

.reserve-page .side-element .left-side-element {
  left: -25px;
  top: 150px;
}

.reserve-page .side-element .right-side-element {
  right: 0;
  bottom: -50px;
}

/* right part summery */
.reserve-section.style-two.reserve-page .rightpart {
  width: 25%;
  background-color: var(--main-color);
  display: flex;
  align-items: center;
  justify-content: center;
}

.reserve-section .rightpart .booking {
  width: 100%;
  padding: 0 50px;
}

.reserve-section .rightpart .booking .ttl-group {
  border-bottom: solid 1px var(--white-color-opacity-three);
  padding-bottom: 25px;
  margin-bottom: 30px;
}

.reserve-section .rightpart .booking h4 {
  color: var(--white-color);
}

.reserve-section .booking-summary {
  width: 100%;
  margin: 0 auto;
}

.reserve-section .booking-summary ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.reserve-section .booking-summary li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 25px;
  font-size: 18px;
  flex-wrap: wrap;
}

.reserve-section .booking-summary .label {
  color: var(--white-color-opacity-two);
  /* lighter label */
}

.reserve-section .booking-summary .value {
  color: var(--white-color);
}

.reserve-section .booking-summary .divider {
  height: 1px;
  background-color: #ffffff66;
  margin: 30px 0;
}

.reserve-section .booking-summary .total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reserve-section .booking-summary .total-amount {
  font-size: 25px;
  color: var(--white-color);
}

.reserve-section .booking-summary .link-box {
  margin-top: 50px;
  text-align: center;
}

.reserve-section .booking-summary .link-box .btn-style-two {
  width: 100%;
  display: block;
}

.reserve-section .booking-summary .link-box .btn-style-two .btn-wrap {
  float: none;
  /* cancel the float */
  vertical-align: top;
}

.reserve-section .booking-summary .live-chat {
  text-align: left;
  padding-top: 30px;
  color: var(--white-color-opacity-three);
}

.reserve-section .booking-summary .live-chat a {
  position: relative;
  text-align: left;
  padding-top: 30px;
  color: var(--white-color);
}

.reserve-section .booking-summary .live-chat a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  /* 3px below text */
  width: 100%;
  height: 1px;
  /* underline thickness */
  background-color: var(--white-color);
  transition: all 0.3s ease;
}

.reserve-section .booking-summary .live-chat a:hover::after {
  width: 0;
  right: 0;
  left: auto;
}


/* css for style two Reserve PAGE 2 ( comon css used as above css) */
.reserve-section.style-two.reserve-page-2 .row {
  display: flex;
  align-items: stretch;
  /* makes all children same height */
  flex-wrap: wrap;
  /* keep responsiveness for smaller screens */
}

/* Make each column fill height of the row */
.reserve-section.style-two.reserve-page-2 .reserv-col {
  display: flex;
  flex-direction: column;
}

/* Inner containers stretch fully */
.reserve-section.style-two.reserve-page-2 .reserv-col .inner,
.reserve-section.style-two.reserve-page-2 .contact-details {
  flex: 1;
}

.reserve-section.style-two.reserve-page-2 .reserv-col .inner {
  padding: 0;
}

.reserve-section.style-two.reserve-page-2 .form-col {
  padding: 70px 150px;
  background-color: var(--white-color);
  border: solid 1px var(--black-color-opacity-four);
}

.reserve-section.style-two.reserve-page-2 .contact-info {
  position: relative;
  background-color: var(--main-color);
  display: flex;
  align-items: center;
  /* vertically center */
  justify-content: center;
  /* optional – centers horizontally too */
}

/* background image overlay */
.reserve-section.style-two.reserve-page-2 .contact-info::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/resource/leaf-2-white.svg") center/cover no-repeat;
  opacity: 0.05;
  /* adjust opacity as needed (0.1–0.5) */
  z-index: 0;
  background-size: contain;
}

.reserve-section.style-two.reserve-page-2 .contact-details {
  align-items: center;
  position: relative;
  padding: 30px 0;
  flex: 0 0 auto;
}

.reserve-section.style-two.reserve-page-2 .contact-details .c-details {
  position: relative;
  text-align: center;
}

/* Vertical line after the 1st and 2nd .c-details */
.reserve-section.style-two.reserve-page-2 .contact-details .c-details:not(:last-child)::after {
  content: "";
  position: absolute;
  bottom: -15px;
  /* space between content and line */
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 30px;
  background-color: var(--white-color);
  /* or your desired color */
}

.reserve-section.style-two.reserve-page-2 .contact-details,
.reserve-section.style-two.reserve-page-2 .contact-details h4 {
  color: var(--white-color);
  text-align: center;
}

.reserve-section.style-two.reserve-page-2 .contact-details i {
  font-size: 30px;
  padding-bottom: 20px;
}

.reserve-section.style-two.reserve-page-2 .contact-details .stu-location,
.reserve-section.style-two.reserve-page-2 .contact-details .stu-time,
.reserve-section.style-two.reserve-page-2 .contact-details .stu-call-mail {
  padding: 40px 0;
}

.reserve-section.style-two.reserve-page-2 .contact-details .stu-call-mail a {
  position: relative;
  color: var(--white-color);
  text-decoration: none;
  display: inline-block;
  padding-bottom: 1px;
  transition: color 0.3s ease;
}

/* Base underline (hidden) */
.reserve-section.style-two.reserve-page-2 .contact-details .stu-call-mail a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 1px;
  background-color: var(--white-color);
  transition: width 0.4s ease;
}

/* Hover animation */
.reserve-section.style-two.reserve-page-2 .contact-details .stu-call-mail a:hover::after {
  width: 100%;
}



/*** 

====================================================================
  Team Section
====================================================================

***/

.team-section {
  position: relative;
  border-top: solid 1px var(--black-color-opacity-five);
  border-bottom: solid 1px var(--black-color-opacity-five);
}

.team-section.no-border {
  border-top: none;
}

.team-section .row {
  margin: 0 -25px;
}

.team-section .row .team-block {
  position: relative;
  padding: 0 25px;
}

.team-block .inner-box {
  position: relative;
  display: block;
}

.team-block .inner-box .image {
  position: relative;
  display: block;
  margin-bottom: 25px;
}

.team-block .inner-box .image img {
  position: relative;
  display: block;
  width: 100%;
  border-radius: 500px;
  border: solid 1px var(--black-color-opacity-four);
}

.team-block .overlay-box {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;

  transition: all 900ms ease;
  -moz-transition: all 900ms ease;
  -webkit-transition: all 900ms ease;
  -ms-transition: all 900ms ease;
  -o-transition: all 900ms ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  -webkit-transform: scale(0, 1);
  -ms-transform: scale(0, 1);
  transform: scale(0, 1);
  -webkit-transform-origin: right center;
  -ms-transform-origin: right center;
  transform-origin: right center;
  background-position: center center;

}

.team-block .overlay-box:before {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  opacity: 0.60;
  background-color: var(--main-color);
  border-radius: 500px;
}

.team-block .overlay-box .overlay-inner {
  position: relative;
  text-align: center;
}

.team-block .inner-box:hover .overlay-box {
  -webkit-transform: scale(1, 1);
  -ms-transform: scale(1, 1);
  transform: scale(1, 1);
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
}

.team-block .social-box {
  position: relative;
}

.team-block .social-box li {
  position: relative;
  margin: 0px 1px;
  display: inline-block;
  font-family: 'Font Awesome 6 Pro';
}

.team-block .social-box li a {
  position: relative;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  display: inline-block;
  color: var(--main-color);
  background-color: var(--white-color);
  border-radius: 200px;
}

.team-block .social-box li a:hover {
  background: var(--main-color);
  color: var(--white-color);
  border: solid 1px var(--white-color);
}

.team-block h5 {
  position: relative;
  margin-bottom: 4px;
  text-align: center;
}

.team-block h5 a {
  color: var(--main-color);
}

.team-block h5 a:hover {
  color: var(--main-color);
}

.team-block .designation {
  position: relative;
  text-transform: capitalize;
  color: var(--text-color-dark);
  font-size: 18px;
  margin-bottom: 5px;
  text-align: center;
}

.team-block .desc {
  position: relative;
  font-size: 18px;
  color: var(--text-color-dark);
  text-align: center;
  display: none;
}



/*** 

====================================================================
  News Section
====================================================================

***/

.news-section {
  position: relative;
  border-top: solid 1px var(--black-color-opacity-five);
}

.news-section.b-innerpage {
  border-top: none;
}

.news-section .auto-container {
  max-width: 1600px;
}

.news-section .row {
  margin: 0 -25px;
}

.news-block {
  position: relative;
  margin-bottom: 30px;
  display: flex;
}

.news-section .row .news-block {
  display: block;
  padding: 0 25px;
  margin-bottom: 40px;
}

.news-block .inner-box {
  position: relative;
  display: flex;
  background-color: var(--body-bg);
  padding: 40px;
  border: solid 1px var(--black-color-opacity-four);
}

.news-block .inner-box:hover {
  background-color: var(--white-color);
}

.news-block .image-box {
  width: 50%;
}

.news-block .image-box img {
  border-radius: 8px;
}

.news-block .image img {
  position: relative;
  display: block;
  width: 100%;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.news-block .date {
  font-size: 14px;
  color: var(--text-color-light);
  text-transform: uppercase;
  font-weight: 400;
}

.news-block .date span {
  color: var(--main-color);
  font-weight: 500;
}

.news-block .over-content {
  position: relative;
  width: 50%;
  padding-left: 40px;
}

.news-block h4 {
  position: relative;
  margin-bottom: 0;
  padding-top: 20px;
}

.news-block h4 a {
  position: relative;
  color: var(--black-color);
  text-decoration: none;
  background-image: linear-gradient(var(--main-color), var(--main-color));
  background-repeat: no-repeat;
  background-position: 0 100%;
  /* underline sits directly under the text */
  background-size: 0% 1px;
  /* hidden initially */
  transition: background-size 0.4s ease;
  text-shadow:
    0.4px 0 var(--black-color),
    -0.4px 0 var(--black-color),
    0 0.4px var(--black-color),
    0 -0.4px var(--black-color);
}

/* On hover: underline appears and expands fully */
.news-block .inner-box:hover h4 a {
  background-size: 100% 1px;
  color: var(--main-color);
}

.news-block .arrow-btn {
  position: absolute;
  bottom: 0;
}


/*** 

====================================================================
  IG post Section
====================================================================

***/

.ig-post-section {
  position: relative;
  border-top: solid 1px var(--black-color-opacity-five);
}

.ig-post-section .ig-post-block .ig-post-image img {
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}

.ig-post-section .ig-post-block .ig-post-image:hover img {
  transform: scale(1.05, 1.05);
}

.ig-post-section .social-links {
  position: relative;
  text-align: right;
  padding-top: 20px;
  margin-right: -20px;
}

.ig-post-section .social-links ul {
  list-style: none;
}

.ig-post-section .social-links ul li {
  display: inline-block;
}

.ig-post-section .social-links ul li a {
  list-style: none;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--main-color);
  font-weight: 500;
  padding: 0 20px;
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
}

.ig-post-section .social-links ul li a::after {
  content: "";
  position: absolute;
  left: 20px;
  /* matches padding-left for proper start */
  bottom: -3px;
  /* distance below text */
  width: 0;
  height: 1px;
  background-color: var(--main-color);
  transition: width 0.3s ease;
}

.ig-post-section .social-links ul li a:hover::after {
  width: calc(100% - 40px);
  /* animate full underline */
}



/*** 

====================================================================
  blog list page Section
====================================================================

***/

.blog_list_section {
  position: relative;
  z-index: 9;
}

.blog_list_section .blog_panel {
  margin-bottom: 50px;
  padding-bottom: 50px;
  border-bottom: solid 1px var(--black-color-opacity-four);
}

.blog_list_section .blog_panel .ttl-grp {
  padding-bottom: 25px;
}

.blog_list_section .blog_panel .blog_info {
  padding: 30px 0 0 0;
}

.blog_list_section .blog_panel ul,
.blog_detail_section .blog_info ul {
  position: relative;
  margin-bottom: 10px;
}

.blog_list_section .blog_panel ul li,
.blog_detail_section .blog_info ul li {
  display: inline-block;
  font-size: 14px;
  text-transform: uppercase;
  color: var(--text-color-light);
  position: relative;
  padding-right: 10px;
  margin-right: 10px;
}

.blog_list_section .blog_panel ul li .blog-tag,
.blog_detail_section .blog_info ul li .blog-tag {
  color: var(--main-color);
  border: solid 1px var(--main-color);
  padding: 2px 12px;
  border-radius: 100px;
}

.blog_list_section .blog_panel ul li .blog-tag:hover,
.blog_detail_section .blog_info ul li .blog-tag:hover {
  color: var(--white-color);
  border: solid 1px var(--main-color);
  background-color: var(--main-color);
  padding: 2px 12px;
  border-radius: 100px;
}

.blog_list_section .blog_panel ul li:not(:last-child)::after,
.blog_detail_section .blog_info ul li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background-color: var(--black-color-opacity-three);
}

.blog_list_section .blog_panel h4 {
  position: relative;
  display: block;
  transition: .4s all;
}

.blog_list_section .blog_panel h4 a {
  position: relative;
  display: inline-block;
  /* ← Fix: restrict underline to text width */
  color: var(--main-color);
  text-decoration: none;
  background-image: linear-gradient(var(--main-color), var(--main-color));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.4s ease;
}

/* On hover: underline appears and expands fully */
.blog_list_section .blog_panel:hover h4 a {
  background-size: 100% 1px;
}

.blog_list_section .blog_panel .blog_info p {
  padding-bottom: 25px;
  color: var(--text-color-dark);
}

.blog_list_section .blog_panel .main_img {
  overflow: hidden;
  display: block;
}

.blog_list_section .blog_panel .main_img img {
  width: 100%;
  transition: transform 0.5s ease;
  display: block;
}

.blog_list_section .blog_panel:hover .main_img img {
  transform: scale(1.05);
}


/* -----blog-right-side------ */
.blog_list_section .blog_right_side {
  border-left: 1px solid var(--white-color-opacity-four);
  padding: 0 0 0 50px;
}

.blog_list_section .blog_right_side .bg_box {
  margin-bottom: 60px;
}

.blog_list_section .blog_right_side .blog_search_block form label {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}

.blog_list_section .blog_right_side .blog_search_block form .form_inner {
  position: relative;
  width: 100%;
  height: 60px;
}

.blog_list_section .blog_right_side .blog_search_block form .form_inner .form-control {
  height: 100%;
  border-radius: 0;
  border: 1px solid var(--black-color-opacity-four);
  padding-right: 50px;
  color: var(--text-color-dark);
  background-color: var(--white-color);
  font-size: 18px;
}

.blog_list_section .blog_right_side .blog_search_block form .form_inner button {
  font-size: 20px;
  position: absolute;
  background-color: transparent;
  border: none;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  padding: 5px;
  transition: .4s all;
  color: var(--main-color);
}

.blog_list_section .blog_right_side .blog_search_block form .form_inner button:hover {
  color: var(--main-color);
}

/* Recent Blog Css Start */
.blog_list_section .blog_right_side .recent_blog_list li a {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 30px;
}

.blog_list_section .blog_right_side .recent_blog_list li:last-child a {
  margin-bottom: 10px;
  transition: .4s all;
}

.blog_list_section .blog_right_side .recent_blog_list li a .img {
  width: 80px;
  overflow: hidden;
}

.blog_list_section .blog_right_side .recent_blog_list li a .img img {
  width: 100%;
  transition: transform 0.5s ease, filter 0.5s ease;
}

.blog_list_section .blog_right_side .recent_blog_list li:hover .img img {
  transform: scale(1.08);
  filter: brightness(1.1);
}

.blog_list_section .blog_right_side .recent_blog_list li a .text {
  width: calc(100% - 100px);
}

.blog_list_section .blog_right_side .recent_blog_list li a .text p {
  color: var(--main-color);
  font-size: 18px;
  transition: .4s all;
  text-transform: capitalize;
  margin-bottom: 5px;
  -webkit-line-clamp: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.blog_list_section .blog_right_side .recent_blog_list li a:hover p {
  color: var(--main-color);
}

.blog_list_section .blog_right_side .recent_blog_list li a .text span {
  font-size: 14px;
  text-transform: uppercase;
  color: var(--text-color-light);
}

/* Categories block Css */

.blog_list_section .blog_right_side .categories_block ul li {
  display: flex;
  justify-content: space-between;
  margin: 0 0 10px 0;
}

.blog_list_section .blog_right_side .categories_block ul li:last-child {
  margin-bottom: 0;
}

.blog_list_section .blog_right_side .categories_block ul li .cat {
  position: relative;
  display: inline-block;
  width: auto;
  color: var(--text-color-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog_list_section .blog_right_side .categories_block ul li .cat::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--main-color);
  color: var(--main-color);
  transition: width 0.4s ease;
}

.blog_list_section .blog_right_side .categories_block ul li .cat:hover {
  color: var(--main-color);
}

.blog_list_section .blog_right_side .categories_block ul li .cat:hover::after {
  width: 100%;
}

.blog_list_section .blog_right_side .categories_block ul li span {
  color: var(--text-color-light);
}


/* Tag Blocks Css Start */
.blog_list_section .blog_right_side .tags_block ul {
  display: flex;
  flex-wrap: wrap;
}

.blog_list_section .blog_right_side .tags_block ul li a {
  display: inline-block;
  padding: 4px 14px;
  margin: 0 15px 15px 0;
  transition: .4s all;
  border: solid 1px var(--black-color-opacity-four);
  color: var(--text-color-dark);
  background-color: var(--white-color-opacity-three);
  font-size: 18px;
}

.blog_list_section .blog_right_side .tags_block ul li a:hover {
  background-color: var(--main-color);
  color: var(--white-color);
  border: solid 1px var(--main-color);

}

.blog_list_section .blog_right_side h5 {
  border-bottom: solid 1px var(--black-color-opacity-four);
  padding-bottom: 10px;
  margin-bottom: 30px;
}


/* offer banner Blocks Css Start */
.blog_list_section .blog_right_side .banner-block {
  position: relative;
  background-color: var(--main-color);
  padding: 300px 0 50px 0;
}

/* background image overlay */
.blog_list_section .blog_right_side .banner-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/resource/offerbanner.jpg") center/cover no-repeat;
  opacity: 0.7;
  /* adjust opacity as needed (0.1–0.5) */
  z-index: 0;
  background-size: cover;
}

.blog_list_section .blog_right_side .banner-block .data-group {
  position: relative;
  bottom: 50px;
  text-align: center;
}

.blog_list_section .banner-block .data-group .discount {
  display: inline-block;
  background: var(--white-color);
  color: var(--main-color);
  text-transform: uppercase;
  padding: 2px 8px;
  font-weight: 500;
  transition: transform 0.8s ease;
}

/* rotate 360° on hover */
.blog_list_section .banner-block:hover .discount {
  transform: rotateY(360deg);
}

.blog_list_section .banner-block .data-group .offer-ttl {
  font-family: var(--font-family-Italiana);
  color: var(--white-color);
  padding: 10px 0 15px 0;
  font-size: 30px;
}

.blog_list_section .banner-block .data-group a {
  color: var(--white-color);
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
}



/* Pagination Css Start */
.pagination_block ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.pagination_block ul li a {
  margin: 0 5px;
  transition: 0.4s all;
  display: block;
  width: 39px;
  height: 39px;
  background-color: none;
  text-align: center;
  line-height: 39px;
  color: var(--text-color-light);
  border: 1px solid var(--black-color-opacity-four);
  border-radius: 500px;
}

.pagination_block ul li a:hover,
.pagination_block ul li a.active {
  background-color: var(--main-color);
  color: var(--white-color);
  border-color: var(--main-color);
}

.pagination_block ul li a:hover i {
  color: var(--white-color);
}

.pagination_block ul li:first-child a:hover {
  color: var(--main-color);
}

.pagination_block ul li:last-child a:hover {
  color: var(--main-color);
}


/* Blog Single Css Start */
.blog_detail_section .container {
  max-width: 1010px;
}

.blog_detail_section .blog_info h2 {
  display: block;
  transition: .4s all;
  margin-bottom: 15px;
  margin-top: 5px;
}


/*** 

====================================================================
  Blog Detail Page
====================================================================

***/

.blog_detail_section .blog_inner_pannel {
  padding: 0 200px;
  position: relative;
}

.blog_detail_section .blog_inner_pannel .info.inside {
  padding: 0 0 30px 50px;
}

.blog_detail_section .blog_inner_pannel .info h3 {
  margin-top: 30px;
  margin-bottom: 15px;
}

.blog_detail_section .blog_inner_pannel .section_title {
  margin-bottom: 40px;
}

.blog_detail_section .blog_inner_pannel .section_title h2 {
  margin-bottom: 0;
}

.blog_detail_section .blog_inner_pannel img {
  max-width: 100%;
}

.blog_detail_section .blog_inner_pannel .main_img {
  margin: 50px 0;
}

.blog_detail_section .blog_inner_pannel .main_img img {
  width: 100%;
  transition: transform 0.4s ease;
}

.blog_detail_section .blog_inner_pannel .main_img iframe {
  width: 100%;
  height: 510px;
}

/* double image */
.blog_detail_section .blog_inner_pannel .main_img_2 {
  display: flex;
  gap: 40px;
  /* space between images */
  margin: 50px 0;
}

.blog_detail_section .blog_inner_pannel .main_img_2 img {
  width: calc(50% - 20px);
  /* subtract half the gap to avoid overflow */
  height: 350px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Optional hover effect */
.blog_detail_section .blog_inner_pannel .main_img img:hover,
.blog_detail_section .blog_inner_pannel .main_img_2 img:hover {
  transform: scale(1.05);
}

.blog_detail_section .blog_inner_pannel .info h3 {
  margin-top: 30px;
  margin-bottom: 15px;
}

.blog_detail_section .blog_inner_pannel .info h4 {
  margin-top: 30px;
  margin-bottom: 15px;
}

.blog_detail_section .blog_inner_pannel .info ul {
  margin-bottom: 10px;
}

.blog_detail_section .blog_inner_pannel .info ul li p {
  position: relative;
  padding-left: 25px;
  margin: 10px 0;
  font-size: 18px;
}

.blog_detail_section .blog_inner_pannel .info ul li p .icon {
  position: absolute;
  left: 0;
  font-size: 15px;
}

.blog_detail_section .blog_inner_pannel .two_img {
  margin-bottom: 70px;
}

.blog_detail_section .blog_inner_pannel .quote_block {
  background-color: var(--white-color-opacity-three);
  padding: 40px 80px;
  position: relative;
  margin: 40px 0;
  border: solid 1px var(--black-color-opacity-four);
  transition: all ease .5s;
}

.blog_detail_section .blog_inner_pannel .quote_block:hover {
  background-color: var(--white-color);
  border: solid 1px var(--main-color);
}

.blog_detail_section .blog_inner_pannel .quote_block h5 {
  color: var(--main-color);
  margin: 15px 0;
  line-height: 33px;
  text-align: center;
}

.blog_detail_section .blog_inner_pannel .quote_block i {
  font-size: 30px;
  color: var(--main-color);
  display: block;
  text-align: center;
}


/* blog author */
.blog_detail_section .blog_inner_pannel .blog_authore {
  display: flex;
  background-color: var(--white-color-opacity-three);
  padding: 40px;
  position: relative;
  margin: 40px 0 0 0;
  border: solid 1px var(--black-color-opacity-four);
  gap: 30px;
}

.blog_detail_section .blog_authore .auther-desc-grp {
  display: grid;
  gap: 10px;
}

.blog_detail_section .blog_authore .auth-img {
  max-width: 150px;
  border-radius: 500px 500px 0 0;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
}

.blog_detail_section .blog_authore .auth-social {
  display: flex;
  padding-top: 5px;
  align-items: center;
}

.blog_detail_section .blog_authore .auth-social li {
  position: relative;
  padding-right: 4px;
  margin-right: 4px;
}

.blog_detail_section .blog_authore .auth-social li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 18px;
  /* adjust height */
  background-color: var(--black-color-opacity-four);
}

.blog_detail_section .blog_authore .auth-social li a {
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
  margin-right: 5px;
  transition: 0.4s all;
  color: var(--black-color-opacity-two);
}

.blog_detail_section .blog_authore .auth-social li a:hover {
  color: var(--main-color);
}



/* Social Media link list */
.blog_detail_section .blog_inner_pannel .social_media {
  display: flex;
  margin-top: 35px;
  align-items: center;
}

.blog_detail_section .blog_inner_pannel .social_media h6 {
  padding: 0 20px 0 0;
}

.blog_detail_section .blog_inner_pannel .social_media ul {
  display: flex;
}

.blog_detail_section .blog_inner_pannel .social_media ul li a {
  display: block;
  width: 37px;
  height: 37px;
  text-align: center;
  line-height: 34px;
  font-size: 15px;
  border: 1px solid var(--black-color-opacity-three);
  border-radius: 50px;
  margin-right: 10px;
  transition: 0.4s all;
  color: var(--main-color);
}

.blog_detail_section .blog_inner_pannel .social_media ul li a:hover {
  background-color: var(--main-color);
  color: var(--white-color);
  border: 1px solid var(--main-color);
}

/* comment section Css Start */
.comment_section {
  padding-bottom: 100px;
}

.comment_section .blog_cooment_block {
  padding: 0 200px;

}

.comment_section .blog_cooment_block .posted_cooment {
  margin-bottom: 60px;
}

.comment_section .blog_cooment_block .posted_cooment .section_title {
  text-align: left;
}

.comment_section ul {
  margin-top: 30px;
}

.comment_section ul li {
  display: flex;
  align-items: center;
  padding: 30px 0;
  border-top: 1px solid var(--black-color-opacity-four);
}

.comment_section ul li:last-child {
  border-bottom: 1px solid var(--white-color-opacity-four);
}

.comment_section ul li.replay_comment {
  margin-left: 110px;
}

.comment_section ul li .authore_info {
  display: flex;
  align-items: center;
  width: 260px;
}

.comment_section ul li .authore_info .avtar {
  width: 88px;
  margin-right: 20px;
}

.comment_section ul li .authore_info .avtar img {
  border-radius: 200px;
  border-color: 2 solid var(--white-color-opacity-four);
}

.comment_section ul li .authore_info .text {
  width: calc(100% - 108px);
  font-size: 16px;
  font-weight: normal;
  text-transform: uppercase;
}

.comment_section ul li .authore_info .text span {
  font-size: 16px;
  text-transform: capitalize;
  color: var(--text-color-light);
}

.comment_section ul li .comment {
  width: calc(100% - 310px);
  margin-left: 50px;
}

.comment_section ul li .comment p {
  margin-bottom: 0;
  color: var(--text-color-dark);
}

/* comment-form-section */
.comment_form_section .section_title {
  text-align: left;
}

.comment_form_section form {
  margin-top: 30px;
}

.comment_form_section form .form-group .form-control {
  height: 60px;
  margin-bottom: 30px;
  color: var(--text-color-dark);
  padding: 15px;
  border: 1px solid var(--black-color-opacity-four);
  background-color: var(--white-color);
  border-radius: 0px;
}

.comment_form_section form .form-group .form-control::placeholder {
  color: var(--text-color-dark);
}

.comment_form_section form .form-group textarea.form-control {
  height: 140px;
  padding-top: 15px;
  resize: none;
}

.comment_form_section .coment-btn {
  text-align: right;
}

/*** 

====================================================================
  Main Footer
====================================================================

***/

.main-footer {
  position: relative;
  background: rgb(30 27 28);
}

.main-footer .contact-section .row {
  display: flex;
}

.main-footer .footer-contact-section {
  position: relative;
  width: 100%;
  padding-bottom: 75px;
  border-bottom: solid 1px var(--white-color-opacity-four);
}

.main-footer .footer-contact-box {
  position: relative;
  width: 100%;
}

/* Add vertical line after 1st, and 2nd boxes */
.main-footer .footer-contact-section .footer-contact-box:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  width: 1px;
  height: 100%;
  background-color: var(--white-color-opacity-four);
}

.main-footer .footer-contact-box p {
  text-align: left;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--white-color-opacity-two);
  margin-bottom: 4px;
}

.main-footer .footer-contact-box p i {
  font-size: 18px;
  color: var(--white-color);
  padding-right: 8px;
}

.main-footer .footer-contact-box span a {
  font-size: 18px;
  color: var(--white-color);
}


.main-footer .footer-contact-box .footer-cta {
  position: relative;
  display: inline-block;
  color: var(--white-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

.main-footer .footer-contact-box .footer-cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  /* space below text */
  width: 0;
  height: 1px;
  background-color: var(--white-color);
  transition: width 0.3s ease;
}

.main-footer .footer-contact-box .footer-cta:hover::after {
  width: 100%;
}


/* middle footer */
.main-footer .middle-footer {
  padding: 100px 0;
}

.main-footer .middle-footer .middle-col {
  position: relative;
  width: 100%;
}


/* footer newsletter */
.main-footer .newsletter {
  position: relative;
  padding-top: 50px;
  width: 60%;
}

.main-footer .newsletter h3 {
  margin-bottom: 0;
  color: var(--white-color);
  text-shadow:
    0.4px 0 var(--white-color),
    -0.4px 0 var(--white-color),
    0 0.4px var(--white-color),
    0 -0.4px var(--white-color);
}

.main-footer .newsletter .text p {
  font-size: 18px;
  color: var(--white-color-opacity-two);
}

.main-footer .newsletter-form {
  position: relative;
  margin-top: 30px;
}

.main-footer .newsletter-form .alt-icon {
  position: absolute;
  left: 15px;
  top: 50%;
  margin-top: -15px;
  line-height: 30px;
  font-size: 14px;
  color: var(--white-color);
  font-weight: 400;
  z-index: 1;
  pointer-events: none;
}

.main-footer .newsletter-form input[type="email"] {
  position: relative;
  display: block;
  height: 56px;
  width: 100%;
  font-size: 16px;
  color: var(--white-color);
  line-height: 34px;
  font-weight: 400;
  padding: 10px 20px 10px 40px;
  background-color: var(--white-color-opacity-five);
  border: 1px solid var(--white-color-opacity-five);
  border-radius: 0px;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  transition: all 300ms ease;
}

.main-footer .newsletter-form input[type="email"]:focus {
  border-color: var(--main-color);
}

.main-footer .newsletter-form button {
  position: absolute;
  right: 0;
  top: 0;
  width: 160px;
  height: 56px;
  line-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


/* footer links */
.main-footer .footer-links {
  width: 100%;
}

.main-footer .footer-links h6 {
  color: var(--white-color-opacity-two);
  padding-bottom: 30px;
}

.main-footer .footer-links ul li {
  list-style: none;
  padding: 0 0 10px 0;
}

.main-footer .footer-links ul li a {
  font-size: 18px;
  color: var(--white-color);
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* underline effect */
.main-footer .footer-links ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  /* small space below text */
  width: 0;
  height: 1px;
  background-color: var(--white-color);
  transition: width 0.3s ease;
}

/* expand underline on hover */
.main-footer .footer-links ul li a:hover::after {
  width: 100%;
}



/* footer last */
footer .bottom_footer {
  position: relative;
  padding: 30px 0 0 0;
  border-top: solid 1px var(--white-color-opacity-four);
}


/* footer social media icon */
footer .bottom_footer .bottom-f-section {
  display: flex;
}

footer .bottom_footer .social_media {
  display: flex;
}

/* footer link list */
footer .bottom_footer .social_media li a {
  display: block;
  width: 37px;
  height: 37px;
  text-align: center;
  line-height: 34px;
  font-size: 15px;
  color: var(--white-color);
  border: 1px solid var(--white-color-opacity-four);
  border-radius: 50px;
  margin-right: 10px;
  transition: .4s all;
}

footer .bottom_footer .social_media li a:hover {
  background-color: var(--white-color);
  color: var(--main-color);
}

footer .bottom_footer p {
  color: var(--white-color-opacity-two);
}

footer .bottom_footer .copyright {
  padding: 4px 0 0 30px;
  margin-bottom: 0;
  letter-spacing: normal;
}

footer .bottom_footer .developer_text {
  text-align: left;
  padding-left: 0;
}

footer .bottom_footer .developer_text a {
  position: relative;
  text-decoration: none;
  color: var(--white-color);
  transition: color 0.3s ease;
}


/* Underline animation */
footer .bottom_footer .developer_text a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  /* slight gap below text */
  width: 0;
  height: 1px;
  background-color: var(--white-color);
  transition: width 0.3s ease;
}

/* On hover, show full underline */
footer .bottom_footer .developer_text a:hover::after {
  width: 100%;
}


/* side elements */
.main-footer .side-element .right-side-element {
  position: absolute;
  width: 201px;
  right: 30px;
  top: -250px;
}


/*** 

====================================================================
  Inner page Banner Section
====================================================================

***/

.inner-banner {
  position: relative;
  padding: 150px 0 130px 0;
  background: var(--black-color);
  margin: 130px 50px 0 50px;
  border-radius: 8px;
}

.inner-banner .image-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.70;
  border-radius: 8px;
}

.inner-banner .inner {
  position: relative;
  display: block;
  max-width: 840px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  z-index: 5;
}

.inner-banner .inner .sub_text {
  padding: 0 100px;
}

.inner-banner .inner .subtitle {
  position: relative;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--main-color);
  font-size: 12px;
  letter-spacing: 0.40em;
  margin-bottom: 0px;
}

.inner-banner .inner h1 {
  position: relative;
  text-transform: none;
  line-height: 1.0em;
  margin: 0px 0px;
  display: inline-block;
  vertical-align: top;
  color: var(--white-color);
  text-transform: uppercase;
  text-shadow:
    0.4px 0 var(--white-color),
    -0.4px 0 var(--white-color),
    0 0.4px var(--white-color),
    0 -0.4px var(--white-color);
}

.inner-banner .inner .sub_text p {
  font-size: 20px;
  color: var(--white-color);
  padding-top: 10px;
}

.inner-banner .inner .sub_text .primary-color {
  color: var(--main-color);
}

/* inner page bredcum */
.inner-banner .bredcum {
  list-style: none;
  padding: 10px 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white-color-opacity-two);
}

.inner-banner .bredcum li {
  list-style: none;
  position: relative;
  margin: 0 6px;
}

.inner-banner .bredcum li a {
  font-size: 16px;
  color: var(--white-color-opacity-two);
  text-decoration: none;
  transition: color 0.3s ease;
  position: relative;
  display: inline-block;
}

.inner-banner .bredcum li .active-page {
  color: var(--white-color);
}

.inner-banner .bredcum li a:hover {
  color: var(--white-color);
}

/* create underline animation */
.inner-banner .bredcum li a::after {
  content: "";
  position: absolute;
  bottom: 0px;
  /* space below text */
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--white-color);
  transition: width 0.3s ease;
}

/* animate underline on hover */
.inner-banner .bredcum li a:hover::after {
  width: 100%;
}



/*** 

====================================================================
  About us page
====================================================================

***/

.inner-banner.large {
  position: relative;
  padding: 100px 0 100px 0;
  background: var(--main-color);
}

.inner-banner.large .intro-tagline {
  font-family: var(--font-family-Italiana);
  font-size: 40px;
  letter-spacing: 1px;
  color: var(--white-color);
  line-height: 1.3em;
}

.inner-banner.large .banner-images {
  position: relative;
  width: 100%;
  padding: 70px 100px 0 100px;
  text-align: center;
}

.inner-banner.large .banner-images .pb-img1 {
  transform: rotate(-5deg);
  margin-top: 25px;
}

.inner-banner.large .banner-images .pb-img3 {
  transform: rotate(5deg);
  margin-top: 25px;
}


/* about page banner images animation */

/* ====== Base Setup ====== */
.inner-banner.large .banner-images .pb-img1 img,
.inner-banner.large .banner-images .pb-img2 img,
.inner-banner.large .banner-images .pb-img3 img {
  width: 100%;
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  transition: all 1s ease;
}

/* ====== Page Load Animation ====== */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Animate each image with a small delay */
.inner-banner.large .pb-img1 img {
  animation: fadeUp 1.2s ease forwards 0.4s;
}

.inner-banner.large .pb-img2 img {
  animation: fadeUp 1.2s ease forwards 0.8s;
}

.inner-banner.large .pb-img3 img {
  animation: fadeUp 1.2s ease forwards 0.9s;
}


.inner-banner.large .side-element .left-side-element,
.inner-banner.large .side-element .right-side-element {
  position: absolute;
  width: 150px;
}

.inner-banner.large .side-element .left-side-element {
  left: -30px;
  top: 150px;
}

.inner-banner.large .side-element .right-side-element {
  right: -20px;
  top: 0px;
}


/*** 

====================================================================
  about-intro Section
====================================================================

***/

.about-intro {
  position: relative;
}

.about-intro .text-col {
  position: relative;
}

.about-intro .text-col .inner {
  position: relative;
  display: block;
  text-align: left;
}

.about-intro .title-group {
  display: flex;
  align-items: center;
}

.about-intro .title-box {
  flex-direction: column;
}

.about-intro .title-group .heading-element {
  width: 130px;
  height: auto;
  flex-shrink: 0;
  margin-left: -25px;
}

.about-intro .text-col .text {
  padding-right: 90px;
}

.about-intro .text-col .text p {
  color: var(--text-color-dark);
}

.about-intro .booking-info {
  position: relative;
  display: flex;
  padding-top: 30px;
  gap: 30px;
}

.about-intro .booking-info .bk-title {
  display: flex;
  align-items: center;
  position: relative;
  margin-top: -5px;
  color: var(--white-color);
}

.about-intro .booking-info .bk-title .call-icon {
  transform: rotate(-45deg);
}

.about-intro .booking-info .bk-title i {
  font-size: 35px;
  color: var(--main-color);
}

.about-intro .booking-info .bk-no {
  color: var(--main-color);
  line-height: 1.5em;
  padding-left: 15px;
  position: relative;
  text-decoration: none;
  text-align: left;
}

.about-intro .booking-info .bk-no a {
  color: var(--main-color);
  padding-bottom: 5px;
}

/* underline animation */
.about-intro .booking-info .bk-no::after {
  content: "";
  position: absolute;
  left: 15px;
  /* aligns under phone number text */
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--main-color);
  transition: width 0.4s ease;
}

/* show underline on hover */
.about-intro .booking-info .bk-no:hover::after {
  width: calc(100% - 15px);
}

.about-intro .image-col {
  position: relative;
}

.about-intro .image-col .inner {
  position: relative;
  display: block;
  padding-left: 70px;
}

.about-intro .image-col .images {
  position: relative;
}

.about-intro .image-col .images img {
  position: relative;
  display: block;
  width: 100%;
  z-index: 1;
}

.about-intro .image-col .image {
  position: relative;
  display: inline-block;
}

.about-intro .about-year {
  position: relative;
  display: flex;
  /* make it flexbox */
  align-items: flex-start;
  /* align left */
  gap: 15px;
  color: var(--main-color);
  border-top: solid 1px var(--black-color-opacity-four);
  padding: 40px 0 0 0;
  margin-top: 40px;
}

.about-intro .about-year i {
  font-size: 45px;
  display: block;
}

.about-intro .about-year .year-txt {
  font-size: 60px;
  font-weight: 600;
  padding: 5px 0 0 0px;
}

.about-intro .about-year p {
  font-weight: 500;
  margin-top: -5px;
}

.about-intro .round-stamp-2 {
  position: absolute;
  left: 0px;
  top: 280px;
  width: 148px;
  height: 148px;
  display: flex;
  /* Flexbox added */
  align-items: center;
  /* Vertical centering */
  justify-content: center;
  /* Horizontal centering */
  z-index: 100;
}

.about-intro .round-stamp-2 .stamp_icon {
  position: relative;
  z-index: 100;
}

.about-intro .round-stamp-2:before {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: url(../images/resource/badge-outer.png) no-repeat;
}

.about-intro .text-link-box {
  position: absolute;
  right: 20px;
  margin-top: 20px;
}

.about-intro .round-stamp-2:before {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: url(../images/resource/badge-outer2.png) no-repeat;
}



/*** 

====================================================================
  company overview
====================================================================

***/

.company-overview {
  position: relative;
}

.company-overview .text-col {
  position: relative;
  z-index: 1;
}

.company-overview .text-col .inner-left {
  position: relative;
  display: block;
  text-align: left;
  display: flex;
  flex-direction: column;
  /* stack items vertically */
  justify-content: space-between;
  /* push first element up, last element down */
  height: 100%;
}

.company-overview .text-col .text p {
  color: var(--text-color-dark);
}

.company-overview .text-col .text p span {
  font-weight: 600;
}

.company-overview .about-year {
  margin-top: auto;
  display: grid;
  gap: 20px;

}

.company-overview .about-year i {
  font-size: 45px;
  display: block;
  color: var(--main-color);
}

.company-overview .about-year .year-txt {
  font-size: 50px;
  padding: 0;
  color: var(--text-color-dark);
}

.company-overview .about-year p {
  font-weight: 500;
  margin-top: -5px;
  margin-bottom: 0;
  color: var(--text-color-dark);
}


.company-overview .image-col {
  position: relative;
}

.company-overview .image-col .inner {
  position: relative;
  display: block;
  padding-left: 70px;
}

.company-overview .image-col .images {
  position: relative;
}

.company-overview .image-col .images img {
  position: relative;
  display: block;
  width: 100%;
  z-index: 1;
  border-radius: 400px 250px;
  border: solid 1px var(--white-color);
  -webkit-box-shadow: 8px 8px 0px -3px rgba(47, 41, 36, 1);
  -moz-box-shadow: 8px 8px 0px -3px rgba(47, 41, 36, 1);
  box-shadow: 8px 8px 0px -3px rgba(47, 41, 36, 1);
}

.company-overview .image-col .image {
  position: relative;
  display: inline-block;
}


.company-overview .round-stamp-2 {
  position: absolute;
  left: 20px;
  top: 280px;
  width: 148px;
  height: 148px;
  display: flex;
  /* Flexbox added */
  align-items: center;
  /* Vertical centering */
  justify-content: center;
  /* Horizontal centering */
  z-index: 100;
}

.company-overview .round-stamp-2 .stamp_icon {
  position: relative;
  z-index: 100;
}

.company-overview .round-stamp-2:before {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: url(../images/resource/badge-outer.png) no-repeat;
}


.company-overview .round-stamp-2:before {
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  background: url(../images/resource/badge-outer2.png) no-repeat;
}


/* right colom */
.company-overview .text-col .inner-right {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* pushes booking-info to bottom */
  height: 100%;
  text-align: right;
}


/*  users */
.company-overview .users-thumb {
  margin: 0;
  text-align: right;
}

.company-overview .users-thumb ul {
  display: flex;
  justify-content: flex-end;
  /* aligns all li to the right */
  align-items: center;
  margin: 0 0 20px 0;
  padding: 0;
  text-align: right;
}

.company-overview .users-thumb ul li:not(:first-child) {
  margin-left: -15px;
}

.company-overview .users-thumb ul li img {
  border-radius: 100px;
  border: 3px solid var(--white-color);
}


/* Shake animation for last user image */
.company-overview .users-thumb ul li:last-child img {
  animation: shakeUser 1s ease-in-out infinite;
  transform-origin: center center;
}

/* Keyframes for continuous shake */
@keyframes shakeUser {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(-2px, 0) rotate(-3deg);
  }

  40% {
    transform: translate(2px, 0) rotate(3deg);
  }

  60% {
    transform: translate(-1px, 0) rotate(-2deg);
  }

  80% {
    transform: translate(1px, 0) rotate(2deg);
  }
}


.company-overview .users-thumb .user-number {
  font-size: 50px;
}

.company-overview .users-thumb p {
  font-size: 18px;
}


/* overview section booking info */
.company-overview .booking-info {
  margin-top: auto;
  /* ensures it stays at the bottom */
  display: grid;
  padding-top: 30px;
  text-align: right;
}

.company-overview .booking-info .time-txt,
.location-txt {
  padding-bottom: 15px;
}

.company-overview .booking-info .bk-title {
  position: relative;
  margin-bottom: 40px;
}

.company-overview .booking-info .bk-title .call-icon {
  transform: rotate(-45deg);
}

.company-overview .booking-info .bk-title i {
  color: var(--main-color);
}

.company-overview .booking-info .bk-no {
  color: var(--main-color);
  line-height: 1.5em;
  padding-left: 15px;
  position: relative;
  text-decoration: none;
}

.company-overview .booking-info .bk-no a {
  color: var(--main-color);
  padding-bottom: 5px;
}

/* underline animation */
.company-overview .booking-info .bk-no::after {
  content: "";
  position: absolute;
  left: 15px;
  /* aligns under phone number text */
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--main-color);
  transition: width 0.4s ease;
}

/* show underline on hover */
.company-overview .booking-info .bk-no:hover::after {
  width: calc(100% - 15px);
}

.company-overview .text-link-box {
  position: absolute;
  right: -20px;
  margin-top: -20px;
}



/*** 

====================================================================
  Feature boxes Section
====================================================================

***/

.feature-section {
  position: relative;
}

.feature-section .row {
  padding: 0 20px;
}

.feature-section .auto-container {
  border-top: solid 1px var(--black-color-opacity-four);
}

.feature-section .feature-box {
  position: relative;
  padding: 0 80px 0 0;
  margin-bottom: 40px;
  overflow: hidden;
}

/* Remove margin-bottom for the last 3 boxes */
.feature-section .col-xl-4:nth-last-child(-n+3) .feature-box {
  margin-bottom: 0;
}

/* Base 1px static line */
.feature-section .feature-box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90%;
  height: 1px;
  background: var(--black-color-opacity-four);
}

/* Animated line on hover */
.feature-section .feature-box::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--main-color);
  transition: width 0.5s ease;
}

/* On hover, the 3px line animates left → right */
.feature-section .feature-box:hover::before {
  width: 90%;
}

.feature-section .feature-box .ftr-ttl-group {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding-bottom: 30px;
}

.feature-section .feature-box .ftr-icon {
  width: 50px;
}

.feature-section .feature-box p {
  padding-bottom: 40px;
}


/* side elements */
.feature-section .side-element .left-side-element,
.feature-section .side-element .right-side-element {
  position: absolute;
  width: 150px;
}

.feature-section .side-element .left-side-element {
  left: -30px;
  top: 550px;
}

.feature-section .side-element .right-side-element {
  right: -20px;
  top: 100px;
}

/*** 

====================================================================
  Services Section
====================================================================

***/

.services-section {
  position: relative;
  z-index: 1;
  border-top: solid 1px var(--black-color-opacity-four);
}

.services-section .row {
  display: flex;
  align-items: center;
  /* Vertically center columns */
  flex-wrap: wrap;
  /* Allow wrapping on smaller screens */
}

.services-section .s-col {
  position: relative;
  padding-right: 50px;
}

.services-section .s-col .inner {
  position: relative;
  display: block;
}

.services-section .s-col.last {
  order: 12;
  padding-left: 50px;
  padding-right: 0;
}

.services-section .image-col {
  position: relative;
  order: 5;
}

.services-section .image-col .image-box {
  position: relative;
  display: inline-block;
  text-align: center;
}

.services-section .image-col .image-box img {
  position: relative;
  z-index: 1;
  border-radius: 500px;
}

.services-section .image-col .image-box::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
  border: 1px solid var(--white-color);
  pointer-events: none;
  box-sizing: border-box;
  border-radius: 500px;
  z-index: 100;
}

.services-section .s-block {
  position: relative;
  margin-bottom: 100px;
}

.services-section .s-col .s-block:last-child {
  margin-bottom: 0;
}

.services-section .s-block .inner {
  position: relative;
  display: block;
  min-height: 100px;
}

.services-section .s-block.alternate .inner {
  padding-left: 0;
  text-align: right;
}

.services-section .s-block .icon-box {
  position: absolute;
  left: 0;
  top: 0;
  width: 50px;
  height: 50px;
  text-align: center;
  line-height: 60px;
  transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
}

.services-section .s-block .inner:hover .icon-box {
  transform: rotateY(180deg);
}

.services-section .s-block.alternate .icon-box {
  left: auto;
  right: 0;
}

.services-section .s-block .icon-box img {
  max-height: 80px;
}

.services-section .s-block.alternate h5 {
  padding-top: 5px;
  padding-right: 70px;
  padding-left: 0;
  color: var(--black-color);
}

.services-section .s-block h5 {
  padding-top: 5px;
  padding-right: 0;
  padding-left: 70px;
  color: var(--black-color);
}

.services-section .s-block .text p {
  position: relative;
  color: var(--text-color-light);
  padding-top: 15px;
}


/* side elements */
.services-section .side-element .left-side-element,
.services-section .side-element .right-side-element {
  position: absolute;
  width: 150px;
}

.services-section .side-element .left-side-element {
  left: -30px;
  top: 350px;
}

.services-section .side-element .right-side-element {
  right: -20px;
  top: 50px;
}


/*** 

====================================================================
  Treatment style 1 Section
====================================================================

***/

.treatment-style1 {
  position: relative;
}

.treatment-style1 .treatment-box {
  width: 100%;
  border: solid 1px var(--black-color-opacity-four);
  padding: 50px;
  margin-bottom: 50px;
}

.treatment-style1 .treatment-box:last-child {
  margin-bottom: 0;
}

.treatment-style1 .treatment-box:hover {
  border: solid 1px var(--main-color);
  transition: all ease 0.5s;
  background-color: var(--white-color-opacity-two);
}

.treatment-style1 .treatment-box .treatment-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.treatment-style1 .treatment-box .treatment-ttl {
  position: relative;
  display: flex;
  align-items: flex-start;
}

.treatment-style1 .treatment-box .treatment-ttl img {
  width: 75px;
  margin-top: 8px;
}

.treatment-style1 .treatment-box .treatment-ttl h4 {
  font-size: 35px;
  color: var(--main-color);
  padding-left: 15px;
  text-transform: uppercase;
}

.treatment-style1 .treatment-box .treatment-time {
  position: relative;
  display: grid;
  color: var(--text-color-light);
  font-size: 16px;
  text-align: left;
  border-left: solid 1px var(--black-color-opacity-four);
  padding: 0 0 0 20px;
}

.treatment-style1 .treatment-box .trt-time {
  margin: 0;
}

.treatment-style1 .treatment-box .trt-amount {
  display: grid;
}

.treatment-style1 .treatment-box .trt-amount span {
  font-size: 30px;
  font-weight: 600;
  color: var(--main-color);
}

.treatment-style1 .treatment-box .treatment-desc {
  padding: 30px 0;
}

.treatment-style1 .treatment-box .hook {
  position: relative;
  font-weight: 500;
  padding-left: 20px;
  margin-bottom: 8px;
}

.treatment-style1 .treatment-box .hook::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  transform: translateY(-50%);
  width: 12px;
  /* circle size */
  height: 12px;
  border: 3px solid var(--main-color);
  /* 3px border circle */
  border-radius: 50%;
}

.treatment-style1 .treatment-box .include {
  padding-bottom: 10px;
}

.treatment-style1 .treatment-box .include .includes-ttl {
  font-weight: 600;
}

.treatment-style1 .treatment-box .trt-btn {
  display: flex;
  gap: 20px;
}

.treatment-style1 .treatment-box .treatment-right img {
  border-radius: 500px;
}



/*** 

====================================================================
 Gift Voucher
====================================================================

***/

.voucher-section {
  position: relative;
  border-top: solid 1px var(--black-color-opacity-five);
  border-bottom: solid 1px var(--black-color-opacity-five);
}

.voucher-section .voucher-block .inner-box {
  position: relative;
  background: var(--white-color);
  padding: 12px;
}

.voucher-section .voucher-block .inner-border {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--white-color);
  border: solid 3px var(--main-color);
  padding: 12px;
  gap: 20px;
}

.voucher-section .voucher-block .amount-box {
  position: relative;
  background: var(--main-color);
  text-align: center;
  color: var(--white-color);
  width: 35%;
  padding: 50px 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voucher-section .voucher-block .amount-txt {
  position: relative;
  z-index: 1;
}

/* background image overlay */
.voucher-section .voucher-block .amount-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/resource/leaf-white.svg") center/cover no-repeat;
  opacity: 0.2;
  /* adjust opacity as needed (0.1–0.5) */
  z-index: 0;
  background-size: 150px;
  bottom: -50px;
}

.voucher-section .voucher-block .amount-box p {
  position: relative;
  display: inline-block;
  /* makes width match text */
  font-size: 20px;
  text-transform: uppercase;
  z-index: 100;
  margin: 0 0 12px 0;
  /* spacing before line */
}

.voucher-section .voucher-block .amount-box p::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  /* centers the line under text */
  height: 1px;
  width: 100%;
  /* matches text width since parent is inline-block */
  background: var(--white-color-opacity-two);
}

.voucher-section .voucher-block .amount-box span {
  position: relative;
  display: inline-block;
  font-size: 50px;
  font-weight: 600;
  z-index: 100;
  margin-top: 20px;
}

.voucher-section .voucher-block .content-box {
  text-align: left;
  width: 65%;
  padding: 20px 0 20px 20px;
}

.voucher-section .content-box .fa-gift {
  font-size: 35px;
  color: var(--main-color);
  padding-bottom: 35px;
}

.voucher-section .content-box .voucher-ttl {
  font-family: var(--font-family-Italiana);
  font-size: 40px;
  color: var(--main-color);
  padding-bottom: 5px;
  text-transform: uppercase;
  text-shadow:
    0.4px 0 var(--main-color),
    -0.4px 0 var(--main-color),
    0 0.4px var(--main-color),
    0 -0.4px var(--main-color);
}

.voucher-section .content-box p {
  color: var(--text-color-light);
  margin-bottom: 15px;
}

.voucher-section .voucher-feature ul {
  display: flex;
  align-items: center;
  justify-content: center;
  /* centers horizontally */
  list-style: none;
  margin: 0;
  padding: 30px 0 0 0;
  gap: 20px;
  /* space between items and line */
}

.voucher-section .voucher-feature ul li {
  position: relative;
  color: var(--text-color-dark);
  display: flex;
  align-items: center;
  gap: 8px;
  /* space between icon and text */
  padding: 0 30px 0 10px;
}

/* vertical divider line between list items */
.voucher-section .voucher-feature ul li:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 20px;
  /* line height */
  background-color: var(--black-color-opacity-three);
}

.voucher-section .voucher-feature ul li i {
  color: var(--main-color);
  font-size: 18px;
}

/* side elements */
.voucher-section .side-element .left-side-element,
.voucher-section .side-element .right-side-element {
  position: absolute;
  width: 150px;
}

.voucher-section .side-element .left-side-element {
  left: -30px;
  top: 200px;
}

.voucher-section .side-element .right-side-element {
  right: -20px;
  top: 0;
}



/*** 

====================================================================
  Treatment accrodian style 
====================================================================

***/

.treatment-accord-style .card {
  background-color: inherit;
  border: solid 1px var(--black-color-opacity-four) !important;
  margin-bottom: 30px;
  border-radius: 0;
}

.treatment-accord-style .card .card-header {
  padding: 30px 50px;
  border: 0;
}

.card-header {
  background-color: inherit;
}

.treatment-accord-style .card .card-header button {
  width: 100%;
  text-align: left;
  color: var(--main-color);
  text-decoration: none;
  padding: 0;
  position: relative;
  padding-right: 30px;
  font-size: 21px;
}

.treatment-accord-style .accord-ttl-group {
  display: flex;
  gap: 20px;
}

.treatment-accord-style .accord-ttl-group .accord-ttl {
  display: grid;
}

.treatment-accord-style .accord-ttl-group .trt-icon {
  object-fit: contain;
}

.treatment-accord-style .accord-ttl-group .trt-ttl {
  font-family: var(--font-family-Italiana);
  font-size: 35px;
  text-transform: uppercase;
  text-shadow:
    0.4px 0 var(--main-color),
    -0.4px 0 var(--main-color),
    0 0.4px var(--main-color),
    0 -0.4px var(--main-color);
}

.treatment-accord-style .accord-ttl-group .trt-ttl span {
  position: relative;
  font-family: var(--font-family-jost);
  font-size: 14px;
  text-transform: uppercase;
  background-color: var(--white-color);
  border: solid 1px var(--main-color);
  padding: 3px 12px;
  border-radius: 100px;
  top: -3px;
}

.treatment-accord-style .accord-ttl-group .sub-text {
  font-size: 18px;
  color: var(--text-color-dark);
}


.treatment-accord-style .card .card-header button.collapsed {
  color: var(--main-color);
}

.treatment-accord-style .card .card-header button:focus {
  outline: none;
  box-shadow: none;
}

.treatment-accord-style .card .card-header button .icons i {
  position: absolute;
  right: 0;
  top: 35%;
  color: var(--text-color-light);
}

.treatment-accord-style .card .card-header button.collapsed .icons .fa-minus,
.treatment-accord-style .card .card-header button .icons .fa-plus {
  display: none;
}

.treatment-accord-style .card .card-header button .icons .fa-minus,
.treatment-accord-style .card .card-header button.collapsed .icons .fa-plus {
  display: block;
}

.treatment-accord-style .card .card-body {
  padding: 50px 0;
  margin: 0 50px;
  border-top: solid 1px var(--black-color-opacity-four);
}

.treatment-accord-style .card .card-body .trt-inner {
  display: flex;
  gap: 100px;
  align-items: center;
}

/* treatment card left */
.treatment-accord-style .card-body .trt-left,
.treatment-accord-style .card-body .trt-right {
  width: calc(50% - 50px);
}

.treatment-accord-style .spa-price-list {
  width: 100%;
  padding: 20px 0 40px 0;
}

.treatment-accord-style .spa-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--black-color-opacity-four);
}

.treatment-accord-style .spa-title {
  font-size: 18px;
  color: var(--text-color-dark);
}

.treatment-accord-style .spa-price {
  font-size: 18px;
  color: var(--main-color);
  font-weight: 600;
}

.treatment-accord-style .spa-price small {
  font-size: 16px;
  color: var(--text-color-dark);
}

.treatment-accord-style .btn-grp {
  display: flex;
  gap: 20px;
}

/* treatment card right */
.treatment-accord-style .card-body .trt-right {
  position: relative;
}

.treatment-accord-style .trt-review {
  width: 100%;
  padding-top: 30px;
  border-top: solid 1px var(--black-color-opacity-four);
  margin-top: 50px;
}

.treatment-accord-style .trt-review span {
  color: var(--orange-color);
  letter-spacing: -1px;
  font-size: 14px;
  margin-right: 12px;
}


/*  accordian image slider */
.treatment-accord-style .trt-slider-box {
  position: relative;
  max-width: 600px;
  width: 100%;
}

.treatment-accord-style .image-slider .owl-theme .trt-slider-box {
  margin-bottom: 0;
}

.treatment-accord-style .trt-slider-box .inner-box {
  position: relative;
  display: block;
  text-align: center;
}

.treatment-accord-style .trt-slider-box .inner-box img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  border-radius: 500px;
}

.trt-slider-box .overlay-text {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--white-color-opacity-two);
  padding: 3px 20px;
  border-radius: 200px;
  font-size: 16px;
  color: var(--black-color);
  text-align: center;

  backdrop-filter: blur(3px);
  pointer-events: none;
  /* overlay doesn't block slider */
}


.treatment-accord-style .owl-theme .owl-nav {
  position: absolute;
  left: 0;
  right: 0px;
  height: 0;
  top: 50%;
  margin-top: -35px;
}

.treatment-accord-style .owl-theme .owl-nav .owl-next,
.treatment-accord-style .owl-theme .owl-nav .owl-prev {
  position: absolute;
  top: 50%;
  display: inline-block;
  vertical-align: top;
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 24px;
  text-align: center;
  background: transparent;
  color: var(--main-color);
  border-radius: 0%;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

.treatment-accord-style .owl-theme .owl-nav .owl-next span,
.treatment-accord-style .owl-theme .owl-nav .owl-prev span {
  position: relative;
  z-index: 1;
}

.treatment-accord-style .owl-theme .owl-nav .owl-next:before,
.treatment-accord-style .owl-theme .owl-nav .owl-prev:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--black-color-opacity-four);
  background-color: var(--white-color);
  border-radius: 100px;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

.treatment-accord-style .owl-theme .owl-nav .owl-next {
  right: 15px;
}

.treatment-accord-style .owl-theme .owl-nav .owl-prev {
  left: 15px;
}

.treatment-accord-style .owl-theme .owl-nav .owl-next:hover,
.treatment-accord-style .owl-theme .owl-nav .owl-prev:hover {
  color: var(--white-color);
}

.treatment-accord-style .owl-theme .owl-nav .owl-next:hover:before,
.treatment-accord-style .owl-theme .owl-nav .owl-prev:hover:before {
  background: var(--main-color);
}



/*** 

====================================================================
  Membership plan with toggle button
====================================================================

***/


/* pricing wraper  */
.pricing_section .toggle_block {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* pricing toggle button */
.pricing_section .toggle_block span {
  color: var(--text-color-light);
  display: block;
  margin: 0 5px;
}

.tog_btn.month_active {
  left: 35px !important;
}

.pricing_section .toggle_block span.deactive {
  color: var(--body-text-purple);
}

.pricing_section .toggle_block .offer {
  background-color: var(--white-color);
  border-radius: 5px;
  padding: 0 10px;
  font-weight: 400;
  font-size: 14px;
  line-height: 2em;
  color: var(--main-color);
}

.pricing_section .toggle_block .tog_block {
  width: 70px;
  height: 35px;
  background-color: var(--white-color);
  border: solid 1px var(--black-color-opacity-four);
  border-radius: 18px;
  margin: 0 10px;
  position: relative;
  cursor: pointer;
}

.pricing_section .toggle_block .tog_block .tog_btn {
  height: 23px;
  width: 23px;
  border-radius: 25px;
  display: block;
  background-color: var(--main-color);
  position: absolute;
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  transition: .4s all;
}

.pricing_section .toggle_block .month.active,
.pricing_section .toggle_block .years.active {
  color: var(--main-color);
  font-weight: 500;
}

/* pricing pannel */
.pricing_section .pricing_pannel {
  margin-top: 20px;
  display: none;
}

.pricing_section .pricing_pannel.active {
  display: block;
}

.pricing_section .pricing_pannel .pricing_block {
  text-align: left;
  background-color: var(--white-color-opacity-three);
  margin-bottom: 40px;
  border: solid 1px var(--black-color-opacity-four);
}

.pricing_section .pricing_pannel .pricing_inner {
  padding: 60px 50px;
}

.pricing_section .pricing_pannel .pricing_inner .pkg_name h4 {
  text-transform: uppercase;
}

.pricing_section .pricing_pannel .pricing_block.highlited_block {
  background-color: var(--main-color);
}

.pricing_section .pricing_pannel .pricing_block .popular-pkg {
  background-color: var(--white-color);
  color: var(--main-color);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 0 3px 0;
}

.pricing_section .pricing_pannel .pricing_block .popular-pkg i {
  font-size: 16px;
}

.pricing_section .pricing_pannel .pricing_block.highlited_block,
.pricing_section .pricing_pannel .pricing_block.highlited_block h4,
.pricing_section .pricing_pannel .pricing_block.highlited_block .price,
.pricing_section .pricing_pannel .pricing_block.highlited_block .price span,
.pricing_section .pricing_pannel .pricing_block.highlited_block .pkg_name span {
  color: var(--white-color);
}

.pricing_section .pricing_pannel .pricing_block.highlited_block .price {
  border-bottom: solid 1px var(--white-color-opacity-three);
}

.pricing_section .pricing_pannel .pricing_block .price {
  font-size: 40px;
  color: var(--main-color);
  margin: 10px 0 0 0;
  padding-bottom: 20px;
  display: block;
  font-weight: 600;
  border-bottom: solid 1px var(--black-color-opacity-three);
}

.pricing_section .pricing_pannel .pricing_block .price span {
  font-size: 18px;
  color: var(--main-color);
  font-weight: normal;
}

/* pricing box list */
.pricing_section .pricing_pannel .pricing_block .benifits {
  margin: 30px 0;
}

.pricing_section .pricing_pannel .pricing_block .benifits li {
  margin-bottom: 15px;
  line-height: 1.5em;
  position: relative;
  padding-left: 25px;
}

.pricing_section .pricing_pannel .pricing_block .benifits li i {
  position: absolute;
  left: 0;
  top: 0.20em;
}

.pricing_section .pkg-cta {
  text-align: center;
  margin-bottom: 0;
  font-size: 20px;
}

.pricing_section .pkg-cta a {
  color: var(--main-color);
  position: relative;
  font-weight: 500;
  text-decoration: none;
  padding-bottom: 3px;
  /* space between text & underline */
}

/* Half underline (default) */
.pricing_section .pkg-cta a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  /* HALF LINE */
  height: 1px;
  background-color: var(--main-color);
  transition: width 0.4s ease;
  /* animation */
}

/* Full underline on hover */
.pricing_section .pkg-cta a:hover::after {
  width: 100%;
  /* FULL LINE */
}



/*** 

====================================================================
  Service Category
====================================================================

***/

.menu-cat {
  position: relative;
}

.menu-cat .menucat-list {
  display: flex;
  position: relative;
  width: 100%;
  border-top: solid 1px var(--black-color-opacity-three);
  padding: 40px 0;
  margin-left: 15px;
  margin-right: 15px;
  align-items: center;

  transition: background 1s ease-in-out, padding 0.5s ease-in-out;
  /* Or background-color 0.5s if you also want to animate background-color */
  background-size: 0;
  /* Start with no visible background */
  background-position: center;
  background-repeat: no-repeat;
}

.menu-cat .menucat-list:last-child {
  border-top: solid 1px var(--black-color-opacity-three);
  border-bottom: solid 1px var(--black-color-opacity-three);
}

.menu-cat .menucat-list .data-colom {
  align-items: center;
  width: 100%;
  /* ensure it uses full available width */
  padding-right: 80px;
  padding-left: 0;
}

.menu-cat .menucat-list .data-colom p {
  color: var(--text-color-light);
  padding-top: 10px;
}

.menu-cat .menucat-list .price-colom {
  text-align: center;
}

.menu-cat .menucat-list .price-colom p {
  border: solid 1px var(--main-color);
  border-radius: 100px;
  text-align: center;
  padding: 10px 30px;
  display: inline-block;
}

.menu-cat .menucat-list .price-colom span {
  font-size: 20px;
  font-weight: 700;
}

.menu-cat .menucat-list .image-box {
  text-align: center;
}

.menu-cat .menucat-list .image-box img {
  border-radius: 300px;
}

.menu-cat .menucat-list:hover .cta-btn a {
  color: var(--white-color);
  border: solid 1px var(--white-color);
  transform: rotate(360deg);
  margin-left: -20px;
}

.menu-cat .menucat-list:hover .data-colom {
  padding-left: 50px;
  padding-right: 0px;
}

.menu-cat .menucat-list:hover .title-box h3,
.menu-cat .menucat-list:hover .data-colom p {
  color: var(--white-color);
}

.menu-cat .menucat-list:hover .price-colom p {
  color: var(--white-color);
  border: solid 1px var(--white-color);
}

.menu-cat .menucat-list:hover .image-box img {
  display: none;
}

.menu-cat .menucat-list:hover {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 80px 0;
}

.menu-cat .menucat-list.menubg1:hover {
  background: url(../images/background/treatment1.jpg) no-repeat;
}

.menu-cat .menucat-list.menubg2:hover {
  background: url(../images/background/treatment2.jpg) no-repeat;
}

.menu-cat .menucat-list.menubg3:hover {
  background: url(../images/background/treatment3.jpg) no-repeat;
}

.menu-cat .menucat-list.menubg4:hover {
  background: url(../images/background/treatment4.jpg) no-repeat;
}

.menu-cat .menucat-list .title-box h3 {
  position: relative;
  text-align: left;
}

.menu-cat .menucat-list .title-box {
  position: relative;
  padding-bottom: 0;
}

.menu-cat .menucat-list .cta-btn {
  position: relative;
  text-align: right;
}

.menu-cat .menucat-list .cta-btn a {
  font-family: var(--font-family-jost);
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  position: relative;
  color: var(--main-color);
  line-height: 16px;
  border-radius: 200px;
  border: solid 1px var(--main-color);
  padding: 30px 0;
  width: 100px;
  height: 100px;
  display: inline-block;
}

.menu-cat .menucat-list .cta-btn a:hover {
  color: var(--main-color);
  background-color: var(--white-color);
  border: none;
  transform: rotate(-360deg);
}



/* side elements */
.side-element {
  position: relative;
  width: 100%;
}

.menu-cat .side-element .left-side-element,
.menu-cat .side-element .right-side-element {
  position: absolute;
  width: 150px;
}

.menu-cat .side-element .left-side-element {
  left: -30px;
  top: 550px;
}

.menu-cat .side-element .right-side-element {
  right: -20px;
  top: 300px;
}


/*** 

====================================================================
  Offer banner
====================================================================

***/

.offer-banner {
  position: relative;
  width: 100%;
}

.offer-banner .offer-box {
  position: relative;
  border: dashed 1px var(--main-color);
  padding: 25px;
}

.offer-banner .offer-box-inner {
  background-color: var(--main-color);
}

/* background image overlay */
.offer-banner .offer-box-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../images/background/offerbg.jpg") center/cover no-repeat;
  opacity: 0.20;
  /* adjust opacity as needed (0.1–0.5) */
  z-index: 0;
  background-size: cover;
  margin: 25px;
}

.offer-banner .offer-data {
  display: flex;
  align-items: center;
  padding: 40px;
}

.offer-banner .offer-ttl {
  display: flex;
  align-items: center;
  gap: 15px;
}

.offer-banner .offer-ttl .icon {
  flex: 0 0 auto;
  /* prevent shrinking or stretching */
  display: flex;
  align-items: center;
}

.offer-banner .offer-ttl .icon img {
  width: 129px;
  height: auto;
  /* maintain aspect ratio */
  display: block;
  /* removes inline gap below image */
}

.offer-banner .offer-data h2 {
  padding-left: 20px;
  padding-bottom: 0;
  margin: 0;
}

.offer-banner .offer-number {
  font-size: 50px;
  color: var(--main-color);
  text-align: center;
  background: url("../images/background/body-pattern.png") repeat;
  border-radius: 100%;
  padding: 10px;
  text-transform: uppercase;
  z-index: 100;
  width: 155px;
  height: 155px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.offer-banner .offer-number span {
  font-size: 25px;
  color: var(--main-color);
}

.offer-banner .links-box {
  text-align: right;
}

.offer-banner .rolling-text {
  position: relative;
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  font-size: 18px;
  text-transform: uppercase;
  color: var(--white-color);
  border-top: solid 1px var(--white-color);
  padding: 10px 0;
}

.offer-banner .rolling-text .text {
  flex-shrink: 0;
  display: inline-block;
  min-width: 100%;
  animation: scrollLoop 20s linear infinite;
}

/* Continuous scroll loop — no gap */
@keyframes scrollLoop {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}



/*** 

====================================================================
  Testimonials two Section
====================================================================

***/

.testimonials-two {
  position: relative;
  border-top: solid 1px var(--black-color-opacity-five);
}

.special-offer .carousel-box {
  position: relative;
}

.testimonials-two .testi-block {
  position: relative;
}

.testimonials-two .testi-block .inner-box {
  position: relative;
  padding: 40px;
  background: var(--body-bg);
  text-align: left;
  border: solid 1px var(--black-color-opacity-three);
}

.testimonials-two .testi-block .rating {
  position: relative;
  font-size: 12px;
  color: var(--orange-color);
  letter-spacing: 1px;
  line-height: 20px;
  margin-bottom: 20px;
}

.testimonials-two .testi-block .text p {
  position: relative;
  line-height: 1.5em;
  margin-bottom: 0;
  color: var(--text-color-dark);
}

.testimonials-two .testi-block .auth-info {
  display: flex;
  flex-direction: row;
  /* side by side */
  align-items: center;
  /* vertically center */
  justify-content: left;
  /* horizontally center inside parent */
  text-align: left;
  /* text aligns naturally */
  gap: 20px;
  /* space between image and text */
  background-color: var(--white-color);
  border: solid 1px var(--black-color-opacity-three);
  border-top: none;
  padding: 25px 40px;
}

.testimonials-two .testi-block .auth-info .auth-title {
  position: relative;
  text-transform: uppercase;
  color: var(--main-color);
  font-size: 16px;
  font-weight: 500;
  padding-top: 0;
}

.testimonials-two .testi-block .auth-info .treatment {
  display: block;
  position: relative;
  text-transform: capitalize;
  letter-spacing: normal;
  font-weight: normal;
  margin-top: -6px;
  color: var(--black-color-opacity-two);
}

.testimonials-two .testi-block .auth-info .image {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonials-two .testi-block .auth-info .image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.testimonials-two .owl-theme .owl-dots {
  display: block;
  text-align: center;
  margin-top: 20px;
}

.testimonials-two .owl-theme .owl-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: solid 1px var(--main-color);
  border-radius: 50%;
  margin: 0 4px;
  transition: background 0.3s ease;
}

.testimonials-two .owl-theme .owl-dot.active {
  background: var(--main-color);
  /* active dot color */
}

.testimonials-two .owl-theme .owl-nav {
  position: absolute;
  left: -100px;
  right: -100px;
  height: 0;
  top: 50%;
  margin-top: -22px;
}

.testimonials-two .owl-theme .owl-nav .owl-next,
.testimonials-two .owl-theme .owl-nav .owl-prev {
  position: absolute;
  top: 50%;
  display: inline-block;
  vertical-align: top;
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 24px;
  text-align: center;
  background: transparent;
  color: var(--main-color);
  border-radius: 0%;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

.testimonials-two .owl-theme .owl-nav .owl-next span,
.testimonials-two .owl-theme .owl-nav .owl-prev span {
  position: relative;
  z-index: 1;
}

.testimonials-two .owl-theme .owl-nav .owl-next:before,
.testimonials-two .owl-theme .owl-nav .owl-prev:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid var(--main-color);
  border-radius: 200px;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

.testimonials-two .owl-theme .owl-nav .owl-next {
  right: 15px;
}

.testimonials-two .owl-theme .owl-nav .owl-prev {
  left: 15px;
}

.testimonials-two .owl-theme .owl-nav .owl-next:hover,
.testimonials-two .owl-theme .owl-nav .owl-prev:hover {
  color: var(--white-color);
}

.testimonials-two .owl-theme .owl-nav .owl-next:hover:before,
.testimonials-two .owl-theme .owl-nav .owl-prev:hover:before {
  background: var(--main-color);
}


/* side elements */
.testimonials-two .side-element .left-side-element,
.testimonials-two .side-element .right-side-element {
  position: absolute;
  width: 150px;
}

.testimonials-two .side-element .left-side-element {
  left: -30px;
  top: 300px;
}

.testimonials-two .side-element .right-side-element {
  right: -20px;
  top: 0;
}



/*** 

====================================================================
  Testimonials page - masonry style
====================================================================

***/

.testimonial-infomain {
  position: relative;
}

.testimonial-infomain .tinfo-block {
  position: relative;
  padding-right: 50px;
}

.testimonial-infomain .rting-box {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 50px;
  gap: 15px;
}

.testimonial-infomain .rting-box::before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--black-color-opacity-four);
  order: 1;
}

.testimonial-infomain .rting-box .rnumber-group {
  display: flex;
  gap: 15px;
  align-items: center;
  order: 0;
}

.testimonial-infomain .rting-box .rnumber-group span {
  font-size: 55px;
  text-align: left;
  color: var(--main-color);
  font-weight: 600;
}

.testimonial-infomain .rting-box .rnumber-group p {
  font-size: 18px;
}

.testimonial-infomain .rting-box .rating-logo {
  display: flex;
  gap: 20px;
  align-items: center;
  order: 2;
}

.testimonial-infomain .rting-box .rating-logo a {
  opacity: 0.5;
}

.testimonial-infomain .rting-box .rating-logo a:hover {
  opacity: 10;
}

.testimonial-infomain .tdesc-block {
  padding-left: 100px;
}

.testimonial-infomain .tdesc-block .satisfy-row {
  display: flex;
  gap: 15px;
  color: var(--main-color);
  padding-bottom: 40px;
}

.testimonial-infomain .tdesc-block .satisfy-group span {
  font-size: 55px;
  font-weight: 600;
}

.testimonial-infomain .tdesc-block .satisfy-row img {
  width: auto;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  align-self: center;
}

/* Shake animation for last user image */
.testimonial-infomain .tdesc-block .satisfy-row img {
  animation: shakeUser 1s ease-in-out infinite;
  transform-origin: center center;
}

.testimonial-infomain .tdesc-block ul {
  position: relative;
}

.testimonial-infomain .tdesc-block ul li {
  list-style: none;
  padding-bottom: 15px;
}

.testimonial-infomain .tdesc-block ul li i {
  color: var(--main-color);
}

.testimonial-infomain .tdesc-block .link-box {
  margin-top: 30px;
}

.testimonials-masonry {
  position: relative;
}

.testimonials-masonry .google_rating .rate_link img {
  height: 25px;
  margin-right: 5px;
}

.testimonials-masonry .google_rating:hover .star {
  border: solid 1px var(--main-color);
  background-color: var(--main-color);
  color: var(--white-color);
  transition: all ease .3s;
}

.testimonials-masonry .testimonial-boxlist {
  column-count: 3;
  column-gap: 30px;
  /* space between the columns */
}

.testimonials-masonry .testimonial-boxlist .testi-block {
  display: inline-block;
  width: 100%;
  margin-bottom: 30px;
  /* vertical spacing between boxes */
}

.testimonials-masonry .testi-block {
  position: relative;
}

.testimonials-masonry .testi-block .inner-box {
  position: relative;
  padding: 40px;
  text-align: left;
  border: solid 1px var(--black-color-opacity-three);
}

.testimonials-masonry .testi-block .rating {
  position: relative;
  font-size: 12px;
  color: var(--orange-color);
  letter-spacing: 1px;
  line-height: 20px;
  margin-bottom: 20px;
}

.testimonials-masonry .testi-block .text {
  position: relative;
  line-height: 1.5em;
}

.testimonials-masonry .testi-block .auth-info {
  display: flex;
  flex-direction: row;
  /* side by side */
  align-items: center;
  /* vertically center */
  justify-content: left;
  /* horizontally center inside parent */
  text-align: left;
  /* text aligns naturally */
  gap: 20px;
  /* space between image and text */
  background-color: var(--white-color-opacity-two);
  padding: 25px 40px;
  border: solid 1px var(--black-color-opacity-three);
  border-top: none;
}

.testimonials-masonry .testi-block .auth-info .auth-title {
  position: relative;
  text-transform: uppercase;
  color: var(--main-color);
  font-size: 16px;
  font-weight: 500;
  padding-top: 0;
}

.testimonials-masonry .testi-block .auth-info .location {
  display: block;
  position: relative;
  text-transform: capitalize;
  letter-spacing: normal;
  font-weight: normal;
  margin-top: 0;
  line-height: 1.2em;
  color: var(--black-color-opacity-two);
}

.testimonials-masonry .testi-block .auth-info .image {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonials-masonry .testi-block .auth-info .image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}


/*** 

====================================================================
  Why Us Two Section
====================================================================

***/

.why-us-two {
  position: relative;
}

.why-block-two {
  position: relative;
  margin-bottom: 30px;
}

.why-block-two .inner-box {
  position: relative;
  display: block;
  text-align: center;
}

.why-block-two .image-box {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 500px 500px;
}

.why-block-two .inner-box:hover .image-box img {
  opacity: 0.70;
  /*transform:scale(1.05,1.05);*/
}

.why-block-two .image-box img {
  position: relative;
  display: block;
  width: 100%;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
  border-radius: 500px;
}

.why-block-two .image-box::after {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: block;
  content: '';
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, .2);
  border-radius: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0;
}

.why-block-two .inner-box:hover .image-box::after {
  -webkit-animation: circle .95s;
  animation: circle .95s;
  border-radius: 500px;
}

.why-block-two .over-box {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 100%;
  padding: 0 30px 30px 30px;
  z-index: 3;
}

.why-block-two .image-box:before {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 150px;
  background: rgba(0, 0, 0, 0.70);
  background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.05));
  background: -ms-linear-gradient(bottom, rgba(0, 0, 0, 0.95), rgba(0, 0, 0, 0.80), rgba(0, 0, 0, 0.05));
  z-index: 1;
  border-radius: 0 0 500px 500px;
}

.why-block-two h5 {
  position: relative;
  color: var(--white-color);
}

.why-block-two .text {
  position: relative;
  font-size: 14px;
  color: var(--main-color);
}


/* side elements */
.why-us-two .side-element .left-side-element,
.why-us-two .side-element .right-side-element {
  position: absolute;
  width: 150px;
}

.why-us-two .side-element .left-side-element {
  left: -30px;
  top: 450px;
}

.why-us-two .side-element .right-side-element {
  right: -20px;
  top: 100px;
}

.fact-counter {
  position: relative;
  padding-top: 100px;
}

.fact-counter .fact-block .inner .fact-count {
  font-family: var(--font-family-jost);
  font-size: 55px;
  font-weight: 600;
  padding-bottom: 20px;
  color: var(--white-color);
}

/* Add vertical line after 1st, 2nd, and 3rd boxes */
.fact-counter .fact-block:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  width: 1px;
  height: 100%;
  background-color: var(--white-color-opacity-three);
}

.fact-counter .fact-block .inner .fact-title {
  font-size: 18px;
  color: var(--white-color);
  text-transform: capitalize;
}

.fact-counter .fact-block .inner p {
  color: var(--color-three);
  padding-right: 25px;
  padding-top: 15px;
}


/*  fact-counter option 2 - common css from above */
.fact-counter.option2 {
  position: relative;
  padding: 60px 0;
  border-bottom: solid 1px var(--black-color-opacity-four);
}

.fact-counter.option2 .fact-block .inner .fact-count {
  color: var(--main-color);
}

.fact-counter.option2 .fact-block .inner .fact-title {
  color: var(--text-color-dark);
}

/* Add vertical line after 1st, 2nd, and 3rd boxes */
.fact-counter.option2 .fact-block:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -10px;
  right: 20px;
  width: 1px;
  height: 100%;
  background-color: var(--black-color-opacity-four);
}


/*  fact-counter option 3 - common css from above */
.fact-counter.option3 {
  padding-top: 50px;
}

.fact-counter.option3 .fact-block .inner .fact-count {
  color: var(--black-color);
  text-align: center;
}

.fact-counter.option3 .fact-block .inner .fact-title {
  color: var(--text-color-dark);
  text-align: center;
}

/* Add vertical line after 1st, 2nd, and 3rd boxes */
.fact-counter.option3 .fact-block:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -5px;
  right: 0px;
  width: 1px;
  height: 100%;
  background-color: var(--black-color-opacity-four);
}

.fact-counter.option3 .fact-block .inner .fact-img {
  display: block;
  text-align: center;
  margin: 0 auto;
  padding-bottom: 30px;
}


/*** 

====================================================================
  Why Us THREE Section
====================================================================

***/

.why-us-three {
  position: relative;
  border-top: solid 1px var(--black-color-opacity-five);
}

/* main box */
.why-us-three .care-box {
  position: relative;
  border-radius: 180px;
  border: 1px solid var(--main-color);
  text-align: center;
  padding: 80px 30px;
  overflow: hidden;
}

/* hover bg image */
.why-us-three .care-box::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg) center/cover no-repeat;
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: 0;
}

/* icon */
.why-us-three .care-icon {
  width: 115px;
  height: 115px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 60px;
  position: relative;
  z-index: 2;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* title */
.why-us-three .care-box h4 {
  font-family: var(--font-family-Italiana);
  line-height: 1.2;
  z-index: 2;
}

/* hover effects */
.why-us-three .care-box:hover::after {
  opacity: 1;
}

.why-us-three .care-box:hover .care-icon {
  opacity: 0;
  transform: scale(0.8);
}

.why-us-three .care-box:hover h4 {
  color: var(--white-color);
}


/*** 

====================================================================
  Brand Logos Section
====================================================================

***/

.brand-logos {
  position: relative;
  border-bottom: solid 1px var(--black-color-opacity-five);
}

.brand-logos .brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.brand-logos .brand-item {
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;

  border-right: 1px solid var(--black-color-opacity-four);
  border-bottom: 1px solid var(--black-color-opacity-four);
}

/* remove right border on last column */
.brand-logos .brand-item:nth-child(4n) {
  border-right: none;
}

/* remove bottom border on last row */
.brand-logos .brand-item:nth-last-child(-n + 4) {
  border-bottom: none;
}

/* logo images */
.brand-logos .brand-item img {
  max-width: 150px;
  max-height: 60px;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.brand-logos .brand-item:hover img {
  opacity: 1;
  transform: scale(1.05);
}



/*** 

====================================================================
  Image Gallery Section
====================================================================

***/

.image-gallery {
  position: relative;
  overflow: hidden;
}

.image-gallery.abt-page-2 {
  border-top: solid 1px var(--black-color-opacity-four);
}

.image-gallery .carousel-box {
  position: relative;
}

.image-gallery .auto-container {
  max-width: 860px;
}

.image-gallery .image-gallery-slider {
  position: static;
}

.image-gallery .image-gallery-slider .owl-stage-outer {
  overflow: visible;
}

.image-gallery .gallery-block {
  position: relative;
  text-align: center;
}

.image-gallery .gallery-block .image {
  position: relative;
}

.image-gallery .gallery-block .image img {
  position: relative;
  display: block;
  width: 100%;
}

.image-gallery .gallery-block .caption {
  margin-top: 15px;
  font-size: 20px;
  color: var(--black-color);
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

/* Optional hover effect for caption */
.image-gallery .gallery-block:hover .caption {
  transform: translateY(-3px);
}

.image-gallery .owl-theme .owl-dots {
  display: none;
}

.image-gallery .owl-theme .owl-nav {
  position: absolute;
  left: 20px;
  right: 20px;
  height: 0;
  top: 50%;
}

.image-gallery .owl-theme .owl-nav .owl-next,
.image-gallery .owl-theme .owl-nav .owl-prev {
  position: absolute;
  top: 50%;
  display: inline-block;
  vertical-align: top;
  width: 44px;
  height: 44px;
  line-height: 44px;
  font-size: 24px;
  text-align: center;
  background: transparent;
  color: var(--main-color);
  border-radius: 0%;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

.image-gallery .owl-theme .owl-nav .owl-next span,
.image-gallery .owl-theme .owl-nav .owl-prev span {
  position: relative;
  z-index: 1;
}

.image-gallery .owl-theme .owl-nav .owl-next:before,
.image-gallery .owl-theme .owl-nav .owl-prev:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--white-color-opacity-two);
  border: 1px solid var(--main-color);
  border-radius: 100px;
  -webkit-transition: all 400ms ease;
  -moz-transition: all 400ms ease;
  -ms-transition: all 400ms ease;
  -o-transition: all 400ms ease;
  transition: all 400ms ease;
}

.image-gallery .owl-theme .owl-nav .owl-next {
  right: 15px;
}

.image-gallery .owl-theme .owl-nav .owl-prev {
  left: 15px;
}

.image-gallery .owl-theme .owl-nav .owl-next:hover,
.image-gallery .owl-theme .owl-nav .owl-prev:hover {
  color: var(--black-color);
}

.image-gallery .owl-theme .owl-nav .owl-next:hover:before,
.image-gallery .owl-theme .owl-nav .owl-prev:hover:before {
  background: var(--main-color);
}


.image-gallery .link-box {
  text-align: center;
  margin: 40px 0 0 0;
}

/*** 

====================================================================
  Treatment block style
====================================================================

***/

.treatment-block {
  position: relative;
  overflow: hidden;
}

.treatment-block .row {
  display: flex;
  align-items: center;
  /* vertically centers both columns */
  flex-wrap: wrap;
  /* keeps layout responsive */
}

.treatment-block .image-col {
  position: relative;
}

.treatment-block.alternate .image-col {
  order: 12;
}

.treatment-block .image-col .inner {
  position: relative;
  display: block;
  padding: 0;
}

.treatment-block.alternate .image-col .vertical-title {
  position: absolute;
  top: auto;
  right: 30px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;

  font-size: 130px;
  text-transform: uppercase;
  color: var(--main-color);
  font-family: var(--font-family-Italiana);
  white-space: nowrap;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}

.treatment-block .image-col .vertical-title {
  position: absolute;
  top: 103%;
  left: 30px;
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: left center;

  font-size: 130px;
  text-transform: uppercase;
  color: var(--main-color);
  font-family: var(--font-family-Italiana);
  white-space: nowrap;
  line-height: 1;
  z-index: 2;
  pointer-events: none;
}

.treatment-block.alternate .image-col .image {
  /*margin-right: 100px;*/
  margin-left: 20px;
}

.treatment-block .image-col .image {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.treatment-block .image-col .image img {
  display: block;
  border-radius: 300px 300px 0 0;
  position: relative;
  z-index: 1;
}

.treatment-block .trt-col {
  position: relative;
  padding-left: 100px;
  padding-right: 15px;
}

.treatment-block.alternate .trt-col {
  order: 0;
  padding-right: 100px;
  padding-left: 15px;
}


.treatment-block .trt-col .inner {
  position: relative;
  display: block;
  min-height: 100%;
  padding: 0;
}


.treatment-block .trt-col .inner h3 {
  text-transform: uppercase;
}


.treatment-block .trt-col .dish-block {
  position: relative;
  margin-bottom: 35px;
}

.treatment-block .trt-col .dish-block .inner-box {
  position: relative;
}

.treatment-block .trt-col .dish-block .title {
  position: relative;
  line-height: 24px;
  margin-bottom: 10px;
  font-family: var(--font-family-Italiana);
  display: flex;
}

.treatment-block .trt-col .dish-block .title .ttl {
  position: relative;
  float: left;
  text-transform: capitalize;
}

.treatment-block .trt-col .dish-block .title .menu-list-line {
  flex-grow: 1;
  margin-left: 15px;
  margin-right: 15px;
  border-bottom-style: dashed;
  border-bottom-width: 1px;
  border-bottom-color: var(--black-color-opacity-three);
  height: 21px;
}

.treatment-block .trt-col .dish-block .title .ttl a {
  color: var(--main-color);
}

.treatment-block .trt-col .dish-block .title .ttl .s-info {
  position: relative;
  top: -3px;
  display: inline-block;
  line-height: 18px;
  padding: 1px 12px;
  font-family: var(--font-family-jost);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--white-color);
  letter-spacing: 1px;
  background: var(--main-color);
  margin-left: 6px;
  border-radius: 100px;
}

.treatment-block .trt-col .dish-block .title .price {
  position: relative;
  float: right;
  font-size: 25px;
  color: var(--main-color);
  font-family: var(--font-family-jost);
}

.treatment-block .trt-col .dish-block .title .price .currency {
  font-size: 22px;
  position: relative;
  top: 0px;
  right: 3px;
}

.treatment-block .trt-col .dish-block .desc {
  position: relative;
  font-size: 18px;
  color: var(--text-color-light);
}

.treatment-block .trt-col .dish-block .desc a {
  color: var(--text-color-light);
}

.treatment-block .trt-col .link-box {
  margin: 10px 0;
}



/*** 

====================================================================
  Service details
====================================================================

***/

.inner-banner.service-details .inner {
  position: relative;
  display: block;
  max-width: 100%;
  width: 100%;
  margin: 0 auto;
  text-align: left;
  z-index: 5;
}

.inner-banner.service-details .bredcum {
  text-align: left;
  justify-content: flex-start;
  margin-bottom: 20px;
  margin-left: -5px;
}

.inner-banner.service-details .inner .sub_text {
  padding: 15px 0 0 0;
}

/* banner info */
.inner-banner.service-details .service-info {
  position: relative;
  display: flex;
  text-align: left;
  padding-top: 35px;
  gap: 20px;
}

.inner-banner.service-details .s-infobox:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  bottom: 10%;
  width: 1px;
  background-color: var(--white-color-opacity-three);
  /* use your color variable */
}

.inner-banner.service-details .s-infobox {
  position: relative;
  flex: 1;
  /* allows equal width distribution */
  padding-right: 20px;
}

.inner-banner.service-details .s-infobox .si-ttl {
  display: block;
  font-weight: 600;
}

.inner-banner.service-details .direction-arrow {
  background-color: var(--white-color);
  color: var(--main-color);
  padding: 14px 8px;
  border-radius: 100px;
  margin-top: 100px;
}

.treatment-details .title-box {
  padding-bottom: 20px;
}

.treatment-details .title-box h3 {
  text-shadow:
    0.4px 0 var(--white-color),
    -0.4px 0 var(--white-color),
    0 0.4px var(--white-color),
    0 -0.4px var(--white-color);
}

.treatment-details .inner {
  padding-bottom: 60px;
}

/* service details features */
.treatment-details .sd-features {
  padding-top: 40px;
}

.treatment-details .sd-features .feature-box {
  position: relative;
  padding: 0 80px 0 0;
  margin-bottom: 40px;
  overflow: hidden;
}

/* Remove margin-bottom for last two columns */
.treatment-details .sd-features .row>div:nth-last-child(-n+2) .feature-box {
  margin-bottom: 0;
}

/* Base 1px static line */
.treatment-details .sd-features .feature-box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 90%;
  height: 1px;
  background: var(--black-color-opacity-four);
}

/* Animated line on hover */
.treatment-details .sd-features .feature-box::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  background: var(--main-color);
  transition: width 0.5s ease;
}

/* On hover, the 3px line animates left → right */
.treatment-details .sd-features .feature-box:hover::before {
  width: 90%;
}

.treatment-details .sd-features .feature-box .ftr-ttl-group {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding-bottom: 30px;
  align-items: center;
}

.treatment-details .sd-features .feature-box .ftr-icon {
  width: 50px;
}

.treatment-details .sd-features .feature-box p {
  padding-bottom: 40px;
}

/* service details ul li */
.treatment-details .sd-list {
  padding-top: 30px;
}

.treatment-details .sd-list li {
  list-style: none;
  display: flex;
  align-items: flex-start;
  /* aligns icon and text neatly */
  gap: 8px;
  /* space between icon and text */
  line-height: 1.6;
  padding-bottom: 12px;
}

.treatment-details .sd-list li i {
  color: var(--main-color);
  flex-shrink: 0;
  /* prevents icon from shrinking */
  margin-top: 4px;
  /* optional: adjust vertical alignment if needed */
}

.masonry.s-details {
  column-count: 2;
  column-gap: 2em;
}

.treatment-details .sd-package {
  padding: 40px 0 0 0;
}

.treatment-details .sd-package .pkg-box {
  width: 100%;
  background-color: var(--white-color-opacity-three);
  border: solid 1px var(--black-color-opacity-four);
  padding: 20px;
  transition: all 0.3s ease;
}

.treatment-details .sd-package .pkg-box:hover {
  border: solid 1px var(--main-color);
  transform: translateY(-5px);
  /* subtle lift effect */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* soft shadow */
}

.treatment-details .sd-package .pb-ttl {
  color: var(--text-color-light);
  padding: 0 0 20px 0;
}

.treatment-details .sd-package ul {
  padding: 20px 0;
  border-top: solid 1px var(--black-color-opacity-four);
  border-bottom: solid 1px var(--black-color-opacity-four);
}

.treatment-details .sd-package ul li {
  list-style: none;
  color: var(--main-color);
}

.treatment-details .sd-package ul li i {
  font-size: 15px;
  color: var(--black-color-opacity-three);
}

.treatment-details .sd-package .sp-text {
  font-weight: 600;
}

.treatment-details .sd-package a.btnarrow {
  position: relative;
  display: inline-block;
  color: var(--text-color-light);
  text-transform: uppercase;
  font-size: 14px;
  font-weight: 500;
  padding-top: 20px;
  text-decoration: none;
  transition: color 0.3s ease;
}

/* underline animation */
.treatment-details .sd-package a.btnarrow::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  /* sits under text */
  width: 0%;
  height: 1px;
  background: var(--main-color);
  transition: width 0.3s ease;
}

/* hover state */
.treatment-details .sd-package a.btnarrow:hover {
  color: var(--main-color);
}

.treatment-details .sd-package a.btnarrow:hover::after {
  width: 100%;
  background: var(--main-color);
}


/* cta section */
.treatment-details .cta {
  background-color: var(--main-color);
  padding: 40px;
  text-align: left;
  position: relative;
  overflow: hidden;
}

.treatment-details .cta::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 220px;
  /* adjust size */
  height: 220px;
  background: url("../images/resource/leaf-white.svg") no-repeat right bottom;
  background-size: contain;
  pointer-events: none;
  /* prevents blocking clicks */
}

.treatment-details .cta .title-box p {
  padding-top: 10px;
}

.treatment-details .cta .cta-btns {
  display: flex;
  gap: 20px;
  margin-top: 10px;
}

.treatment-details .cta .cta-btns .whatsapp-cta i {
  background: var(--white-color);
  color: var(--main-color);
  padding: 11px 14px;
  font-size: 25px;
  text-align: center;
  border-radius: 500px;
  width: 50px;
  height: 50px;
}

.treatment-details .cta .cta-btns .whatsapp-cta i:hover {
  background: var(--main-color);
  color: var(--white-color);
  border: solid 1px var(--white-color);
}




/*** 

====================================================================
  Contact Page
====================================================================

***/

.contact-page-info {
  position: relative;
}

.contact-page-info .c-infobox {
  position: relative;
  display: contents;
}

.contact-page-info .c-info {
  position: relative;
  text-align: center;
}

.contact-page-info .c-info:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background-color: var(--black-color-opacity-four);
}


.contact-page-info .c-info i {
  color: var(--main-color);
  font-size: 30px;
  padding-bottom: 30px;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.contact-page-info .c-info:hover i {
  transform: rotateY(360deg);
}

.contact-page-info .c-info h5 {
  color: var(--main-color);
  padding-bottom: 20px;
}

.contact-page-info .c-info p {
  color: var(--text-color-light);
  padding: 0 30px;
  line-height: 1.8em;
}

.contact-page-info .c-info a {
  position: relative;
  color: var(--text-color-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

/* underline (hidden initially) */
.contact-page-info .c-info a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  /* space below text */
  width: 0;
  height: 1px;
  background-color: var(--main-color);
  transition: width 0.3s ease;
}

/* animate underline on hover */
.contact-page-info .c-info a:hover::after {
  width: 100%;
}

/* optional: change link color on hover */
.contact-page-info .c-info a:hover {
  color: var(--main-color);
}

.contact-page-info .buttons-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  position: relative;
  width: 100%;
  margin-top: 50px;
}

.contact-page-info .buttons-box::before,
.contact-page-info .buttons-box::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: #b1c1b7;
  /* adjust line color as needed */
}

.contact-page-info .buttons-box::before {
  margin-right: 20px;
}

.contact-page-info .buttons-box::after {
  margin-left: 20px;
}

/* form sie */
.contact-page-form .row {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  /* makes all child columns equal in height */
}

.contact-page-form .loc-block,
.contact-page-form .map-block {
  display: flex;
  flex-direction: column;
}

.contact-page-form .map-block {
  display: flex;
  flex-direction: column;
}

.contact-page-form .map-block iframe {
  flex: 1;
  /* take full available height */
  width: 100%;
  /* full width of column */
  height: 100%;
  /* ensure full stretch */
  border: 0;
  /* remove border gap */
}

.contact-page-form .form-side {
  background-color: var(--white-color);
  background-repeat: repeat;
  border: solid 1px var(--black-color-opacity-four);
  padding: 60px;
}

.contact-page-form .default-form {
  position: relative;
  z-index: 100;
}

.contact-page-form .field-inner {
  position: relative;
}

.contact-page-form .field-inner input,
.contact-page-form .field-inner textarea {
  width: 100%;
  padding-right: 40px;
  /* give space for the icon */
  box-sizing: border-box;
}

.contact-page-form .field-inner i {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-color-dark);
  font-size: 16px;
  pointer-events: none;
  /* so clicks focus the input */
}

.contact-page-form .field-inner textarea+i {
  top: 20px;
}

.form-group {
  width: 100%;
  text-align: center;
}



/*** 

====================================================================
  Floating Whatsapp button
====================================================================

***/

.whatsapp-btn {
  position: fixed;
  bottom: 130px;
  right: 18px;
  z-index: 100;
}

.whatsapp-btn a {
  background-color: var(--white-color);
  border-radius: 100px;
  font-size: 40px;
  padding: 20px;
  color: var(--main-color);
  border: solid 1px var(--main-color);
}

.whatsapp-btn a:hover {
  background-color: var(--main-color);
  color: var(--white-color);
  border: solid 1px var(--white-color);
}



/*** 

====================================================================
  Masonary Gallery
====================================================================

***/

.masonry {
  column-count: 3;
  column-gap: 2em;
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: 2em;
}

.masonry-item img {
  width: 100%;
  transition: transform 0.3s ease;
  cursor: pointer;
}

.masonry-item img:hover {
  transform: scale(1.03);
}

@media (max-width: 992px) {
  .masonry {
    column-count: 2;
  }
}

@media (max-width: 576px) {
  .masonry {
    column-count: 1;
  }


}



/*** 

====================================================================
  hamburger section
====================================================================

***/


.hamburger {
  display: flex;
  align-self: center;
  flex-direction: column;
  justify-content: space-between;
  width: 30px;
  height: 24px;
  cursor: pointer;
  padding-top: 5px;
  padding-bottom: 5px;
}

.hamburger span {
  /* align-self: flex-end; */
  height: 2px;
  width: 83.33333333%;
  background: var(--black-color);
  transition: all 400ms ease-in-out;
}

.hamburger .meat {
  width: 100%;
  transition: all 200ms ease-in-out;
}

.hamburger .bottom-bun {
  width: 58.33333333%;
  transition: all 100ms ease-in-out;
}

.hamburger:hover span {
  width: 100%;
}


html:not(.body-menu-opened) .hamburger .top-bun {
  -webkit-animation: burger-hover 2s infinite ease-in-out alternate forwards 200ms;
  animation: burger-hover 2s infinite ease-in-out alternate forwards 200ms;
}

html:not(.body-menu-opened) .hamburger .meat {
  -webkit-animation: burger-hover 2s infinite ease-in-out alternate forwards 400ms;
  animation: burger-hover 2s infinite ease-in-out alternate forwards 400ms;
}

html:not(.body-menu-opened) .hamburger .bottom-bun {
  -webkit-animation: burger-hover 2s infinite ease-in-out alternate forwards 600ms;
  animation: burger-hover 2s infinite ease-in-out alternate forwards 600ms;
}

@-webkit-keyframes burger-hover {
  0% {
    width: 100%;
  }

  50% {
    width: 50%;
  }

  100% {
    width: 100%;
  }
}

@keyframes burger-hover {
  0% {
    width: 100%;
  }

  50% {
    width: 50%;
  }

  100% {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .hamburger span {

    background: white;

  }
}

/* sachin css */

.banner-container {
  position: relative;
}

.highlight-winner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -170px;
  z-index: 999;
}

.winner-box {
  max-width: 1060px;
  margin: auto;
  background: #fff;
  border-radius: 30px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .15);
}

.winner-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}

.winner-item {
  flex: 1;
  text-align: center;
}

.winner-item img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}

.winner-item.active {
  background: #fff2e9;
  padding: 30px;
  border-radius: 20px;
}

.banner-container {
  margin-bottom: 220px;
}

/* ===========================
   Large Laptop
=========================== */

@media (max-width: 1199px) {

  .highlight-winner {
    bottom: -140px;
  }

  .winner-box {
    max-width: 850px;
    padding: 35px;
  }

  .winner-row {
    gap: 20px;
  }

  .winner-item img {
    width: 110px;
    height: 110px;
  }

  .winner-item.active {
    padding: 25px;
  }

  .banner-container {
    margin-bottom: 180px;
  }

}


/* ==========================================
   1280 × 800 / Laptop (1200px - 1366px)
========================================== */
@media only screen and (min-width:1200px) and (max-width:1366px) {

  .highlight-winner {
    position: relative;
    margin-top: -500px;
    /* Upar shift */
    z-index: 20;
  }
}

/* ===========================
 Tablet
=========================== */

@media (max-width:991px) {

  .highlight-winner {
    position: relative;
    bottom: auto;
    margin-top: -80px;
    padding: 0 15px;
  }

  .banner-container {
    margin-bottom: 70px;
  }

  .winner-box {
    max-width: 100%;
    padding: 30px;
    border-radius: 25px;
  }

  .winner-row {
    flex-direction: column;
    gap: 30px;
  }

  .winner-item {
    width: 100%;
  }

  .winner-item.active {
    width: 100%;
    transform: none;
  }

  .winner-item img {
    width: 120px;
    height: 120px;
  }

}


/* ===========================
 Mobile
=========================== */

@media (max-width:767px) {

  .highlight-winner {
    margin-top: -50px;
    padding: 0 0px;
  }

  .winner-box {
    padding: 25px 20px;
    border-radius: 20px;
  }

  .winner-box h2 {
    font-size: 28px;
    line-height: 38px;
    margin-bottom: 25px;
    text-align: center;
  }

  .winner-item img {
    width: 100px;
    height: 100px;
  }

  .winner-item h3,
  .winner-item h4 {
    font-size: 20px;
  }

  .winner-item span {
    font-size: 15px;
  }

  .winner-item p {
    font-size: 15px;
    line-height: 24px;
  }

  .winner-item.active {
    padding: 20px;
  }

}


/* ===========================
 Small Mobile
=========================== */

@media (max-width:575px) {

  .highlight-winner {
    margin-top: -30px;
  }

  .winner-box {
    padding: 20px 35px;
  }

  .winner-box h2 {
    font-size: 24px;
    line-height: 34px;
  }

  .winner-item img {
    width: 85px;
    height: 85px;
  }

  .winner-item h3,
  .winner-item h4 {
    font-size: 18px;
  }

  .winner-item p {
    font-size: 14px;
    line-height: 22px;
  }

  .winner-item.active {
    padding: 18px;
  }

}

.winner-item.active {
  background: linear-gradient(180deg, #fff8f2, #ffe9dc);
  transform: translateY(-15px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .12);
}

@media(max-width:991px) {
  .winner-item.active {
    transform: none;
  }
}

/* Tablet */
@media (max-width: 991px) {
  .highlight-winner .auto-container {
    padding-bottom: 120px !important;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .highlight-winner .auto-container {
    padding-bottom: 80px !important;
    padding: 0 0px;
  }
}

/* Small Mobile */
@media (max-width: 575px) {
  .highlight-winner .auto-container {
    padding-bottom: 50px !important;
  }
}

.event-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin: 40px 0;
  flex-wrap: wrap;
}

.event-box {
  position: relative;
  width: 240px;
  padding: 25px;
  background: rgba(0, 0, 0, .45);
  backdrop-filter: blur(12px);
  border: 2px dashed rgba(255, 255, 255, .7);
  border-radius: 15px;
  text-align: center;
}

.event-box .title {
  display: block;
  color: #ff2f92;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
  font-family: "Cormorant Garamond", serif;
}

.event-box h3 {
  color: #fff;
  font-size: 38px;
  line-height: 1.2;
  margin: 0;
}

/* ==========================
   Tablet (992px)
========================== */
@media (max-width: 991px) {

  .event-info {
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
  }

  .event-box {
    width: 220px;
    padding: 20px;
  }

  .event-box .title {
    font-size: 22px;
    margin-bottom: 10px;
  }

  .event-box h3 {
    font-size: 34px;
  }

  .event-box h3 sup {
    font-size: 16px;
  }

}

/* ==========================
 Mobile (768px)
========================== */
@media (max-width: 767px) {

  .event-info {
    flex-direction: column;
    gap: 15px;
    margin: 25px 0;
  }

  .event-box {
    width: 100%;
    max-width: 300px;
    padding: 18px;
  }

  .event-box .title {
    font-size: 20px;
  }

  .event-box h3 {
    font-size: 30px;
  }

  .event-box h3 sup {
    font-size: 15px;
  }

}

/* ==========================
 Small Mobile (575px)
========================== */
@media (max-width: 575px) {

  .event-info {
    margin: 20px 0;
    gap: 12px;
  }

  .event-box {
    max-width: 260px;
    padding: 15px;
    border-radius: 12px;
  }

  .event-box .title {
    font-size: 18px;
    letter-spacing: .5px;
  }

  .event-box h3 {
    font-size: 24px;
    line-height: 1.3;
  }

  .event-box h3 sup {
    font-size: 12px;
  }

}

/* ==========================
 Extra Small (400px)
========================== */
@media (max-width: 400px) {

  .event-box {
    max-width: 220px;
    padding: 12px;
  }

  .event-box .title {
    font-size: 16px;
  }

  .event-box h3 {
    font-size: 20px;
  }

}


/* section 2 start sachin */

/*==========================================
   Registration Process
==========================================*/

.registration-process {
  position: relative;
  padding: 120px 0;
  background: #fafafa;
  overflow: hidden;
}

.registration-process .row {
  display: flex;
  align-items: center;
}

.registration-process .content-column {
  position: relative;
  padding-right: 50px;
}

.registration-process .inner-column {
  position: relative;
}

.registration-process .sub-title {
  display: inline-block;
  color: #7c7c7c;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-bottom: 18px;
}

.registration-process h2 {
  font-size: 36px;
  line-height: 1.15;
  font-weight: 700;
  color: #222;
  margin-bottom: 18px;
  font-family: "Cormorant Garamond", serif;
}

.registration-process h2 span {
  color: #d11d73;
}

.title-shape {
  display: flex;
  gap: 8px;
  margin-bottom: 35px;
}

.title-shape span {
  width: 18px;
  height: 4px;
  background: #d11d73;
  transform: skew(-40deg);
  border-radius: 10px;
}

.registration-process .text p {
  font-size: 17px;
  line-height: 36px;
  color: #555;
  margin-bottom: 22px;
}

.crown-image {
  margin-top: -58px;
}

.crown-image img {
  width: 250px;
  animation: float 4s ease-in-out infinite;
}

@keyframes float {

  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-12px);
  }

  100% {
    transform: translateY(0);
  }

}

/*=================================
      Right Cards
=================================*/

.cards-wrapper {

  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;

}

.process-card {

  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 19px 17px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .08);
  transition: .4s;

}

.process-card:hover {

  /* transform: translateY(-10px);
  box-shadow: 0 25px 60px rgba(209, 29, 115, .20); */

}

.process-card .icon {

  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: #fff4f8;
  color: #d11d73;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  margin-bottom: 28px;

}

.process-card h3 {

  font-size: 24px;
  color: #1d1d1d;
  margin-bottom: 22px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 700;

}

.process-card p,
.process-card li {

  color: #555;
  font-size: 17px;
  line-height: 34px;

}

.process-card ul {

  padding: 0;
  margin: 0;
  list-style: none;

}

.process-card ul li {

  margin-bottom: 3px;

}

.process-card .number {

  position: absolute;
  right: 0;
  bottom: 0;

  width: 55px;
  height: 62px;

  background: #ff0a7a;
  color: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 70px 0 18px 0;

  font-size: 28px;
  font-weight: 700;

}

/*==========================================
    Card Hover Effects
==========================================*/

.process-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 5px;
  /* background: linear-gradient(90deg, #ff008c, #ff7b00); */
  transform: scaleX(0);
  transform-origin: left;
  transition: .5s;
}

.process-card:hover::before {
  transform: scaleX(1);
}

.process-card::after {
  content: '';
  position: absolute;
  left: -120px;
  top: -120px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255, 0, 128, .04);
  transition: .5s;
}

.process-card:hover::after {
  left: -70px;
  top: -70px;
}

.process-card .icon {
  transition: .4s;
}

.process-card:hover .icon {
  transform: rotateY(180deg);
  background: #ff0a7a;
  color: #fff;
}

.process-card h3 {
  transition: .4s;
}

.process-card:hover h3 {
  color: #d11d73;
}




/*==========================================
      Background Decorations
==========================================*/

.registration-process::before {
  content: '';
  position: absolute;
  width: 350px;
  height: 350px;
  left: -120px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd8ea 0%, transparent 70%);
  opacity: .8;
}

.registration-process::after {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  right: -100px;
  bottom: -100px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe2c7 0%, transparent 70%);
}


/*==========================================
      Tablet
==========================================*/

@media (max-width:1199px) {

  .registration-process {

    padding: 100px 0;

  }

  .registration-process h2 {

    font-size: 52px;

  }

  .process-card {

    padding: 35px 25px;

  }

  .process-card h3 {

    font-size: 32px;

  }

  .process-card p,
  .process-card li {

    font-size: 16px;
    line-height: 30px;

  }

}


/*==========================================
      991px
==========================================*/

@media (max-width:991px) {

  .registration-process .row {

    display: block;

  }

  .registration-process .content-column {

    padding-right: 0;
    margin-bottom: 60px;

  }

  .cards-wrapper {

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

  }

  .registration-process h2 {

    font-size: 48px;

  }

  .registration-process .text p {

    font-size: 17px;
    line-height: 32px;

  }

  .crown-image {

    text-align: center;

  }

}


/*==========================================
      767px
==========================================*/

@media (max-width:767px) {

  .registration-process {

    padding: 80px 0;

  }

  .registration-process h2 {

    font-size: 40px;

  }

  .cards-wrapper {

    grid-template-columns: 1fr;

  }

  .process-card {

    padding: 30px;

  }

  .process-card h3 {

    font-size: 30px;

  }

  .process-card .icon {

    width: 65px;
    height: 65px;
    font-size: 28px;

  }

  .process-card .number {

    width: 50px;
    height: 50px;
    font-size: 22px;

  }

  .registration-process .text p {

    font-size: 16px;
    line-height: 30px;

  }

  .crown-image img {

    width: 200px;

  }

}


/*==========================================
      Mobile
==========================================*/

@media (max-width:575px) {

  .registration-process {

    padding: 70px 0;

  }

  .registration-process h2 {

    font-size: 34px;
    line-height: 42px;

  }

  .registration-process .sub-title {

    font-size: 16px;

  }

  .title-shape {

    margin-bottom: 25px;

  }

  .title-shape span {

    width: 14px;

  }

  .process-card {

    padding: 25px 20px;

  }

  .process-card h3 {

    font-size: 28px;

  }

  .process-card p,
  .process-card li {

    font-size: 15px;
    line-height: 28px;

  }

  .process-card .icon {

    margin-bottom: 20px;

  }

  .process-card .number {

    width: 55px;
    height: 55px;
    font-size: 20px;

  }

  .crown-image {

    margin-top: 30px;

  }

  .crown-image img {

    width: 170px;

  }

}

/*===========================
 Countdown Banner
===========================*/

.countdown-banner {

  position: relative;
  padding: 65px 0;
  overflow: hidden;

  background:
    linear-gradient(130deg, #73139d 0%, #45248f 45%, #4a2594 100%);

}

/* Pink Shapes */

.countdown-banner::before {

  content: '';
  position: absolute;
  left: -180px;
  top: -180px;

  width: 650px;
  height: 650px;

  background: rgba(255, 0, 136, .20);

  border-radius: 50%;

  transform: rotate(-35deg);

}

.countdown-banner::after {

  content: '';

  position: absolute;

  right: -250px;
  top: -200px;

  width: 720px;
  height: 720px;

  background: rgba(255, 0, 136, .18);

  border-radius: 50%;

}

/* Center purple shape */

.banner-overlay {

  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 100%;

  background:

    radial-gradient(circle at center,
      rgba(75, 33, 170, .70),
      rgba(75, 33, 170, 0));

}

/* Small Dots */

.banner-overlay::before {

  content: '';

  position: absolute;

  width: 100%;
  height: 100%;

  background-image:
    radial-gradient(rgba(255, 255, 255, .25) 2px, transparent 2px);

  background-size: 90px 90px;

  opacity: .6;

}

.banner-content {

  position: relative;
  z-index: 10;
  text-align: center;

}

.top-text {

  display: block;

  font-size: 60px;

  color: #fff;

  font-family: "Bickham Script Pro", "Bickham Script Pro 3", cursive;

  margin-bottom: 15px;

}

.banner-content h2 {

  font-size: 32px;

  font-weight: 700;

  color: #fff;

  margin-bottom: 60px;

}

#countdown {

  display: flex;

  justify-content: center;

  gap: 35px;

}

.time-box {

  width: 160px;

  padding: 30px;

  background: rgba(255, 255, 255, .12);

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

  backdrop-filter: blur(15px);

  border-radius: 20px;

}

.time-box span {

  font-size: 58px;

  color: #fff;

  font-weight: 700;

}

.time-box p {

  margin-top: 8px;

  color: #fff;

  font-size: 18px;

  text-transform: uppercase;

}

@media(max-width:991px) {

  .top-text {

    font-size: 48px;

  }

  .banner-content h2 {

    font-size: 42px;

  }

  #countdown {

    flex-wrap: wrap;

  }

  .time-box {

    width: 130px;

    padding: 20px;

  }

  .time-box span {

    font-size: 42px;

  }

}

@media(max-width:767px) {

  .countdown-banner {

    padding: 70px 0;

  }

  .top-text {

    font-size: 36px;

  }

  .banner-content h2 {

    font-size: 21px;

    margin-bottom: 35px;

  }

  .time-box {

    width: 110px;

  }

  .time-box span {

    font-size: 34px;

  }
}

/* Black and gold countdown design */
.countdown-banner {
  min-height: 650px;
  padding: 68px 0 82px;
  background-color: #030303;
  background-image: url("../images/background/countdown-finale-bg.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.countdown-banner::before {
  inset: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: rgba(0, 0, 0, .08);
  transform: none;
  pointer-events: none;
}

.countdown-banner::after {
  display: none;
}

.countdown-banner .banner-overlay {
  inset: 0;
  width: auto;
  height: auto;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, .18) 100%);
  pointer-events: none;
}

.countdown-banner .banner-overlay::before {
  display: none;
}

.countdown-banner .banner-content {
  max-width: 940px;
  margin: 0 auto;
}

.countdown-banner .top-text {
  margin-bottom: 12px;
  color: #fff;
  font-family: "Great Vibes", "Bickham Script Pro", "Bickham Script Pro 3", cursive !important;
  font-size: clamp(64px, 6.1vw, 94px);
  font-weight: 400;
  line-height: .92;
  letter-spacing: 1px;
  text-shadow: 0 3px 15px rgba(0, 0, 0, .75);
}

.page-wrapper .countdown-banner .banner-content span.top-text {
  font-family: "Great Vibes", "Bickham Script Pro", "Bickham Script Pro 3", cursive !important;
}

.countdown-banner .banner-content h2 {
  margin-bottom: 38px;
  color: #fff;
  font-size: 38px;
  font-weight: 400;
  line-height: 1.2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .75);
}

.countdown-banner #countdown {
  flex-wrap: wrap;
  gap: 24px;
}

.countdown-banner .time-box {
  width: 158px;
  min-height: 146px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 22px 18px;
  border: 1px solid rgba(214, 165, 69, .72);
  border-radius: 12px;
  background: rgba(0, 0, 0, .68);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .38), inset 0 0 22px rgba(212, 161, 58, .08);
  backdrop-filter: blur(7px);
}

.countdown-banner .time-box span {
  color: #fff;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 9px rgba(0, 0, 0, .85);
}

.countdown-banner .time-box p {
  margin: 10px 0 0;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 1px;
  line-height: 1.2;
}

@media(max-width:991px) {
  .countdown-banner .top-text {
    font-size: clamp(58px, 10vw, 78px);
  }

  .countdown-banner .banner-content h2 {
    font-size: 32px;
  }

  .countdown-banner #countdown {
    gap: 18px;
  }

  .countdown-banner .time-box {
    width: 145px;
    min-height: 135px;
    padding: 18px;
  }

  .countdown-banner .time-box span {
    font-size: 46px;
  }
}

@media(max-width:767px) {
  .countdown-banner {
    min-height: 0;
    padding: 58px 0 64px;
  }

  .countdown-banner .top-text {
    font-size: clamp(48px, 15vw, 68px);
    line-height: .96;
  }

  .countdown-banner .banner-content h2 {
    margin-bottom: 30px;
    font-size: 25px;
  }

  .countdown-banner .time-box {
    width: calc(50% - 9px);
    max-width: 150px;
    min-height: 122px;
    padding: 14px;
  }

  .countdown-banner .time-box span {
    font-size: 39px;
  }

  .countdown-banner .time-box p {
    font-size: 13px;
  }
}

/*==================================================
                EVENT SCHEDULE
==================================================*/

.event-schedule {
  position: relative;
  padding: 60px 0;
  background: #fff;
  overflow: hidden;
}

.event-schedule::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: -220px;
  top: -220px;
  border-radius: 50%;
  background: rgba(255, 77, 137, .05);
}

.event-schedule::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  right: -180px;
  bottom: -180px;
  border-radius: 50%;
  background: rgba(114, 193, 255, .05);
}

.event-schedule .row {
  display: flex;
  align-items: center;
}

/*===========================
    LEFT CONTENT
===========================*/

.schedule-content {
  position: relative;
  z-index: 2;
  padding-right: 40px;
}

.schedule-content .sub-title {

  display: inline-block;
  margin-bottom: 20px;

  color: #444;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;

}

.schedule-content h2 {

  font-size: 36px;
  line-height: 78px;
  font-weight: 700;
  color: #2b2787;
  margin-bottom: 0px;
  font-family: "Cormorant Garamond", serif;

}

.schedule-content h2 span {

  color: #ff3d83;

}

.schedule-content p {

  font-size: 20px;
  line-height: 40px;
  color: #666;

}

/*===========================
    RIGHT SIDE
===========================*/

.schedule-circle-area {

  position: relative;
  width: 700px;
  height: 520px;
  margin-left: auto;

}

/*===========================
    COMMON CIRCLE
===========================*/

.schedule-circle {

  position: absolute;

  width: 245px;
  height: 245px;

  border-radius: 50%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  color: #fff;

  transition: .45s;

  box-shadow: 0 20px 45px rgba(0, 0, 0, .12);

}

.schedule-circle:hover {

  transform: translateY(-8px) scale(1.04);

}

/*===========================
    HEADINGS
===========================*/

.schedule-circle h3 {

  font-size: 32px;
  line-height: 40px;
  margin-bottom: 18px;
  font-weight: 700;
  font-family: "Cormorant Garamond", serif;

}

.schedule-circle h3 sup {

  font-size: 18px;

}

.schedule-circle span {

  display: block;

  font-size: 21px;
  font-weight: 600;
  line-height: 30px;
  color: #fff;

}

/*===========================
    CIRCLE COLORS
===========================*/

.circle-one {

  left: 70px;
  top: 180px;

  background: linear-gradient(135deg, #f07daa24 0%, #fe5ba663 100%);

}

.circle-two {

  left: 235px;
  top: 20px;

  background: linear-gradient(135deg, #f07daa24 0%, #fe5ba663 100%);

}

.circle-three {

  left: 410px;
  top: 140px;

  background: linear-gradient(135deg, #f07daa24 0%, #fe5ba663 100%);

}

/*===========================
    HOVER
===========================*/

.circle-one:hover {

  background: linear-gradient(135deg, #f07daa24 0%, #fe5ba663 100%);

}

.circle-two:hover {

  background: linear-gradient(135deg, #f07daa24 0%, #fe5ba663 100%);

}

.circle-three:hover {

  background: linear-gradient(135deg, #f07daa24 0%, #fe5ba663 100%);

}

/*===========================
    FLOAT
===========================*/

@keyframes floatCircle {

  0% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-10px);

  }

  100% {

    transform: translateY(0);

  }

}

.circle-one {

  animation: floatCircle 5s infinite ease-in-out;

}

.circle-two {

  animation: floatCircle 6s infinite ease-in-out;

}

.circle-three {

  animation: floatCircle 7s infinite ease-in-out;

}

/*==========================================
            1200px
==========================================*/

@media (max-width:1200px) {

  .schedule-content {
    padding-right: 20px;
  }

  .schedule-content h2 {
    font-size: 56px;
    line-height: 64px;
  }

  .schedule-content p {
    font-size: 18px;
    line-height: 34px;
  }

  .schedule-circle-area {
    width: 560px;
    height: 450px;
  }

  .schedule-circle {
    width: 200px;
    height: 200px;
  }

  .schedule-circle h3 {
    font-size: 28px;
    line-height: 34px;
  }

  .schedule-circle span {
    font-size: 17px;
  }

  .circle-one {
    left: 20px;
    top: 170px;
  }

  .circle-two {
    left: 170px;
    top: 0;
  }

  .circle-three {
    left: 330px;
    top: 140px;
  }

}


/*==========================================
          991px
==========================================*/

@media (max-width:991px) {

  .event-schedule {
    padding: 90px 0;
  }

  .event-schedule .row {
    display: block;
  }

  .schedule-content {
    text-align: center;
    padding-right: 0;
    margin-bottom: 60px;
  }

  .schedule-content h2 {
    font-size: 48px;
    line-height: 58px;
  }

  .schedule-content p {
    font-size: 17px;
    line-height: 30px;
  }

  .schedule-circle-area {

    width: 420px;
    height: 420px;
    margin: 0 auto;

  }

  .schedule-circle {

    width: 170px;
    height: 170px;

  }

  .schedule-circle h3 {

    font-size: 24px;
    line-height: 30px;
    margin-bottom: 12px;

  }

  .schedule-circle span {

    font-size: 14px;
    line-height: 20px;

  }

  .circle-two {

    left: 50%;
    top: 0;
    transform: translateX(-50%);

  }

  .circle-one {

    left: 0;
    top: 140px;

  }

  .circle-three {

    right: 0;
    left: auto;
    top: 140px;

  }

}


/*==========================================
          767px
==========================================*/

@media (max-width:767px) {

  .event-schedule {
    padding: 70px 0;
  }

  .schedule-content h2 {
    font-size: 40px;
    line-height: 48px;
  }

  .schedule-content p {
    font-size: 16px;
    line-height: 28px;
  }

  .schedule-circle-area {

    width: 300px;
    height: 300px;

  }

  .schedule-circle {

    width: 130px;
    height: 130px;

  }

  .schedule-circle h3 {

    font-size: 20px;
    line-height: 24px;
    margin-bottom: 8px;

  }

  .schedule-circle h3 sup {

    font-size: 12px;

  }

  .schedule-circle span {

    font-size: 11px;
    line-height: 16px;

  }

  .circle-two {

    top: 0;
    left: 50%;
    transform: translateX(-50%);

  }

  .circle-one {

    left: 0;
    top: 95px;

  }

  .circle-three {

    right: 0;
    left: auto;
    top: 95px;

  }

}


/*==========================================
          575px
==========================================*/

@media (max-width:575px) {

  .schedule-content h2 {

    font-size: 32px;
    line-height: 40px;

  }

  .schedule-content .sub-title {

    font-size: 14px;

  }

  .schedule-content p {

    font-size: 15px;
    line-height: 26px;

  }

  .schedule-circle-area {

    width: 260px;
    height: 260px;

  }

  .schedule-circle {

    width: 115px;
    height: 115px;

  }

  .schedule-circle h3 {

    font-size: 14px;
    line-height: 20px;

  }

  .schedule-circle span {

    font-size: 10px;
    line-height: 14px;

  }

  .circle-two {

    top: 0;
    left: 50%;
    transform: translateX(-50%);

  }

  .circle-one {

    left: 36px;
    top: 55px;

  }

  .circle-three {

    right: 0;
    left: auto;
    top: 82px;

  }

}


/*==========================================
      Animation Fix
==========================================*/

.schedule-circle:hover {
  z-index: 10;
}

.schedule-circle {
  cursor: pointer;
  will-change: transform;
}


/*==========================================
      Mobile Shadow
==========================================*/

@media (max-width:767px) {

  .schedule-circle {

    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);

  }

}

/*=========================================
        Sponsors Section
=========================================*/

.sponsors-section {
  position: relative;
  padding: 70px 0;
  overflow: hidden;
  background: #24108d;
}

/*==============================
      Background Shapes
==============================*/

.sponsors-section::before {

  content: '';

  position: absolute;

  right: -250px;
  top: -200px;

  width: 900px;
  height: 900px;

  border-radius: 50%;

  border: 130px solid rgba(255, 0, 140, .18);

  transform: rotate(-20deg);

}

.sponsors-section::after {

  content: '';

  position: absolute;

  right: -120px;
  top: -60px;

  width: 650px;
  height: 650px;

  border-radius: 50%;

  border: 90px solid rgba(255, 255, 255, .05);

}

/*==============================
      Heading
==============================*/

.sponsors-section .sec-title {

  position: relative;

  text-align: center;

  margin-bottom: 70px;

  z-index: 5;

}

.sponsors-section .sub-title {

  display: block;

  color: #ffffff;

  text-transform: uppercase;

  letter-spacing: 2px;

  font-size: 18px;

  font-weight: 700;

  margin-bottom: 12px;

}

.sponsors-section h2 {

  color: #fff;

  font-size: 36px;

  font-weight: 700;

  margin-bottom: 18px;

  font-family: "Cormorant Garamond", serif;

}

/* Decorative Line */

.title-shape {

  display: flex;

  justify-content: center;

  gap: 8px;

}

.title-shape span {

  width: 18px;

  height: 4px;

  background: #fff;

  border-radius: 20px;

  transform: skew(-40deg);

}

/*==============================
      Sponsors Grid
==============================*/

.sponsor-wrapper {

  position: relative;

  display: grid;

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

  gap: 20px;

  align-items: center;

  z-index: 5;

}

.sponsor-box {

  background: #ffffff;

  padding: 12px;

  height: 90px;

  display: flex;

  justify-content: center;

  align-items: center;

  transition: .4s;

  box-shadow: 0 10px 30px rgba(0, 0, 0, .15);

}

.sponsor-box img {

  max-width: 90%;

  max-height: 86px;

  transition: .4s;

}

.sponsor-box:hover {

  transform: translateY(-8px);

  box-shadow: 0 18px 40px rgba(255, 0, 140, .25);

}

.sponsor-box:hover img {

  transform: scale(1.05);

}

/*==============================
      Button
==============================*/

.btn-box {

  text-align: center;

  margin-top: 70px;

}

.sponsor-btn {

  display: inline-block;

  padding: 18px 50px;

  background: #ff0b7d;

  color: #fff;

  text-transform: uppercase;

  font-weight: 700;

  border-radius: 4px;

  letter-spacing: .5px;

  transition: .4s;

  text-decoration: none;

}

.sponsor-btn:hover {

  background: #ffffff;

  color: #ff0b7d;

}

/*==========================================
        Hover Effects
==========================================*/

.sponsor-box {
  position: relative;
  overflow: hidden;
}

.sponsor-box::before {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, .55),
      transparent);
  transition: .8s;
}

.sponsor-box:hover::before {
  left: 100%;
}

.sponsor-box:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(255, 0, 120, .25);
}

.sponsor-box img {
  transition: .35s;
}

.sponsor-box:hover img {
  transform: scale(1.08);
}

/*==========================================
      Button Hover
==========================================*/

.sponsor-btn {
  position: relative;
  overflow: hidden;
}

.sponsor-btn::before {
  content: '';
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  transition: .4s;
  z-index: -1;
}

.sponsor-btn:hover::before {
  left: 0;
}

.sponsor-btn:hover {
  color: #ff0b7d;
}

/*==========================================
      Floating Background
==========================================*/

@keyframes floatBg {

  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-25px);
  }

  100% {
    transform: translateY(0);
  }

}

.sponsors-section::before {
  animation: floatBg 8s linear infinite;
}

.sponsors-section::after {
  animation: floatBg 10s linear infinite;
}

/*==========================================
      Responsive
==========================================*/

@media(max-width:1200px) {

  .sponsor-wrapper {

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

  }

  .sponsors-section h2 {

    font-size: 54px;

  }

}


@media(max-width:991px) {

  .sponsors-section {

    padding: 90px 0;

  }

  .sponsor-wrapper {

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

    gap: 20px;

  }

  .sponsors-section h2 {

    font-size: 46px;

  }

}


@media(max-width:767px) {

  .sponsor-wrapper {

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

  }

  .sponsor-box {

    height: 85px;

    padding: 10px;

  }

  .sponsor-box img {

    max-height: 118px;

  }

  .sponsors-section h2 {

    font-size: 38px;

  }

  .sponsor-btn {

    padding: 16px 35px;

  }

}


@media(max-width:575px) {

  .sponsors-section {

    padding: 70px 0;

  }

  .sponsor-wrapper {

    grid-template-columns: 1fr;

  }

  .sponsor-box {

    height: 90px;

  }

  .sponsors-section h2 {

    font-size: 32px;

  }

  .sponsors-section .sub-title {

    font-size: 14px;

  }

  .title-shape span {

    width: 14px;

  }

  .btn-box {

    margin-top: 45px;

  }

  .sponsor-btn {

    width: 100%;
    text-align: center;

  }

}

.sponsors-section {
  background: #24108d url(images/bg/sponsor-bg.svg) no-repeat center right;
  background-size: cover;
}

/* Continuously moving sponsor logos */
.sponsor-marquee {
  position: relative;
  z-index: 5;
  width: 100%;
  overflow: hidden;
}

.sponsor-wrapper {
  display: flex;
  grid-template-columns: none;
  width: max-content;
  gap: 20px;
  will-change: transform;
}

.sponsor-wrapper.is-moving {
  animation: sponsorMarquee 24s linear infinite;
}

.sponsor-marquee:hover .sponsor-wrapper,
.sponsor-marquee:focus-within .sponsor-wrapper {
  animation-play-state: paused;
}

.sponsor-wrapper .sponsor-box {
  flex: 0 0 clamp(190px, 18vw, 242px);
  width: clamp(190px, 18vw, 242px);
}

@keyframes sponsorMarquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(calc(-50% - 10px));
  }
}

@media(max-width:767px) {
  .sponsor-wrapper {
    display: flex;
    gap: 16px;
  }

  .sponsor-wrapper .sponsor-box {
    flex-basis: 200px;
    width: 200px;
  }

  .sponsor-wrapper.is-moving {
    animation-duration: 18s;
  }

  @keyframes sponsorMarquee {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc(-50% - 8px));
    }
  }
}

@media(prefers-reduced-motion: reduce) {
  .sponsor-wrapper.is-moving {
    animation: none;
  }
}

/*=============================
    Contact Office
==============================*/

.contact-office {
  padding: 120px 0;
  background: #fff;
}

.office-wrapper {

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 70px;

}

.office-content {

  width: 42%;

}

.office-map {

  width: 58%;

}

.sub-title {

  display: block;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #777;
  font-weight: 700;
  margin-bottom: 18px;

}

.office-content h2 {

  font-size: 36px;
  color: #2f2488;
  font-weight: 700;
  margin-bottom: 18px;
  font-family: 'Cormorant Garamond', serif;

}

.divider {

  display: flex;
  gap: 8px;
  margin-bottom: 35px;

}

.divider span {

  width: 18px;
  height: 3px;
  background: #4b32b8;
  transform: skew(-40deg);

}

.office-content h4 {

  font-size: 28px;
  font-weight: 700;
  color: #111;
  margin-bottom: 30px;

}

.office-info {

  list-style: none;
  padding: 0;
  margin: 0;

}

.office-info li {

  font-size: 22px;
  line-height: 42px;
  color: #222;

}

.office-info strong {

  color: #000;
  font-weight: 700;

}

.office-map iframe {

  width: 100%;
  height: 470px;
  border: none;
  border-radius: 4px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .12);

}

/*=========================
    Responsive
=========================*/

@media(max-width:991px) {

  .office-wrapper {

    display: block;

  }

  .office-content {

    width: 100%;
    margin-bottom: 50px;

  }

  .office-map {

    width: 100%;

  }

  .office-content h2 {

    font-size: 42px;

  }

  .office-info li {

    font-size: 18px;
    line-height: 34px;

  }

  .office-map iframe {

    height: 400px;

  }

}

@media(max-width:575px) {

  .contact-office {

    padding: 70px 0;

  }

  .office-content h2 {

    font-size: 34px;

  }

  .office-content h4 {

    font-size: 24px;

  }

  .office-info li {

    font-size: 16px;
    line-height: 30px;

  }

  .office-map iframe {

    height: 300px;

  }

}

/*=========================================
        BOOK YOUR SEAT
=========================================*/

.book-seat-section {

  position: relative;
  padding: 80px 0;
  overflow: hidden;

  background: url(../images/main-slider/audi.png) center center/cover no-repeat;

}

/* Dark Overlay */

.book-overlay {

  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(24, 10, 57, .82);

}

/* Pink Shape */

.shape-left {

  position: absolute;

  left: -120px;
  top: -180px;

  width: 520px;
  height: 820px;

  background: #e7006d;

  opacity: .18;

  border-radius: 55%;

  transform: rotate(22deg);

}

.shape-left-two {

  position: absolute;

  left: 140px;
  top: -120px;

  width: 330px;
  height: 720px;

  background: #ff006a;

  opacity: .16;

  border-radius: 55%;

  transform: rotate(18deg);

}

/* Content */

.book-content {

  position: relative;
  z-index: 2;
  text-align: center;

}

.book-content .sub-title {

  display: block;

  color: #fff;

  font-size: 20px;

  letter-spacing: 2px;

  font-weight: 700;

  margin-bottom: 18px;

}

.book-content h2 {

  color: #fff;

  font-size: 36px;

  line-height: 78px;

  font-weight: 700;

  margin-bottom: 22px;

  font-family: 'Cormorant Garamond', serif;

}

/* Divider */

.divider {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-bottom: 50px;

}

.divider span {

  width: 18px;

  height: 3px;

  background: #fff;

  transform: skew(-40deg);

}

/* Button */

.theme-btn1 {

  display: inline-block;

  padding: 14px 44px;

  background: #ff007a;

  color: #fff;

  font-size: 18px;

  font-weight: 700;

  text-transform: uppercase;

  border-radius: 4px;

  transition: .4s;

  text-decoration: none;

}

.theme-btn1:hover {

  background: #fff;

  color: #ff007a;

}

/*========================
Responsive
========================*/

@media(max-width:991px) {

  .book-seat-section {

    padding: 100px 0;

  }

  .book-content h2 {

    font-size: 54px;

    line-height: 60px;

  }

}

@media(max-width:767px) {

  .book-seat-section {

    padding: 80px 0;

  }

  .book-content h2 {

    font-size: 40px;

    line-height: 48px;

  }

  .theme-btn1 {

    padding: 18px 42px;

    font-size: 16px;

  }

  .shape-left {

    width: 340px;
    height: 600px;

  }

  .shape-left-two {

    width: 220px;
    height: 520px;

  }

}

@media(max-width:575px) {

  .book-content h2 {

    font-size: 32px;

    line-height: 40px;

  }

  .book-content .sub-title {

    font-size: 16px;

  }

  .theme-btn1 {

    padding: 16px 34px;

    font-size: 15px;

  }

}

.winner-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 45px;
  flex-wrap: wrap;
}

.winner-card {

  width: 300px;
  padding: 35px 25px;

  background: #fff;
  border-radius: 25px;

  text-align: center;

  box-shadow: 0 12px 35px rgba(0, 0, 0, .08);

  transition: .4s;

}

.winner-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 20px 45px rgba(0, 0, 0, .15);

}

/* Center Winner */

.winner-card.active {

  background: #fff4ed;

  transform: scale(1.08);

  box-shadow: 0 20px 60px rgba(0, 0, 0, .15);

  z-index: 2;

}

.winner-card img {

  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;

}

.winner-card h3 {

  color: #b41d44;
  font-size: 34px;
  margin-bottom: 10px;

}

.winner-card p {

  margin: 6px 0;
  color: #444;
  font-size: 20px;

}

.winner-card strong {

  display: block;
  margin: 10px 0;
  font-size: 22px;
}

.winner-card {
  background: #fff;
  border-radius: 25px;
  padding: 35px 25px;
  transition: .4s ease;

  /* Premium Shadow */
  box-shadow:
    0 8px 20px rgba(0, 0, 0, .05),
    0 18px 45px rgba(0, 0, 0, .08),
    0 35px 70px rgba(0, 0, 0, .06);
}

/*==============================
        Footer Logo
==============================*/

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

.footer-logo img {
  max-width: 25%;
  height: auto;
  transition: .3s;
}

/* Tablet */

@media (max-width:991px) {

  .footer-logo img {
    max-width: 40%;
  }

}

/* Mobile */

@media (max-width:767px) {

  .footer-logo {
    margin-bottom: 25px;
  }

  .footer-logo img {
    max-width: 60%;
  }

}

/* Small Mobile */

@media (max-width:480px) {

  .footer-logo img {
    max-width: 75%;
  }

}



/* 28/07 */

/*=========================================
 HERO SECTION
=========================================*/

.hero-style {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 90px;
  width: 100%;
  min-height: 760px;
  position: relative;
  z-index: 10;
}

.hero-left {
  width: 38%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-right {
  width: 62%;
  color: #fff;
}

.logo-card {

  width: 420px;
  height: 420px;

  background: #fff;

  border-radius: 45px;

  display: flex;

  justify-content: center;

  align-items: center;

  box-shadow: 0 35px 80px rgba(0, 0, 0, .18);

  transition: .5s;

}

.logo-card:hover {

  transform: translateY(-10px);

}

.logo-card img {

  width: 72%;

}

.hero-edition {

  display: inline-block;

  color: #fff;

  font-size: 42px;

  font-weight: 700;

  margin-bottom: 15px;

  letter-spacing: 2px;

}

.hero-right h1 {

  font-size: 95px;

  font-weight: 900;

  line-height: .95;

  color: #fff;

  margin-bottom: 30px;

  text-transform: uppercase;

}

.hero-text {

  font-size: 24px;

  line-height: 1.8;

  color: #fff;

  max-width: 700px;

  margin-bottom: 35px;

  opacity: .95;

}

.hero-social {

  display: flex;

  gap: 18px;

  margin-bottom: 40px;

}

.hero-social a {

  width: 58px;

  height: 58px;

  border-radius: 50%;

  background: #111;

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  font-size: 20px;

  transition: .4s;

}

.hero-social a:hover {

  background: #ff1f86;

  transform: translateY(-8px);

}

.hero-buttons {

  display: flex;

  gap: 25px;

  margin-bottom: 50px;

}

.btn-register {

  background: #ffc7bb;

  color: #fff;

  padding: 18px 42px;

  border-radius: 60px;

  text-decoration: none;

  font-weight: 700;

  transition: .4s;

}

.btn-details {

  background: #fff;

  color: #111;

  padding: 18px 42px;

  border-radius: 60px;

  text-decoration: none;

  font-weight: 700;

  transition: .4s;

}

.btn-register:hover,
.btn-details:hover {

  transform: translateY(-6px);

  box-shadow: 0 20px 40px rgba(0, 0, 0, .18);

}

.hero-event {

  display: flex;

  gap: 60px;

}

.event-item span {

  display: block;

  font-size: 13px;

  text-transform: uppercase;

  letter-spacing: 2px;

  color: #ffe8e8;

  margin-bottom: 10px;

}

.event-item h4 {

  color: #fff;

  font-size: 28px;

  font-weight: 700;

}

/* Slider */

.main-slider .slide-item {

  min-height: 900px;

  position: relative;

}

.main-slider .image-layer {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-size: cover;

  background-position: center;

  background-repeat: no-repeat;

}

.main-slider .content-box {

  position: relative;

  z-index: 20;

  width: 100%;

}

.main-slider .content {

  width: 100%;

}

.main-slider .inner {

  width: 100%;

}

/*==========================================
 PREMIUM HERO BACKGROUND
==========================================*/

.main-slider .slide-item {
  overflow: hidden;
  position: relative;
}

.main-slider .slide-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg,
      rgba(255, 60, 140, .20),
      rgba(255, 120, 80, .10));
  z-index: 1;
}

.main-slider .slide-item::after {
  content: "";
  position: absolute;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  right: -220px;
  top: -220px;
  background: rgba(255, 255, 255, .08);
  filter: blur(5px);
  z-index: 2;
}

.image-layer {
  z-index: 0;
}

/* Decorative Circle */

.hero-style::before {

  content: "";

  position: absolute;

  width: 420px;

  height: 420px;

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

  border-radius: 50%;

  left: -180px;

  top: -100px;

}

/* Small Circle */

.hero-style::after {

  content: "";

  position: absolute;

  width: 180px;

  height: 180px;

  border-radius: 50%;

  background: rgba(255, 255, 255, .08);

  right: 150px;

  bottom: 40px;

}

/* Glow */

.logo-card {

  position: relative;

  overflow: hidden;

}

.logo-card::before {

  content: "";

  position: absolute;

  width: 500px;

  height: 500px;

  background: linear-gradient(transparent,
      rgba(255, 255, 255, .25),
      transparent);

  transform: rotate(35deg);

  left: -420px;

  top: -150px;

  transition: 1s;

}

.logo-card:hover::before {

  left: 420px;

}

/* Social Hover */

.hero-social a {

  backdrop-filter: blur(10px);

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

}

.hero-social a:hover {

  transform: translateY(-8px) scale(1.08);

}

/* Button */

.btn-register {

  background: linear-gradient(90deg, #ff5d95, #ff9a68);

}

.btn-register:hover {

  background: linear-gradient(90deg, #ff3d7d, #ff7a48);

}

.btn-details {

  background: #fff;

}

/* Event */

.hero-event {

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

  padding-top: 30px;

}

/* Floating Animation */

.logo-card {

  animation: floatCard 4s ease-in-out infinite;

}

@keyframes floatCard {

  0% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-15px);

  }

  100% {

    transform: translateY(0);

  }

}

/* Heading Animation */

.hero-right h1 {

  animation: titleMove 1.2s;

}

@keyframes titleMove {

  from {

    opacity: 0;

    transform: translateY(80px);

  }

  to {

    opacity: 1;

    transform: none;

  }

}

/* Text */

.hero-text {

  animation: fadeText 1.5s;

}

@keyframes fadeText {

  from {

    opacity: 0;

    transform: translateY(50px);

  }

  to {

    opacity: 1;

    transform: none;

  }
}

/* Responsive */

@media(max-width:991px) {

  .hero-style {

    padding: 100px 0;

    flex-direction: column;

    text-align: center;

  }

  .hero-style::before,
  .hero-style::after {

    display: none;

  }

  .hero-right {

    width: 100%;

  }

  .hero-left {

    width: 100%;

    margin-bottom: 50px;

  }

  .hero-right h1 {

    font-size: 60px;

  }

  .hero-text {

    font-size: 18px;

  }

  .hero-buttons,
  .hero-social,
  .hero-event {

    justify-content: center;

  }

  .hero-event {

    flex-direction: column;

    gap: 20px;

  }

  .logo-card {

    width: 260px;

    height: 260px;

  }

}

/*=============================
    Full Width Legacy Banner
=============================*/

.legacy-banner {
  width: 100%;
  position: relative;
  overflow: hidden;
  /* margin: 80px 0; */
  background: #fff;
}

.legacy-banner img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  transition: 0.5s ease;
}

/* .legacy-banner:hover img {
  transform: scale(1.02);
} */

/* Responsive */

@media(max-width:991px) {
  .legacy-banner {
    margin: 60px 0;
  }
}

@media(max-width:767px) {
  .legacy-banner {
    margin: 40px 0;
  }
}