.admin-bar .sticky-header {
  top: 32px;
}
.elementor-section-wrap .elementor-section,
.elementor-column-gap-default
  > .elementor-column
  > .elementor-element-populated {
  padding: 0px !important;
}
.elementor-element
  .elementor-column-gap-default
  > .elementor-row
  > .elementor-column
  > .elementor-element-populated {
  padding: 0px 0px 0px 0px;
}
rs-dotted.twoxtwo {
  background: none;
  background-color: rgba(0, 0, 0, 0.4) !important;
}
.pagination,
.rooms-pagination {
  position: relative;
  display: block;
}
.pagination li,
.rooms-pagination .page-numbers li {
  position: relative;
  display: inline-block;
  margin: 0px 5px;
  padding: 0px;
}
.pagination li a,
.pagination li span,
.rooms-pagination .page-numbers li a,
.rooms-pagination .page-numbers li span {
  position: relative;
  display: inline-block;
  line-height: 45px;
  height: 47px;
  font-size: 16px;
  min-width: 48px;
  color: #081336;
  font-weight: 700;
  text-align: center;
  background: #ffffff;
  background-color: #ffffff;
  border: 2px solid rgba(14, 42, 78, 0.34);
  text-transform: capitalize;
  transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
}
.pagination li a.next,
.pagination li a.prev,
.rooms-pagination .page-numbers li a.next,
.rooms-pagination .page-numbers li a.prev {
  width: auto;
  padding: 0px 20px;
}
.pagination li a:focus,
.pagination li a:hover,
.pagination li span:focus,
.pagination li span:hover,
.pagination li span.current,
.rooms-pagination .page-numbers li a:focus,
.rooms-pagination .page-numbers li a:hover,
.rooms-pagination .page-numbers li span.current,
.rooms-pagination .page-numbers li a.next:hover,
.rooms-pagination .page-numbers li a.prev:hover {
  color: #ffffff;
  border-color: #4852c4;
  background-color: #4852c4;
}
section.about-section .icon-list,
section.why-choose-us-section .icon-list {
  font-family: 'GlacialIndifference-Regular' !important;
}
.service-section-three .time {
  margin-bottom: 10px;
}
.service-block-one .image-block .link-btn {
  margin-top: 30px;
}
.room-section-two.light-bg .room-block-two .text {
  width: auto;
  padding: 1px 20px 5px;
}
.news-block-two ul li a {
  color: #797979;
}
/************** Comment Style *************/
.blog-comment-area .comment {
  margin-top: 45px;
}
.blog-comment-area .comment .user-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.blog-comment-area .comment .user-avatar img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
.blog-comment-area .comment .comment-text {
  width: calc(100% - 60px);
  padding-left: 25px;
  position: relative;
}
.blog-comment-area .comment .name {
  font-family: 'GlacialIndifference-Regular';
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -1px;
  color: #333;
}
.blog-comment-area .comment .date {
  font-size: 15px;
  color: #adadad;
}
.blog-comment-area .comment p {
  font-size: 18px;
  line-height: 28px;
  color: #797979;
  font-weight: 400;
  padding: 12px 50px 0 0;
}
.blog-comment-area .comment .reply-btn {
  font-size: 13px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0;
  text-align: center;
  width: 65px;
  line-height: 27px;
  background: #2c2c2c;
  border-radius: 3px;
  position: absolute;
  right: 0;
  top: 0;
  transition: all 0.3s ease-in-out;
}
.blog-comment-area .comment .reply-btn:hover {
  background: #4852c4;
}
.comment-box.post-comments .title h3 {
  padding: 0px;
}
.blog-single-post .post-comments {
  margin-top: 70px;
}
.blog-single-post .comment-form {
  margin-top: 60px;
}

.sidebar .popular-posts .post .post-thumb {
  height: 70px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.sidebar-page-container .group-title h2 small a {
  position: relative;
  display: block;
  font-size: 24px;
  color: #0e2a4e;
  font-weight: 700;
  font-family: 'Playfair Display';
}
.bluebell-comment-item .bluebell-comment-item {
  margin-left: 80px;
}
.blog-comment-area .bluebell-comment-item .comment-form {
  margin-top: 20px;
  margin-bottom: 50px;
}
.blog-single-post .lower-content .post-meta {
  padding-bottom: 18px;
}
.widget .tagcloud a {
  position: relative;
  display: inline-block;
  line-height: 24px;
  padding: 6px 15px 6px;
  min-width: 100px;
  margin: 0px 6px 10px 0px;
  color: #a6a6a6;
  text-align: center;
  font-size: 18px !important;
  background: none;
  font-weight: 400;
  border: 1px solid #e4e4e4;
  text-transform: capitalize;
  transition: 0.5s;
}
.widget .tagcloud a:hover {
  border-color: #172b55;
  background-color: #172b55;
  color: #ffffff;
}
/********** Blog Widget Style *************/
.widget {
  position: relative;
  margin-bottom: 50px;
}
.widget ul {
  position: relative;
}
.widget ul li {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid #e6e6e6;
}
.widget ul li:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
  border-bottom: none;
}
.widget ul li ul li {
  margin-bottom: 0px;
  padding-bottom: 0px;
  border-bottom: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e6e6e6;
}
.widget ul li a {
  position: relative;
  color: #797979;
  font-size: 18px;
  font-weight: 400;
  display: block;
  transition: 0.5s;
}
.widget ul li a:hover {
  color: #4852c4;
}

/************** Footer Widget Style *************/

.footer-widget {
  position: relative;
}
.footer-widget ul {
  position: relative;
}
.footer-widget ul li {
  position: relative;
  margin-bottom: 16px;
  color: rgb(255 255 255 / 60%);
  font-size: 18px;
}
.footer-widget ul li a {
  position: relative;
  font-size: 18px;
  line-height: 22px;
  color: rgb(255 255 255 / 60%);
  font-weight: 400;
  transition: 0.5s;
}
.footer-widget ul li a:hover {
  color: #4852c4;
}

/**************** Bookin Form Style ************/

.check-availability {
  margin: 0 auto;
  max-width: 1000px;
  width: 100%;
}
.check-availability .hotel-booking-search {
  position: relative;
  z-index: 99;
  background: #ffffff;
  padding: 25px 30px 15px 35px;
  filter: drop-shadow(0px 13px 35px rgba(0, 0, 0, 0.08));
  font-family: 'Poppins', sans-serif;
  border-radius: 10px;
  margin-bottom: -70px;
  margin-top: -70px;
}

.check-availability .hotel-booking-search .hb-form-table {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.check-availability .hotel-booking-search .hb-form-table .hb-form-field {
  -ms-flex: 0 0 19.5%;
  flex: 0 0 19.5%;
  max-width: 19.5%;
  position: relative;
  width: 100%;
  padding-right: 10px;
  padding-left: 10px;
}

.check-availability
  .hotel-booking-search
  .hb-form-table
  .hb-form-field
  .hb_input_field {
  display: block;
}

.check-availability
  .hotel-booking-search
  .hb-form-table
  .hb-form-field
  .hb_input_field:after {
  top: 0px;
  right: 10px;
  line-height: 45px;
}

.check-availability .hotel-booking-search label {
  font-size: 16px;
  line-height: 1.2em;
  color: #1b212f;
  font-weight: 600;
  min-height: 22px;
  letter-spacing: 1px;
  text-transform: capitalize;
  margin-bottom: 10px;
}

.check-availability .hotel-booking-search input,
.check-availability .hotel-booking-search select,
.check-availability .hotel-booking-search textarea,
.check-availability .hb-form-field-input .nice-select {
  width: 100%;
  height: 45px;
  padding: 0px 15px;
  border-radius: 5px;
  line-height: 45px;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  font-size: 14px;
  position: relative;
  display: block;
  color: #25283a;
  -webkit-transition: all 300ms ease;
  -ms-transition: all 300ms ease;
  -o-transition: all 300ms ease;
  -moz-transition: all 300ms ease;
  transition: all 300ms ease;
  min-width: inherit;
}

.check-availability .hb-form-field-input .nice-select:after {
  top: 22px;
  right: 15px;
  line-height: 45px;
  width: 8px;
  height: 8px;
}
.check-availability form {
  position: relative;
}
.check-availability .hotel-booking-search .hb-submit {
  margin-bottom: 0px;
  position: absolute;
  text-align: right;
  top: 35px;
  right: 0;
}

.check-availability .hotel-booking-search .hb-submit button {
  position: relative;
  display: inline-block;
  height: 45px;
  min-width: auto;
  padding: 0px 15px;
  overflow: hidden;
  text-transform: capitalize;
  vertical-align: middle;
  border-radius: 5px;
  transition: 0.5s;
  z-index: 0;
  background: #4852c4;
  border-color: #4852c4;
  font-size: 14px;
  letter-spacing: 2px;
  line-height: 45px;
  color: #ffffff;
  font-weight: 700;
  font-family: 'Roboto';
}
.check-availability .hotel-booking-search .hb-submit button:hover {
  background-color: #222;
  outline-color: #222 !important;
  outline-offset: -4px;
  color: #ffffff;
}
.check-availability:before {
  display: none;
}
.check-availability.style-three {
  margin: inherit;
  left: 0px;
}
.check-availability.style-five {
  margin: inherit;
  left: 0px;
}
.check-availability.style-three .hotel-booking-search {
  margin-top: 0px;
  margin-bottom: 0px;
}
.check-availability.style-two .hotel-booking-search {
  margin-top: -20px;
  margin-bottom: 0px;
  border-radius: 0px 10px 10px;
}
.check-availability.style-five .hotel-booking-search {
  margin-top: -20px;
  margin-bottom: 0px;
}
.check-availability.style-four .hotel-booking-search {
  background: none;
  box-shadow: none;
  border-radius: 0px;
  padding: 20px 0px;
  margin: 0px;
}
.check-availability.style-six .hotel-booking-search {
  background: none;
  box-shadow: none;
  border-radius: 0px;
  margin-bottom: 0px;
  margin-top: -80px;
}
.check-availability.style-four .hotel-booking-search label,
.check-availability.style-six .hotel-booking-search label {
  color: rgb(255 255 255 / 56%);
}
.check-availability.style-four .nice-select:after,
.check-availability.style-six .nice-select:after {
  border-color: #333;
}
.check-availability.style-four .hotel-booking-search .hb-submit {
  margin: 0px;
}
.camera_commands,
.camera_next,
.camera_nextThumbs,
.camera_prev,
.camera_prevThumbs,
.camera_thumbs_cont {
  background: none !important;
}
.room-details-section.border-shape-bottom:after {
  position: absolute;
  content: '';
  left: 15px;
  right: 15px;
  bottom: -13px;
  background: rgb(255 255 255 / 15%);
  height: 13px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/*********** Room Search Page Style *************/

#hotel-booking-results h3 {
  display: none;
}
#hotel-booking-results form button.hb_add_to_cart {
  background: #4852c4;
  color: #ffffff;
}
#hotel-booking-results form button.hb_add_to_cart:hover {
  background: #222222;
  color: #ffffff;
}

.sidebar-page-container
  .blog-single-post
  .hb-select-extra-results
  .list-room-extra
  li {
  position: relative;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1e1e1;
  margin-left: 0px;
}
.sidebar-page-container
  .blog-single-post
  .hb-select-extra-results
  .list-room-extra
  li:last-child {
  margin-bottom: 0px;
  padding-bottom: 0px;
  border-bottom: none;
}
.sidebar-page-container
  .blog-single-post
  .hb-select-extra-results
  .list-room-extra
  li
  .hb_package_title {
  position: relative;
  padding: 0;
  font-weight: 700;
}
.sidebar-page-container
  .blog-single-post
  .hb-select-extra-results
  .list-room-extra
  li
  .hb_package_title
  small {
  font-weight: 700;
}
.sidebar-page-container
  .blog-single-post
  .hb-select-extra-results
  .list-room-extra
  li
  .hb_package_title
  label,
#hotel-booking-cart h3,
#hotel-booking-payment h3 {
  font-size: 26px;
  font-family: 'Playfair Display', serif;
}
.sidebar-page-container
  .blog-single-post
  .hb-select-extra-results
  .list-room-extra
  li {
  font-size: 18px;
  color: #797979;
  padding-left: 40px;
}

#hotel-booking-results form .hb_button.hb_checkout,
#hotel-booking-results form button.hb_add_to_cart,
#hotel-booking-results form button[type='submit'],
.sidebar-page-container .blog-single-post .hb-select-extra-results .hb_button,
.sidebar-page-container .blog-single-post #hotel-booking-cart .hb_button,
#hotel-booking-cart .hb_button.hb_checkout,
#hotel-booking-payment .hb_button.hb_checkout,
#hotel-booking-cart button[type='submit'],
#hotel-booking-payment button[type='submit'],
#hotel-booking-cart button[type='button'],
#hotel-booking-payment button[type='button'] {
  position: relative;
  display: inline-block;
  font-size: 14px;
  line-height: 30px;
  font-weight: 700;
  padding: 7px 40px;
  background: #4852c4;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #ffffff;
  border-radius: 0;
  outline: 1px solid transparent;
  z-index: 1;
  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;
  font-family: 'Roboto';
}
#hotel-booking-results form .hb_button.hb_checkout:hover,
#hotel-booking-results form button.hb_add_to_cart:hover,
#hotel-booking-results form button[type='submit']:hover,
.sidebar-page-container
  .blog-single-post
  .hb-select-extra-results
  .hb_button:hover,
.sidebar-page-container .blog-single-post #hotel-booking-cart .hb_button:hover,
#hotel-booking-cart .hb_button.hb_checkout:hover,
#hotel-booking-payment .hb_button.hb_checkout:hover,
#hotel-booking-cart button[type='submit']:hover,
#hotel-booking-payment button[type='submit']:hover,
#hotel-booking-cart button[type='button']:hover,
#hotel-booking-payment button[type='button']:hover {
  background: #222222;
  color: #ffffff;
}
#hotel-booking-results
  .hb-search-results
  > .hb-room
  .hb-room-info
  .nice-select.number_room_select {
  display: none;
}
#hotel-booking-results .news-block-two ul li,
#hotel-booking-results .hb-search-results > .hb-room .hb-room-meta li {
  margin-left: 0px !important;
}

#hotel-booking-cart table.hb_table,
#hotel-booking-payment table.hb_table {
  margin-bottom: 30px;
}
#hotel-booking-cart table th,
#hotel-booking-payment table th {
  color: #2a2a2a;
  padding: 10px 17px;
  text-align: center;
}
#hotel-booking-cart table.hb_table,
#hotel-booking-payment table.hb_table {
  border: 1px solid #e1e6eb;
  padding: 35px;
  min-height: 270px;
  width: 100%;
}
#hotel-booking-cart .hb_remove_cart_item,
#hotel-booking-payment .hb_remove_cart_item {
  color: #1b1c1e;
}
#hotel-booking-cart table th,
#hotel-booking-payment table th,
#hotel-booking-cart table tr.hb_checkout_item td,
#hotel-booking-payment table tr.hb_checkout_item td,
#hotel-booking-cart td,
#hotel-booking-payment td {
  border: 1px solid #eaeaea;
}
#hotel-booking-cart table tr.hb_checkout_item td a,
#hotel-booking-payment table tr.hb_checkout_item td a {
  color: inherit;
}

.hb-order-existing-customer,
.hb-order-new-customer,
.hb-payment-form,
.hb-addition-information {
  position: relative;
  margin-bottom: 40px;
}
.hb-customer .hb-col-padding {
  padding: 40px;
}
.hb-col-border {
  border: 1px solid #ddd;
}
.hb-order-existing-customer > div > h4,
.hb-order-new-customer > div > h4,
.hb-payment-form > div > h4,
.hb-addition-information > div > h4 {
  margin-top: 0;
  margin-bottom: 20px;
}
.hb-customer .hb-col-padding .hb-form-table.col-2 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  max-width: 50%;
  padding: 0;
}
.hb-order-new-customer .hb-form-table .hb-form-field {
  display: inline-block;
  width: 49%;
  margin-right: 0;
  padding: 0;
  margin-left: 0px;
}
.hb-form-field-label {
  display: block;
  font-weight: 700;
  font-size: 15px;
  color: #2a2a2a;
}
#hotel-booking-cart select,
#hotel-booking-payment select {
  line-height: 22px;
  padding: 8px 20px 8px 5px;
  border: 1px solid #ddd;
}
.hb-order-new-customer .hb-form-table .hb-form-field select,
.hb-order-new-customer .hb-form-table .hb-form-field input,
#hotel-booking-cart input[type='number'],
#hotel-booking-payment input[type='number'],
#hotel-booking-cart input[type='text'],
#hotel-booking-payment input[type='text'],
#hotel-booking-cart input[type='email'],
#hotel-booking-payment input[type='email'] {
  width: 100%;
  margin-bottom: 0;
  font-size: 14px;
  color: #797979;
}
#hotel-booking-cart select,
#hotel-booking-payment select,
#hotel-booking-cart select,
#hotel-booking-payment .nice-select {
  line-height: 22px;
  padding: 10px 20px 6px 5px;
  border: 1px solid #ddd;
  width: 100%;
  border-radius: 0px;
  float: none;
  height: auto;
}

section.room-section-three li.nav-item .nav-link {
  position: relative;
  padding: 28px 0;
  padding-left: 160px;
  border: none;
  border-bottom: 1px solid #d2c8c8 !important;
  margin-bottom: 0px;
}
section.room-section-three li.nav-item .nav-link:hover,
section.room-section-three li.nav-item .nav-link:focus {
  border-bottom: 1px solid #d2c8c8 !important;
}
section.room-section-three li.nav-item .nav-link.active {
  background: #f0eeee;
  border-bottom-color: #d2c8c8;
}

.filter-gallery .filters {
  position: relative;
  text-align: center;
}
.news-block .lower-content .link-btn a {
  font-weight: 700;
}
section.service-section-two .content-block h4 {
  z-index: 9;
}
.m-b0 {
  margin-bottom: 0px !important;
}
.m-b50 {
  margin-bottom: 50px;
}
.news-block-two.style-two.blog-single-post {
  margin-right: 20px;
}
.footer-widget.widget_bluebell_subscribe_us {
  margin-left: -120px;
}
.bb-slider-two {
  position: relative;
}
.about-section.border-shape-top:before {
  z-index: 1;
}
.main-header.header-style-four .header-upper .navbar-right {
  margin-left: 0px;
}
/* Navbar logo — taller, navbar height unchanged */
.main-header .header-upper .logo-box .logo img,
.main-header .header-upper .logo-box .logo .custom-logo {
  height: 55px;
  width: auto;
}
/* Reduce vertical padding to keep navbar the same total height */
.main-header .header-upper .logo-box .logo {
  padding: 12px 0;
}
/* Contact widget & other shared logo uses keep original size */
.contact-widget .image img {
  height: 38px;
  width: auto;
}
/* Mobile sidebar logo handled separately below */

/* ── Mobile/Tablet: sticky header ──────────────────────────────── */
@media only screen and (max-width: 1139px) {
  .main-header.header-style-one {
    position: sticky;
    top: 0;
    z-index: 99999;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
  }
}

/* ── Mobile/Tablet: Book Now left of burger, 20px gap ───────────── */
@media only screen and (max-width: 1139px) {
  .main-header .header-upper .inner-container {
    flex-wrap: nowrap;
    align-items: center;
  }
  .main-header .header-upper .logo-box {
    order: 1;
    flex: 1;
  }
  .main-header .header-upper .right-column {
    order: 2;
    flex: 0 0 auto;
    display: flex !important;
    align-items: center;
    margin-left: 0;
    margin-right: 20px;
  }
  .main-header .header-upper .navbar-right { display: flex !important; }
  .main-header .header-upper .nav-outer {
    order: 3;
    flex: 0 0 auto;
  }
}

/* Keep Book Now visible on all mobile sizes */
@media only screen and (max-width: 767px) {
  .main-header .header-upper .right-column,
  .main-header .header-upper .navbar-right {
    display: flex !important;
  }
}

/* ── Mobile Sidebar: white background ──────────────────────────── */
.mobile-menu .menu-box {
  background: #ffffff !important;
}
.mobile-menu .close-btn {
  color: #333333;
}
/* Border lines: white→dark */
.mobile-menu .navigation li,
.mobile-menu .navigation li > ul > li:first-child {
  border-top-color: rgba(0, 0, 0, 0.1);
}
.mobile-menu .navigation:last-child {
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
/* Nav links: match desktop font/color */
.mobile-menu .navigation li > a {
  color: #242424;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.mobile-menu .navigation li > a:hover,
.mobile-menu .navigation li.current > a {
  color: var(--main-color, #c89b6e);
}
.mobile-menu .navigation li.dropdown .dropdown-btn {
  color: #555555;
}

/* ── Mobile Sidebar: logo 90% width, centered ──────────────────── */
.mobile-menu .nav-logo {
  text-align: center;
  padding: 30px 25px;
}
.mobile-menu .nav-logo a,
.mobile-menu .nav-logo .custom-logo-link {
  display: block;
}
.mobile-menu .nav-logo img,
.mobile-menu .nav-logo .custom-logo {
  width: 90% !important;
  height: auto !important;
  max-width: 90% !important;
}

/* ── Mobile Sidebar: ACF social icons ──────────────────────────── */
.mobile-social-acf {
  text-align: center;
  padding: 20px 25px 30px;
}
.mobile-social-acf a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  transition: transform .2s ease;
}
.mobile-social-acf a:hover {
  transform: scale(1.15);
}
.mobile-social-acf img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
#hotel-booking-payment .nice-select .list li.option {
  font-size: 14px;
  color: #797979;
}
.lds-ring {
  display: none;
}
.sidebar-page-container
  .blog-single-post
  .hb-select-extra-results
  .list-room-extra {
  padding: 40px;
  border: 1px solid #e1e1e1;
  margin-bottom: 50px;
}
.sidebar-page-container
  .blog-single-post
  .hb-select-extra-results
  .list-room-extra
  li
  input[type='checkbox'] {
  position: absolute;
  left: 0px;
  top: 13px;
  width: 15px;
  height: 15px;
  border-radius: 0;
}
.sidebar-page-container
  .blog-single-post
  .hb-select-extra-results
  .list-room-extra
  li
  .hb_package_title
  > label {
  font-size: 20px;
  margin-bottom: 15px;
  font-weight: 700;
  text-transform: capitalize;
}
.sidebar-page-container
  .blog-single-post
  .hb-select-extra-results
  .list-room-extra
  li
  p {
  margin: 20px 0 0 0;
}

/*****Swiper Slider Setting******/
.room-details-section .single-items-carousel .swiper-slide .image img,
.room-details-section .single-items-carousel .thumb img {
  width: 100%;
  border-radius: 5px;
}

/* ═══════════════════════════════════════════════════════════════════
   Global Typography
   ═══════════════════════════════════════════════════════════════════ */

/* Sans-serif for body text, sub-headers, links */
body,
p,
a,
li,
.sub-title,
.text,
.footer-contact-row,
.footer-short-info {
  font-family: 'Roboto', sans-serif;
}

/* Base font-size and line-height for normal text and links */
body { font-size: 18px; line-height: 26px; }
p, .text, li { font-size: 18px; line-height: 26px; }
a { font-size: 18px; line-height: 26px; }

/* All text inside the footer */
.main-footer p,
.main-footer a,
.main-footer li,
.main-footer span,
.main-footer .text,
.main-footer .footer-contact-row,
.main-footer .footer-short-info,
.footer-bottom .text {
  font-size: 18px !important;
  line-height: 26px !important;
}

/* Hide decorative horizontal lines flanking sub-headers and remove their padding */
.sub-title:before,
.sub-title:after {
  display: none !important;
  content: none !important;
}
.sub-title {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Footer social icons */
.footer-social {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════════════
   Dark background: white colour
   ═══════════════════════════════════════════════════════════════════ */

/* Sections that carry dark_bg class directly */
section.dark_bg h1,
section.dark_bg h2,
section.dark_bg h3,
section.dark_bg h4,
section.dark_bg h5,
section.dark_bg h6,
section.dark_bg .sec-title,
section.dark_bg .sub-title,
section.dark_bg p,
section.dark_bg .text,
section.dark_bg li,
section.dark_bg a:not(.theme-btn):not(.wphb-button) {
  color: #ffffff !important;
}

/* Footer */
.main-footer h1,
.main-footer h2,
.main-footer h3,
.main-footer h4,
.main-footer h5,
.main-footer h6,
.main-footer .widget-title,
.main-footer .sub-title,
.main-footer p,
.main-footer .text,
.main-footer a,
.main-footer li,
.footer-bottom .text {
  color: #ffffff !important;
}

/* .text-light: theme class for dark-background panels — ACF header_color has !important
   so we must re-override with even higher specificity to keep text white */
.text-light h1, .text-light h2, .text-light h3,
.text-light h4, .text-light h5, .text-light h6,
.text-light .sec-title, .text-light .sub-title,
.text-light p, .text-light .text,
.text-light a:not(.theme-btn):not(.wphb-button) {
  color: #ffffff !important;
}

/* Page title section: always white text regardless of ACF colours */
section.page-title h1, section.page-title h2, section.page-title h3,
section.page-title h4, section.page-title h5, section.page-title h6,
section.page-title .sec-title, section.page-title .sub-title,
section.page-title p {
  color: #ffffff !important;
}

/* Testimonials section: dark content-block left panel */
section.testimonials-section .content-block h1,
section.testimonials-section .content-block h2,
section.testimonials-section .content-block h3,
section.testimonials-section .content-block h4,
section.testimonials-section .content-block .sec-title,
section.testimonials-section .content-block .sub-title,
section.testimonials-section .content-block p,
section.testimonials-section .content-block .award h4,
section.testimonials-section .content-block a:not(.theme-btn):not(.wphb-button) {
  color: #ffffff !important;
}

/* Horizontal rules and decorative dividers on dark backgrounds */
section.dark_bg hr,
.main-footer hr,
.main-footer .boder-bottom-four {
  border-color: rgba(255, 255, 255, 0.15) !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Footer: center alignment, typography, social icons
   ═══════════════════════════════════════════════════════════════════ */

/* Center-align everything in footer columns */
.main-footer .footer-widget { text-align: center; }
.footer-col-brand .footer-logo { display: flex; justify-content: center; }
.footer-col-brand .footer-social { justify-content: center; }
.footer-col-contact .footer-contact-header,
.footer-col-contact .footer-contact-row { text-align: center; }

/* Contact info heading: sans-serif, white underline */
.footer-col-contact .widget-title {
  font-family: 'Roboto', sans-serif !important;
  border-bottom-color: rgba(255, 255, 255, 0.35) !important;
}
.footer-contact-header { font-family: 'Roboto', sans-serif !important; }

/* Footer social icons: remove circle, scale on hover */
.footer-social-link {
  background: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 4px;
  transition: transform .2s ease !important;
}
.footer-social-link:hover {
  background: none !important;
  transform: scale(1.15);
}
.footer-social-link img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}

/* Copyright text: 14px */
.footer-bottom .text,
.footer-bottom p {
  font-size: 14px !important;
  line-height: 22px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   White text on elements that carry a background image
   ═══════════════════════════════════════════════════════════════════ */
[style*="background-image"] h1,
[style*="background-image"] h2,
[style*="background-image"] h3,
[style*="background-image"] h4,
[style*="background-image"] h5,
[style*="background-image"] h6,
[style*="background-image"] .sec-title,
[style*="background-image"] .sub-title,
[style*="background-image"] p,
[style*="background-image"] .text,
[style*="background-image"] li,
[style*="background-image"] a:not(.theme-btn):not(.wphb-button),
[style*="background-image"] span:not(.icon):not(.fas):not(.far):not(.fab) {
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Footer gallery: 1:1 square, cover crop, centred overlay icon
   ═══════════════════════════════════════════════════════════════════ */
.main-footer .footer-gallery .inner-box {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.main-footer .footer-gallery .inner-box > img {
  position: absolute !important;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block;
}
/* Overlay: stretch to fill and centre the icon with flex */
.main-footer .footer-gallery .overlay-box {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2;
}
.main-footer .footer-gallery .overlay-inner {
  position: absolute !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
}
.main-footer .footer-gallery .overlay-inner .content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════════
   All buttons — slide-left hover animation, 0px border-radius
   ═══════════════════════════════════════════════════════════════════ */

/* Base: ACF color, sharp corners, stacking context so :before z-index:-1 paints above bg */
.theme-btn,
a.theme-btn,
button.theme-btn,
.btn-style-one,
.btn-style-two,
.btn-style-three,
.wphb-button,
button.wphb-button {
  background-color: var(--main-color, #c89b6e) !important;
  border-color: var(--main-color, #c89b6e) !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 0 !important;
}

/* Slide-left :before — anchored to right, expands leftward on hover */
.theme-btn:before,
a.theme-btn:before,
button.theme-btn:before,
.btn-style-one:before,
.btn-style-two:before,
.btn-style-three:before,
.wphb-button:before,
button.wphb-button:before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 0 !important;
  background-color: var(--hover-color, #a07850) !important;
  transition: width 0.4s ease !important;
  z-index: -1 !important;
  border-radius: 0 !important;
  opacity: 1 !important;
}

/* Hover: expand :before from right to fill button */
.theme-btn:hover:before,
a.theme-btn:hover:before,
button.theme-btn:hover:before,
.btn-style-one:hover:before,
.btn-style-two:hover:before,
.btn-style-three:hover:before,
.wphb-button:hover:before,
button.wphb-button:hover:before {
  width: 100% !important;
}

/* Keep text white on hover (background handled by :before animation) */
.theme-btn:hover,
a.theme-btn:hover,
button.theme-btn:hover,
.btn-style-one:hover,
.btn-style-two:hover,
.btn-style-three:hover,
.wphb-button:hover,
button.wphb-button:hover {
  color: #ffffff !important;
}

/* Inputs: no :before pseudo-element support, plain colour transition */
input[type="submit"],
input[type="button"] {
  background-color: var(--main-color, #c89b6e) !important;
  border-color: var(--main-color, #c89b6e) !important;
  color: #ffffff !important;
  border-radius: 0 !important;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
}
input[type="submit"]:hover,
input[type="button"]:hover {
  background-color: var(--hover-color, #a07850) !important;
  border-color: var(--hover-color, #a07850) !important;
  color: #ffffff !important;
}

/* Remove hardcoded black hover on booking form button */
.check-availability .hotel-booking-search .hb-submit button:hover {
  background-color: var(--hover-color, #a07850) !important;
  outline-color: var(--hover-color, #a07850) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Gallery eye icon (.link) and scroll-to-top — adopt ACF button colours
   ═══════════════════════════════════════════════════════════════════ */

/* Gallery eye icon circle: use button colour */
.gallery-overlay .overlay-inner .link {
  background-color: var(--main-color, #c89b6e) !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
.gallery-overlay .inner-box:hover .overlay-inner .link:hover {
  background-color: var(--hover-color, #a07850) !important;
}

/* Footer gallery: force same flex centering on the link circle */
.main-footer .footer-gallery .link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  background-color: var(--main-color, #c89b6e) !important;
}

/* Scroll-to-top arrow: use button colour */
.back-to-top {
  background-color: var(--main-color, #c89b6e) !important;
  color: #ffffff !important;
}
.back-to-top:hover {
  background-color: var(--hover-color, #a07850) !important;
  color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Homepage Testimonials — .hpt- prefix, 3-up carousel, circle avatar
   ═══════════════════════════════════════════════════════════════════ */

.hpt-section { padding: 80px 0; }
.hpt-section .sec-title { margin-bottom: 50px; }

/* OWL: equal-height cards via flex */
.hpt-carousel.owl-carousel .owl-stage { display: flex !important; }
.hpt-carousel.owl-carousel .owl-item  { display: flex !important; }
.hpt-carousel .hpt-card               { width: 100%; }

/* Card shell */
.hpt-card {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.09);
  box-shadow: 0 3px 18px rgba(0,0,0,0.07);
  padding: 30px;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s ease;
}
.hpt-card:hover { box-shadow: 0 7px 28px rgba(0,0,0,0.13); }

/* Body: grows to push footer down */
.hpt-body { flex: 1; margin-bottom: 20px; }

/* Large decorative quote mark */
.hpt-quote {
  display: block;
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 0.75;
  color: var(--main-color, #c89b6e);
  margin-bottom: 14px;
  user-select: none;
}

/* Title */
.hpt-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
  margin: 0 0 10px !important;
}

/* Body text */
.hpt-text {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: #636363;
  margin: 0;
}

/* Footer: avatar + name */
.hpt-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(0,0,0,0.08);
  margin-top: auto;
}

/* 50 × 50 circle avatar */
.hpt-avatar {
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius: 50%;
  overflow: hidden;
}
.hpt-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Guest name + date column */
.hpt-author-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hpt-name {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--main-color, #c89b6e) !important;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  line-height: 1.3;
}

.hpt-date {
  font-size: 12px;
  color: rgba(0,0,0,0.45);
  margin-top: 2px;
  line-height: 1.3;
}

/* ═══════════════════════════════════════════════════════════════════
   Blog Cards — homepage carousel + archive grid
   ═══════════════════════════════════════════════════════════════════ */

/* OWL equal height for news carousel */
.news-section .news-carousel.owl-carousel .owl-stage { display: flex !important; }
.news-section .news-carousel.owl-carousel .owl-item  { display: flex !important; }
.news-section .news-carousel .blog-card              { width: 100%; display: flex; flex-direction: column; }

/* Card shell */
.blog-card {
  background: #ffffff;
  box-shadow: 0 3px 16px rgba(0,0,0,.07);
  overflow: hidden;
  transition: box-shadow .3s ease;
}
.blog-card:hover { box-shadow: 0 7px 26px rgba(0,0,0,.12); }

/* Cover image */
.blog-card-img { height: 240px; overflow: hidden; flex-shrink: 0; }
.blog-card-img a { display: block; width: 100%; height: 100%; }
.blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.blog-card:hover .blog-card-img img { transform: scale(1.05); }

/* Body */
.blog-card-body { padding: 22px 24px 24px; flex: 1; display: flex; flex-direction: column; }
.blog-card-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--main-color, #c89b6e);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.blog-card-title {
  font-size: 18px !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  flex: 1;
  margin: 0 0 16px !important;
}
.blog-card-title a { color: inherit !important; text-decoration: none; }
.blog-card-title a:hover { color: var(--main-color, #c89b6e) !important; }
.blog-card-btn { margin-top: auto; }

/* (News section overrides for old .news-block theme class — kept for safety) */
.news-section .news-carousel .inner-box { border-radius: 0 !important; }
.news-section .news-carousel .lower-content { margin-left: 0 !important; padding: 24px !important; position: static !important; }

/* ═══════════════════════════════════════════════════════════════════
   Contact Us page — two-column layout
   ═══════════════════════════════════════════════════════════════════ */
.contact-page-section { padding: 70px 0; }
.contact-page-content { padding-right: 50px; }
.contact-page-content p,
.contact-page-content li { font-size: 18px; line-height: 26px; }

.contact-sidebar {
  background: #f9f7f5;
  padding: 32px;
  border-left: 4px solid var(--main-color, #c89b6e);
  position: sticky;
  top: 100px;
}

.cs-group { margin-bottom: 28px; }
.cs-group-title {
  font-family: 'Roboto', sans-serif !important;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--main-color, #c89b6e);
}
.cs-row {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  align-items: flex-start;
}
.cs-icon {
  color: var(--main-color, #c89b6e);
  font-size: 15px;
  margin-top: 4px;
  flex-shrink: 0;
  width: 18px;
}
.cs-detail { font-size: 18px; line-height: 26px; }
.cs-detail a { font-size: 18px; line-height: 26px; text-decoration: none; }
.cs-detail a:hover { color: var(--main-color, #c89b6e); }

.cs-social {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(0,0,0,0.1);
}
.cs-social-link img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  display: block;
  transition: transform .2s ease;
}
.cs-social-link:hover img { transform: scale(1.15); }

@media (max-width: 991px) {
  .contact-page-content { padding-right: 0; padding-bottom: 40px; }
  .contact-sidebar { position: static; border-left: none; border-top: 4px solid var(--main-color, #c89b6e); }
}

/* ═══════════════════════════════════════════════════════════════════
   OWL Carousel — global arrow (nav) styling
   ═══════════════════════════════════════════════════════════════════ */

.owl-carousel .owl-nav { margin-top: 20px; text-align: center; }
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50% !important;
    border: 2px solid var(--heading-color, #222) !important;
    background: #fff !important;
    color: var(--heading-color, #222) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    margin: 0 4px;
}
.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
    background: var(--heading-color, #222) !important;
    color: #fff !important;
}
.owl-carousel .owl-nav button.owl-prev span,
.owl-carousel .owl-nav button.owl-next span {
    font-size: 22px;
    line-height: 1;
    display: block;
    margin-top: -2px;
}

/* ═══════════════════════════════════════════════════════════════════
   Homepage Rooms — equal 3-column grid + hover overlay
   ═══════════════════════════════════════════════════════════════════ */

.room-section .row { margin: 0 -8px; }
.hp-room-block { padding: 0 8px; margin-bottom: 16px; }
.hp-rb-inner { position: relative; overflow: hidden; }
.hp-rb-img { overflow: hidden; }
.hp-rb-img img {
    width: 100%;
    height: 340px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.hp-rb-inner:hover .hp-rb-img img { transform: scale(1.06); }
.hp-rb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    transition: background 0.4s ease;
    display: flex;
    align-items: flex-end;
    padding: 30px 28px;
}
.hp-rb-inner:hover .hp-rb-overlay { background: rgba(0,0,0,0.60); }
.hp-rb-content {
    transform: translateY(24px);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease;
}
.hp-rb-inner:hover .hp-rb-content {
    transform: translateY(0);
    opacity: 1;
}
.hp-rb-title {
    color: #fff !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    margin: 0 0 14px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
    line-height: 1.3 !important;
}
@media (max-width: 767px) {
    .hp-rb-img img { height: 240px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Offer (CTA) section — image at bottom-left, scrolls right on scroll-down
   ═══════════════════════════════════════════════════════════════════ */
section.cta-section {
    overflow: hidden;
}
section.cta-section .bg-image {
    position: absolute;
    bottom: 0;
    left: -220px;      /* starts overflowing 220px to the left */
    top: auto;
    right: auto;
    width: 100%;
    height: 100%;
    background-size: auto;
    background-position: bottom left;
    background-repeat: no-repeat;
    opacity: 0.5;
}

/* Amenities block — force flaticon font on icon element */
.amenities-block .icon i[class*="flaticon"] {
    font-family: "flaticon" !important;
    font-style: normal !important;
    font-weight: normal !important;
    display: inline-block;
    font-size: inherit;
    line-height: 1;
}
.amenities-block .icon i[class*="flaticon"]:before {
    font-family: "flaticon" !important;
}

/* Award container — use ACF heading color instead of theme default blue */
section.about-us-section .content-block .award,
section.about-us-section .content-block .award:before {
    background: var(--heading-color, #1d2327) !important;
}

/* Award icon image — keep it within the 153×165 container */
section.about-us-section .content-block .award .icon img {
    max-width: 80px;
    max-height: 80px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* ═══════════════════════════════════════════════════════════════════
   30% dark overlay — page-title banners + homepage hero slides
   ═══════════════════════════════════════════════════════════════════ */

/* All page-title banners */
.page-title {
    position: relative;
}
.page-title::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
    pointer-events: none;
}
.page-title .auto-container {
    position: relative;
    z-index: 2;
}

/* Homepage hero / swiper slides — physical div overlay (::before unreliable inside Swiper transforms) */
.banner-dark-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
    pointer-events: none;
}
.banner-section .swiper-slide .content-outer {
    position: relative;
    z-index: 2;
}

/* ═══════════════════════════════════════════════════════════════════
   Gallery page: 3-column CSS flex grid, square cover images
   ═══════════════════════════════════════════════════════════════════ */
.gal-grid {
    display: flex;
    flex-wrap: wrap;
    margin: -8px;
}
.gal-item {
    width: 33.333%;
    padding: 8px;
    box-sizing: border-box;
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.gal-item.gal-out {
    opacity: 0;
    transform: scale(0.92);
}
.gal-item.gal-hidden {
    display: none !important;
}
/* gallery-overlay wrapper fills the item (no padding on it) */
.gal-item .gallery-overlay {
    display: block;
}
/* Square container */
.gal-item .image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}
/* Cover image — override theme's width:100%!important with height too */
.gal-item .image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}
@media (max-width: 991px) {
    .gal-item { width: 50%; }
}
@media (max-width: 575px) {
    .gal-item { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════
   Amenities & Rooms intro description — match gallery .text style
   ═══════════════════════════════════════════════════════════════════ */
section.welcome-section-six .title-box .text {
    font-size: 18px !important;
    line-height: 26px !important;
    color: #555555 !important;
    font-style: normal !important;
}

/* Testimonials hidden (blog still visible): keep border shape, reduce spacing */
.hpt-section--hidden {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

/* Restaurant / Wellness hidden (partner section still visible): keep border shape, reduce spacing */
.service-section--hidden,
.service-section-two--hidden {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

/* Blog card fallback placeholder when no featured image */
.blog-card-img-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f0eb 0%, #d4b896 100%);
}

/* ═══════════════════════════════════════════════════════════════════
   Animated hamburger icon — replaces broken icon-bar.png
   ═══════════════════════════════════════════════════════════════════ */
.mobile-nav-toggler {
    display: none !important;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px !important;
    height: 40px !important;
    cursor: pointer;
    padding: 0;
    line-height: 1 !important;
}

@media only screen and (max-width: 1139px) {
    .mobile-nav-toggler {
        display: flex !important;
    }
}

.ham-bar {
    display: block;
    width: 22px;
    height: 2px;
    background: #242424;
    border-radius: 2px;
    transition: transform 0.35s ease, opacity 0.35s ease;
    transform-origin: center;
    flex-shrink: 0;
}

/* Hover: bars form an X */
.mobile-nav-toggler:hover .ham-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.mobile-nav-toggler:hover .ham-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.mobile-nav-toggler:hover .ham-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* Menu open (body.mobile-menu-visible): full X */
body.mobile-menu-visible .mobile-nav-toggler .ham-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
body.mobile-menu-visible .mobile-nav-toggler .ham-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
body.mobile-menu-visible .mobile-nav-toggler .ham-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}