@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap");
/*------------------------------------------------------------------
* Project:        Travelin - Travel Tour Booking HTML Templates
* Author:         bizberg_themes
* URL:            https://themeforest.net/user/bizberg_themes
* Created:        06/27/2022
-------------------------------------------------------------------
*/
/* ========================================= */
/*          Default CSS                      */
/* ========================================= */
header,
nav,
section,
article,
aside,
footer {
  display: block;
}

* {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-size: 15px;
  line-height: 1.5;
  font-family: "Inter", sans-serif;
  overflow-x: hidden;
  font-weight: 400;
  color: #777;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  font-family: "Inter", sans-serif;
  text-transform: none;
  margin: 0 0 1rem;
  color: #16232F;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/* h4-h6 are used as UI labels in this template, not display type -
   lighter weight than h1-h3 so they read as labels, not headlines */
h4, h5, h6 {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  line-height: 1.45;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: #16232F;
  transition: all ease-in-out 0.5s;
  cursor: pointer;
  text-decoration: none;
}
h1 a:hover, h1 a:focus, h2 a:hover, h2 a:focus, h3 a:hover, h3 a:focus, h4 a:hover, h4 a:focus, h5 a:hover, h5 a:focus, h6 a:hover, h6 a:focus {
  color: #A8834E;
  transition: all ease-in-out 0.5s;
  outline: none;
  text-decoration: none !important;
}

h1 {
  font-size: 46px;
}

h2 {
  font-size: 37px;
}

h3 {
  font-size: 22px;
}

h4 {
  font-size: 19px;
}

h5 {
  font-size: 16px;
}

h6 {
  font-size: 15px;
}

@media (max-width: 991px) {
  h1 {
    font-size: 38px;
  }
  h2 {
    font-size: 31px;
  }
}
@media (max-width: 735px) {
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 24px;
  }
  h3 {
    font-size: 18px;
  }
}
p {
  margin-bottom: 8px;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul li {
  margin-bottom: 0px;
  line-height: 1.5;
  color: #777;
  position: relative;
  display: inline-block;
  padding: 0;
}

ol {
  margin: 0;
  counter-reset: i;
  position: relative;
}
ol li {
  font-size: 15px;
  margin-bottom: 10px;
  line-height: 1.5;
  color: #777;
  padding-left: 0;
  position: relative;
}

a {
  color: #777;
  transition: all ease-in-out 0.5s;
  cursor: pointer;
  text-decoration: none;
}
a:hover, a:focus {
  text-decoration: none;
  color: #A8834E;
  transition: all ease-in-out 0.5s;
  outline: none;
}

a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
  color: #A8834E !important;
}

input::-moz-placeholder {
  color: #777 !important;
}

input::placeholder {
  color: #777 !important;
}

.row [class*=col-] {
  padding: 0 15px;
}

img {
  max-width: 100%;
}

.btn-info.focus, .btn-info:focus, .btn-info:active {
  outline: none;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
}

.container {
  position: relative;
  z-index: 1;
}

@media (max-width: 767px) {
  .container, .container-sm {
    max-width: 100%;
  }
}
.border {
  border-color: #f1f1f1 !important;
}

.before-none::before {
  display: none !important;
}

.white {
  color: #fff !important;
}

.theme {
  color: #A8834E !important;
}

.theme1 {
  color: #C9A971 !important;
}

.theme2 {
  color: #16232F !important;
}

.black {
  color: #3f3f3f !important;
}

.grey {
  color: #777 !important;
}

.title {
  color: #16232F !important;
}

.bg-grey {
  background: #f1f1f1 !important;
}

.bg-lgrey {
  background: #fdfdfd !important;
}

.bg-theme {
  background: #A8834E !important;
}

.bg-theme1 {
  background: #C9A971 !important;
}

.bg-theme2 {
  background: #16232F !important;
}

.bg-title {
  background: #16232F !important;
}

.bg-fblack {
  background: #000000 !important;
}

.bg-white {
  background: #fff !important;
}

.bg-lblue {
  background: #eaf7ff !important;
}

.bg-lblue2 {
  background: #7accff !important;
}

.bg-lyellow {
  background: #fff6d5 !important;
}

.bg-lyellow2 {
  background: #f3d873 !important;
}

.bg-lgreen {
  background: #d6ffd8 !important;
}

.bg-lgreen2 {
  background: #82e087 !important;
}

.bordernone {
  border: none !important;
}

.border-b {
  border-bottom: 1px dashed #f1f1f1 !important;
}

.border-all {
  border: 1px solid #f1f1f1 !important;
}

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

.rating span, .rating svg {
  color: #ffbc00;
  display: inline;
  font-size: 14px;
}
.rating.rt-sm span {
  font-size: 10px;
}

.small, small {
  font-size: 85%;
}

.fs-7 {
  font-size: 0.9rem !important;
}

.fs-8 {
  font-size: 0.8rem !important;
}

.fs-9 {
  font-size: 0.7rem !important;
}

.small-sm {
  font-size: 10px;
}

.mt-1, .my-1 {
  margin-top: 0.5rem !important;
}

.mt-2, .my-2 {
  margin-top: 1rem !important;
}

.mt-3, .my-3 {
  margin-top: 1.5rem !important;
}

.mt-4, .my-4 {
  margin-top: 2rem !important;
}

.mt-5, .my-5 {
  margin-top: 2.5rem !important;
}

.mt-6, .my-6 {
  margin-top: 3rem !important;
}

.mt-7, .my-7 {
  margin-top: 3.5rem !important;
}

.mt-8, .my-8 {
  margin-top: 4rem !important;
}

.mt-9, .my-9 {
  margin-top: 4.5rem !important;
}

.mt-10, .my-10 {
  margin-top: 5rem !important;
}

.mt-minus {
  margin-top: -5rem !important;
}

.mb-1, .my-1 {
  margin-bottom: 0.5rem !important;
}

.mb-2, .my-2 {
  margin-bottom: 1rem !important;
}

.mb-3, .my-3 {
  margin-bottom: 1.5rem !important;
}

.mb-4, .my-4 {
  margin-bottom: 2rem !important;
}

.mb-5, .my-5 {
  margin-bottom: 2.5rem !important;
}

.mb-6, .my-6 {
  margin-bottom: 3rem !important;
}

.mb-7, .my-7 {
  margin-bottom: 3.5rem !important;
}

.mb-8, .my-8 {
  margin-bottom: 4rem !important;
}

.mb-9, .my-9 {
  margin-bottom: 4.5rem !important;
}

.mb-10, .my-10 {
  margin-bottom: 5rem !important;
}

.mb-minus {
  margin-bottom: -5rem !important;
}

@media (min-width: 992px) {
  .mb-lg-0 {
    margin-bottom: 0 !important;
  }
}
.pt-1, .py-1 {
  padding-top: 0.5rem !important;
}

.pt-2, .py-2 {
  padding-top: 1rem !important;
}

.pt-3, .py-3 {
  padding-top: 1.5rem !important;
}

.pt-4, .py-4 {
  padding-top: 2rem !important;
}

.pt-5, .py-5 {
  padding-top: 2.5rem !important;
}

.pt-6, .py-6 {
  padding-top: 3rem !important;
}

.pt-7, .py-7 {
  padding-top: 3.5rem !important;
}

.pt-8, .py-8 {
  padding-top: 4rem !important;
}

.pt-9, .py-9 {
  padding-top: 4.5rem !important;
}

.pt-10, .py-10 {
  padding-top: 5rem !important;
}

.pt-14, .py-14 {
  padding-top: 7rem !important;
}

.pt-17, .py-17 {
  padding-top: 8.5rem !important;
}

.pt-18, .py-18 {
  padding-top: 9rem !important;
}

.pt-19, .py-19 {
  padding-top: 9.5rem !important;
}

.pt-20, .py-20 {
  padding-top: 10rem !important;
}

.pt-lg-7, .py-lg-7 {
  padding-top: 3.5rem !important;
}

.pb-1, .py-1 {
  padding-bottom: 0.5rem !important;
}

.pb-2, .py-2 {
  padding-bottom: 1rem !important;
}

.pb-3, .py-3 {
  padding-bottom: 1.5rem !important;
}

.pb-4, .py-4 {
  padding-bottom: 2rem !important;
}

.pb-5, .py-5 {
  padding-bottom: 2.5rem !important;
}

.pb-6, .py-6 {
  padding-bottom: 3rem !important;
}

.pb-7, .py-7 {
  padding-bottom: 3.5rem !important;
}

.pb-8, .py-8 {
  padding-bottom: 4rem !important;
}

.pb-9, .py-9 {
  padding-bottom: 4.5rem !important;
}

.pb-10, .py-10 {
  padding-bottom: 5rem !important;
}

.pb-14, .py-14 {
  padding-bottom: 7rem !important;
}

.pb-17, .py-17 {
  padding-bottom: 8.5rem !important;
}

.pb-18, .py-18 {
  padding-bottom: 9rem !important;
}

.pb-19, .py-19 {
  padding-bottom: 9.5rem !important;
}

.pb-20, .my-20 {
  padding-bottom: 10rem !important;
}

.pb-lg-7, .py-lg-7 {
  padding-bottom: 3.5rem !important;
}

.top-minus-20 {
  top: -20px !important;
}

.top-minus-40 {
  top: -40px !important;
}

.top-inherit {
  top: inherit !important;
}

.bottom-inherit {
  bottom: inherit !important;
}

.translatey-50 {
  transform: translateY(-50%);
}

.w-90 {
  width: 90% !important;
}

.w-80 {
  width: 80% !important;
}

.z-index1 {
  z-index: 1;
}

.z-index2 {
  z-index: 2;
}

.z-index3 {
  z-index: 4;
}

.form-group {
  width: 100%;
  display: inline-block;
}

input[type=text], input[type=email], input[type=number], input[type=search],
input[type=password], input[type=tel], input[type=date], input[type=time], textarea, select {
  font-size: 14px;
  font-weight: 300;
  background-color: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 10px;
  padding: 12px 20px;
  color: #777;
  margin-bottom: 0;
  height: 50px;
  box-shadow: none;
  width: 100%;
}
input[type=text]:focus, input[type=email]:focus, input[type=number]:focus, input[type=search]:focus,
input[type=password]:focus, input[type=tel]:focus, input[type=date]:focus, input[type=time]:focus, textarea:focus, select:focus {
  outline: none;
  transition: all 0.5s ease;
  box-shadow: none;
}

select {
  width: 100%;
  height: inherit;
}
select option {
  color: #3f3f3f;
}

textarea {
  border-radius: none;
  resize: vertical;
  height: 120px;
}

label {
  display: inline-block;
  color: #777;
  margin-bottom: 8px;
  font-weight: 400;
  font-size: 14px;
}

blockquote {
  font-size: 14px;
  font-weight: 400;
  background-color: #A8834E;
  margin-bottom: 15px;
  border: 0;
  padding: 30px 70px 30px 70px;
  line-height: 1.5;
  color: #fff;
  margin: 20 0;
  font-style: italic;
  position: relative;
}
blockquote :after {
  content: "";
  position: absolute;
  height: 60%;
  width: 2px;
  background: #fff;
  top: 20%;
  left: 35px;
}
blockquote p {
  color: #fff;
  margin: 0;
}
blockquote :before {
  content: "\f10d";
  font-family: "fontawesome";
  font-size: 36px;
  position: absolute;
  bottom: 26px;
  right: 20px;
  color: #fff;
  transform: rotate(180deg);
}
blockquote span {
  position: relative;
  padding-left: 20px;
}
blockquote span :before {
  content: "";
  width: 12px;
  height: 1px;
  background: #A8834E;
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -2px;
}

table > tbody tr td, table > tbody tr th, table > tfoot tr td, table > tfoot tr th, table > thead tr td, table > thead tr th {
  padding: 10px;
  vertical-align: sub !important;
  border: 1px solid #f1f1f1;
}
table > tbody tr:nth-child(even), table > tfoot tr:nth-child(even), table > thead tr:nth-child(even) {
  background: #fdfdfd;
}

table {
  width: 100%;
}
table thead tr th {
  border-bottom: none !important;
}

.overlay, .dot-overlay, .color-overlay, .white-overlay, .left-overlay, .soft-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  transition: all ease-in-out 0.5s;
  opacity: 0.5;
}

.dot-overlay {
  background: #000000 url(../images/dot-overlay.png) repeat;
  opacity: 0.6;
}

.soft-overlay {
  opacity: 0.2;
}

.color-overlay {
  top: inherit;
  bottom: 0;
  background: linear-gradient(to bottom, transparent, #000000);
  height: 50%;
  opacity: 0.6;
}

.left-overlay {
  background: linear-gradient(to left, transparent, #fff);
  height: 100%;
  opacity: 1;
}

@media (max-width: 639px) {
  .color-overlay {
    height: 100%;
    opacity: 0.4;
    background: #000000;
  }
}
.white-overlay {
  background: #fdfdfd;
  opacity: 0.5;
}

section {
  padding: 4.5rem 0 5rem;
  position: relative;
}

/*heading title*/
.section-title, .section-title-w, .section-title-l {
  position: relative;
  z-index: 1;
}
.section-title h2, .section-title-w h2, .section-title-l h2 {
  position: relative;
  line-height: 1.2;
}

.section-title-w:before {
  border-color: #fff !important;
}
.section-title-w h2 span {
  color: #16232F;
}

.section-title-l:before {
  left: 0;
  right: inherit;
}

@media (max-width: 991px) {
  .section-title {
    width: 100% !important;
  }
}
@media (max-width: 767px) {
  .section-title {
    width: 100% !important;
    text-align: center !important;
  }
  .section-title::before {
    left: 0;
    right: 0;
  }
}
.row.slick-slider {
  margin: 0 -15px;
}

iframe {
  width: 100%;
  border: none;
}

.border-t {
  border-top: 2px dashed rgba(204, 204, 204, 0.368627451);
}

.box-shadow {
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.2156862745);
}

.rounded {
  border-radius: 10px !important;
}

.rounded-start {
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
}

.rounded-top {
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
}

.nav-tabs {
  border-bottom: none;
  background: #fff;
  overflow: hidden;
  margin-bottom: 30px;
}
.nav-tabs > li.nav-item {
  margin: 0 4px;
}
.nav-tabs > li.nav-item button {
  border-radius: 10px;
  padding: 15px;
  margin: 0;
  line-height: inherit;
  border: 1px solid #f1f1f1;
  display: inline-block;
  width: 100%;
}
.nav-tabs > li.nav-item button:hover {
  color: #fff !important;
  border-color: #A8834E;
  background: #A8834E;
}
.nav-tabs > li.nav-item button.active {
  color: #fff !important;
  border-color: #A8834E;
  background: #A8834E;
}
.nav-tabs > li.nav-item button.active:hover {
  color: #fff !important;
  border-color: #A8834E;
  background: #A8834E;
}

@media (max-width: 991px) {
  .nav-tabs {
    width: 100% !important;
  }
}
@media (max-width: 767px) {
  .nav-tabs > li.nav-item {
    margin: 0 4px 4px;
  }
}
/*pagination*/
.pagination-main {
  line-height: 0.8;
}
.pagination-main .pagination {
  margin-top: 0;
  margin-bottom: 0;
  display: inline-block;
}
.pagination-main .pagination li {
  padding-left: 0;
  padding-bottom: 0;
  margin-bottom: 0;
}
.pagination-main .pagination li:before, .pagination-main .pagination li:after {
  display: none;
}
.pagination-main .pagination li a {
  padding: 0;
  height: 40px;
  line-height: 38px;
  margin-right: 9px;
  text-align: center;
  width: 40px;
  color: #3f3f3f;
  font-size: 14px;
  border: 1px solid #f1f1f1;
  display: inline-block;
  background: #fdfdfd;
  background: #fff;
  border-radius: 10px;
}
.pagination-main .pagination li a:hover, .pagination-main .pagination li a:focus {
  background-color: #A8834E;
  color: #fff !important;
  border-color: #A8834E;
}
.pagination-main .pagination li:last-child > a, .pagination-main .pagination li:last-child > span {
  border-radius: none;
  margin: 0;
}
.pagination-main .pagination li.active a {
  background: #A8834E !important;
  border-color: #A8834E !important;
  color: #fff;
}
.pagination-main .pagination .prev a, .pagination-main .pagination .next a {
  border-radius: 0px;
}

@media (max-width: 567px) {
  .pagination li a {
    height: 30px;
    width: 30px;
    line-height: 28px;
  }
}
@media (max-width: 359px) {
  .pagination li a {
    height: 28px;
    width: 28px;
    line-height: 28px;
  }
}
.fade:not(.show) {
  opacity: 1;
}

/*breadcrumb*/
.breadcrumb-main {
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}
.breadcrumb-main .breadcrumb-outer {
  background: transparent;
  position: relative;
  z-index: 1;
}
.breadcrumb-main .breadcrumb-outer:before {
  display: none;
}
.breadcrumb-main .breadcrumb-outer .breadcrumb-content, .breadcrumb-main .breadcrumb-outer .bread-content {
  position: relative;
  text-align: center;
  justify-content: center;
  z-index: 1;
}
.breadcrumb-main .breadcrumb-outer .breadcrumb-content h1, .breadcrumb-main .breadcrumb-outer .bread-content h1 {
  color: #fff;
  text-transform: uppercase;
  line-height: 0.6;
}
.breadcrumb-main .breadcrumb-outer .bread-content nav {
  left: 0;
  right: 0;
}

.breadcrumb {
  background: transparent;
  margin: 0;
  padding: 0;
  display: inline-block;
}
.breadcrumb li, .breadcrumb li.active {
  margin-bottom: 0;
  color: #fff;
}
.breadcrumb li a, .breadcrumb li.active a {
  color: #A8834E;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item:before {
  content: "|";
  color: #fff;
}

@media (max-width: 991px) {
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content {
    display: block !important;
    text-align: center !important;
  }
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content nav {
    right: 0;
    margin: 0;
  }
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h2 {
    margin: 0 !important;
  }
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1 {
    font-size: 35px;
  }
  .cover-content {
    margin-bottom: 2rem;
  }
}
@media (max-width: 811px) {
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1 {
    font-size: 31px;
  }
  .page-cover h1 {
    font-size: 31px;
  }
  .page-cover .author-detail {
    display: block !important;
  }
}
@media (max-width: 639px) {
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1 {
    font-size: 24px;
  }
  .page-cover h1 {
    font-size: 24px;
  }
}
@media (max-width: 479px) {
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content {
    text-align: center;
  }
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h1 {
    font-size: 20px;
  }
  .breadcrumb-main .breadcrumb-outer .breadcrumb-content h2 {
    display: block;
    font-size: 32px;
  }
}
/*Buttons*/
button {
  border: none;
}

.nir-btn, .nir-btn-black, .nir-btn-white {
  position: relative;
  z-index: 1;
  font-size: 14px;
  text-align: center;
  padding: 14px 24px;
  text-transform: capitalize;
  transition: all ease-in-out 0.5s;
  background: #A8834E;
  color: #fff;
  display: inline-block;
  border-radius: 10px;
  border: none;
  box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.nir-btn::before, .nir-btn-black::before, .nir-btn-white::before {
  position: absolute;
  left: 0;
  width: 0;
  height: 100%;
  top: 0;
  content: "";
  background: #C9A971;
  color: #fff !important;
  transition: all ease-in-out 0.5s;
  z-index: -1;
}
.nir-btn:hover::before, .nir-btn-black:hover::before, .nir-btn-white:hover::before {
  width: 100%;
  transition: all ease-in-out 0.5s;
}
.nir-btn:hover, .nir-btn-black:hover, .nir-btn-white:hover {
  color: #fff !important;
  transition: all ease-in-out 0.5s;
}

.nir-btn-black {
  background: #16232F;
}
.nir-btn-black:before {
  color: #fff;
}
.nir-btn-black:hover {
  background: #fff;
  color: #3f3f3f;
}
.nir-btn-black:hover:before {
  color: #C9A971;
}

.nir-btn-white {
  background: #fdfdfd;
  color: #A8834E;
}
.nir-btn-white:before {
  background: #A8834E;
}
.nir-btn-white:hover {
  background: #fff;
  color: #3f3f3f;
}
.nir-btn-white:hover:before {
  color: #C9A971;
}

input#submit {
  border: none;
}

input#submit:hover {
  opacity: 0.8;
  background: #A8834E !important;
  color: #fff;
}

.item-slider .slick-prev, .item-slider .slick-next {
  top: -124px;
  background: #fff;
  border-radius: 5px;
  border: 1px solid #f1f1f1;
  width: 50px;
  height: 50px;
  line-height: 1;
}
.item-slider .slick-prev::before, .item-slider .slick-next::before {
  color: #777;
  font-size: 16px;
  line-height: 1.5;
}
.item-slider .slick-prev:hover, .item-slider .slick-prev:focus, .item-slider .slick-next:hover, .item-slider .slick-next:focus {
  background: #A8834E;
  border-color: #A8834E;
}
.item-slider .slick-prev:hover::before, .item-slider .slick-prev:focus::before, .item-slider .slick-next:hover::before, .item-slider .slick-next:focus::before {
  color: #fff;
}
.item-slider .slick-prev {
  right: 76px;
  left: inherit;
}
.item-slider .slick-next {
  right: 16px;
}

.banner-slider .slick-prev, .banner-slider .slick-next {
  background: #C9A971;
  border-radius: 50%;
  width: 50px;
  height: 50px;
}
.banner-slider .slick-prev::before, .banner-slider .slick-next::before {
  color: #fff;
  font-size: 16px;
  line-height: 50px;
}
.banner-slider .slick-prev:hover, .banner-slider .slick-prev:focus, .banner-slider .slick-next:hover, .banner-slider .slick-next:focus {
  background: #16232F;
}
.banner-slider .slick-prev {
  left: 30px;
}
.banner-slider .slick-next {
  right: 30px;
}

.slick_arrows .slick-prev, .slick_arrows .slick-next {
  border-radius: 35px;
  background: #A8834E;
}
.slick_arrows .slick-prev {
  left: -40px;
}
.slick_arrows .slick-next {
  right: -40px;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  z-index: 999999;
}
/* Waypoint loader: a locating pulse rather than the stock flying plane, and
   drawn in CSS so it costs no request and inherits the brand colours. */
#preloader #status {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  margin: 0;
  border: 2px solid rgba(22, 35, 47, 0.12);
  border-top-color: #A8834E;
  border-radius: 50%;
  background: none;
  opacity: 1;
  transform: translate(-50%, -50%);
  visibility: visible;
  animation: pj-spin 0.9s linear infinite;
  z-index: 9999999999;
}
#preloader #status::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #16232F;
}
#preloader #status::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 58px;
  height: 58px;
  margin: -29px 0 0 -29px;
  border: 1px solid #C9A971;
  border-radius: 50%;
  animation: pj-pulse 1.8s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

@keyframes pj-spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes pj-pulse {
  0% {
    opacity: 0.55;
    transform: scale(0.7);
  }
  70% {
    opacity: 0;
    transform: scale(1.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.6);
  }
}
@media (prefers-reduced-motion: reduce) {
  #preloader #status {
    animation-duration: 2.4s;
  }
  #preloader #status::after {
    animation: none;
    opacity: 0.3;
  }
}

/* End Preloader */
#back-to-top {
  position: fixed;
  z-index: 1000;
  bottom: 20px;
  right: 20px;
  display: none;
}
#back-to-top a {
  display: block;
  width: 50px;
  height: 50px;
  background: #A8834E;
  position: relative;
  transition: all ease-in-out 0.5s;
  text-align: center;
  border-radius: 50%;
}
#back-to-top a:after {
  position: absolute;
  content: "\e607";
  font-family: "simple-line-icons";
  font-size: 16px;
  color: #fff;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

.alert {
  margin-bottom: 10px;
  color: #2ab211;
  padding: 0;
}

.alert-success {
  background: transparent;
  border: transparent;
  border-radius: 0px;
}
.alert-success h4 {
  margin-bottom: 8px;
}

.alert-error, #email-error {
  color: red;
}

#email-error {
  margin: 10px 0 0;
}

/* ========================================= */
/*          Ribbon CSS        */
/* ======================================== */
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  z-index: 2;
}
.ribbon::before, .ribbon::after {
  position: absolute;
  z-index: -1;
  content: "";
  display: block;
  border: 5px solid #666;
}
.ribbon span {
  position: absolute;
  display: block;
  width: 225px;
  padding: 10px 0;
  background-color: #C9A971;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  color: #fff;
  font-size: 16px;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  text-align: center;
}
.ribbon span.open {
  background: #5ECFB1;
}

.ribbon-top-left {
  top: -10px;
  left: -10px;
}
.ribbon-top-left:before, .ribbon-top-left:after {
  border-top-color: transparent;
  border-left-color: transparent;
}
.ribbon-top-left:before {
  top: 0;
  right: 0;
}
.ribbon-top-left:after {
  bottom: 0;
  left: 0;
}
.ribbon-top-left span {
  right: -25px;
  top: 40px;
  transform: rotate(-45deg);
}

/* ========================================= */
/*          Wickedpicker CSS        */
/* ======================================== */
.wickedpicker {
  width: 120px !important;
  height: auto !important;
  z-index: 9;
}

.wickedpicker .wickedpicker__title {
  display: none !important;
}

.wickedpicker__controls__control-up:before {
  content: "\f106" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: #909090 !important;
}

.wickedpicker__controls__control-down:after {
  content: "\f107" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  color: #909090 !important;
}

/* ========================================= */
/*          Accrodion CSS        */
/* ======================================== */
.accrodion-grp .accrodion + .accrodion {
  margin-top: 10px;
}
.accrodion-grp .accrodion .accrodion-title {
  border: 1px solid #f1f1f1;
  background: #fff;
  padding: 20px;
  cursor: pointer;
  transition: all ease-in-out 0.5s;
  border-radius: 10px;
}
.accrodion-grp .accrodion .accrodion-title h5 {
  margin: 0;
  position: relative;
  text-transform: capitalize;
  border: none;
}
.accrodion-grp .accrodion .accrodion-title h5:before {
  content: "\f107";
  font-family: "FontAwesome";
  color: #222222;
  font-size: 18px;
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
}
.accrodion-grp .accrodion .accrodion-content {
  padding-top: 10px;
}
.accrodion-grp .accrodion .accrodion-content .inner {
  padding: 30px;
}
.accrodion-grp .accrodion .accrodion-content .inner p {
  margin: 0;
  font-size: 14px;
  line-height: 25px;
  letter-spacing: 0.01em;
  color: #74787D;
}
.accrodion-grp .accrodion.active .accrodion-title {
  background: #A8834E;
  border-color: #A8834E;
}
.accrodion-grp .accrodion.active .accrodion-title h5 {
  color: #fff;
}
.accrodion-grp .accrodion.active .accrodion-title h5:before {
  content: "\f106";
  color: #fff;
}

@media (max-width: 567px) {
  .accrodion-grp .accrodion .accrodion-title h5 {
    font-size: 14px;
  }
}
/* ========================================= */
/*          Custom animation CSS        */
/* ======================================== */
@keyframes rotated {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes scale-upOne {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.2);
  }
}
@keyframes zoom-fade-two {
  0% {
    transform: scale(1.5);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.5);
  }
}
@keyframes zoom-fade {
  0% {
    transform: scale(1.2);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2);
  }
}
@keyframes slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -111px 0;
  }
}
@keyframes ripple {
  70% {
    box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes up-down {
  0% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(-20px);
  }
}
@keyframes jackInTheBox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;
  }
  50% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(3deg);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.jackInTheBox {
  animation-name: jackInTheBox;
}

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}

@keyframes animationFramesOne {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  20% {
    transform: translate(73px, -1px) rotate(36deg);
  }
  40% {
    transform: translate(141px, 72px) rotate(72deg);
  }
  60% {
    transform: translate(83px, 122px) rotate(108deg);
  }
  80% {
    transform: translate(-40px, 72px) rotate(144deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}
@keyframes animationFramesTwo {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  21% {
    transform: translate(40px, 50px) rotate(35deg);
  }
  41% {
    transform: translate(-20px, -75px) rotate(48deg);
  }
  60% {
    transform: translate(25px, 48px) rotate(125deg);
  }
  80% {
    transform: translate(16px, -15px) rotate(180deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
@keyframes animationFramesThree {
  0% {
    transform: translate(0, 0) rotate(0);
  }
  21% {
    transform: translate(4px, 10px) rotate(360deg);
  }
  41% {
    transform: translate(25px, 40px) rotate(360deg);
  }
  60% {
    transform: translate(35px, 22px) rotate(360deg);
  }
  80% {
    transform: translate(17px, 46px) rotate(360deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
  }
}
@keyframes movebounce {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0px);
  }
}
@keyframes rotateme {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/*--move-forever--*/
@keyframes move-forever {
  0% {
    transform: translate(-90px, 0%);
  }
  100% {
    transform: translate(85px, 0%);
  }
}
@keyframes ripple {
  0% {
    transform: scale(1);
  }
  75% {
    transform: scale(1.75);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
@keyframes border-transform {
  0%, to {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}
.team-slider .slick-prev, .team-slider .slick-next {
  background: #fff;
  height: 60px;
  width: 60px;
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.2156862745);
}
.team-slider .slick-prev:before, .team-slider .slick-next:before {
  font-size: 31px;
  line-height: 1.6;
  color: #A8834E;
}
.team-slider .slick-prev:hover, .team-slider .slick-prev:focus, .team-slider .slick-next:hover, .team-slider .slick-next:focus {
  opacity: 1;
  background: #A8834E;
  color: #fff;
}
.team-slider .slick-prev:hover:before, .team-slider .slick-prev:focus:before, .team-slider .slick-next:hover:before, .team-slider .slick-next:focus:before {
  color: #fff;
}
.team-slider .slick-prev {
  left: -15px;
}
.team-slider .slick-next {
  right: -15px;
}

@media (max-width: 767px) {
  .team-slider .slick-prev, .team-slider .slick-next {
    display: none !important;
  }
}
@keyframes kbrns_zoomOutIn {
  0% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}
/*Navbar*/
.navbar-default {
  background: #f5f5f5;
}

.navbar {
  border-bottom: 0;
  padding: 0;
}

.sidebar .navbar-nav {
  background: transparent;
  margin: 0;
}

.navbar.navbar-default {
  transition: none;
}

header #navbar {
  width: 100%;
  background: #f49b00;
}

.navbar-default a.navbar-brand {
  font-size: 20px;
  position: relative;
  color: #f49b00;
  letter-spacing: 2px;
  font-weight: 400;
  display: block;
  padding: 0;
  height: auto;
  transition: all ease-in-out 0.5s;
  transition: color 0.5s ease;
  -webkit-transition: color 0.5s ease;
  -moz-transition: color 0.5s ease;
  margin-right: 0;
  flex: 1;
}
.navbar-default a.navbar-brand span {
  color: #fc883a;
}
.navbar-default a.navbar-brand:hover {
  color: #D60D45;
}
.navbar-default .navbar-nav li, .navbar-default .navbar-nav li.active {
  background: #f33807;
}
.navbar-default .navbar-nav li a, .navbar-default .navbar-nav li a:hover, .navbar-default .navbar-nav li.active a, .navbar-default .navbar-nav li.active a:hover {
  background: #f33807;
}

/* Main Menu Dropdown */
.navbar-nav li {
  position: relative;
  text-align: left;
  margin-bottom: 0;
}
.navbar-nav li ul {
  z-index: 9999;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 50px;
  left: 0;
  width: 190px;
  display: none;
  border: 1px solid #f1f1f1;
  border-top: 2px solid #f33807;
  box-shadow: 0px 0px 12px -3px rgba(0, 0, 0, 0.4);
}
.navbar-nav li ul li {
  border-bottom: 1px solid #f1f1f1;
}
.navbar-nav li ul li:last-child {
  border-bottom: none;
}
.navbar-nav li ul li:hover a {
  padding-left: 20px;
  padding-right: 10px;
  text-decoration: none;
}
.navbar-nav li ul li:hover ul li a {
  padding-left: 15px;
  padding-right: 15px;
}
.navbar-nav li ul li a {
  display: block;
  padding: 7px 15px;
  font-size: 14px;
  font-weight: 500;
  color: #636363;
}
.navbar-nav li ul li a:hover {
  color: #f33807;
}
.navbar-nav li ul li ul {
  position: absolute;
  left: 188px;
  top: -2px;
}
.navbar-nav li ul li ul li ul li:hover a {
  padding-left: 20px;
  padding-right: 10px;
}

.navbar-nav li > ul > li:last-child > a {
  border-bottom: 0;
}
.navbar-nav li > ul > li ul > li:last-child > a {
  border-bottom: 0;
}

.main_header_area {
  position: relative;
  width: 100%;
}
.main_header_area .notify-bar {
  background: linear-gradient(to right, #e9595e 1%, #dcb86c 100%);
  position: relative;
  padding: 3px 0;
}
.main_header_area .notify-bar .notify-in {
  position: relative;
}
.main_header_area .notify-bar .notify-in y a.shop-btn {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.main_header_area .header-content {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.1882352941);
}
.main_header_area .header-content li {
  display: inline-block;
  padding: 0px 15px;
  border-left: 1px solid rgba(241, 241, 241, 0.2117647059);
  margin: 0;
}
.main_header_area .header-content li:first-child {
  border: none;
  padding-left: 0;
}
.main_header_area .header-content li:last-child {
  padding-right: 0;
}
.main_header_area .header-content a, .main_header_area .header-content i {
  font-size: 14px;
}
.main_header_area .header_menu.fixed-top {
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.2156862745);
  background: #fff;
}
.main_header_area .header_menu.hide {
  top: -94px;
  animation-name: slideInUp;
}
.main_header_area .register-login a {
  font-size: 14px;
  text-transform: uppercase;
  color: #777;
}
.main_header_area .register-login .dropdown a {
  color: #777 !important;
  text-transform: capitalize;
}
.main_header_area .register-login .btn-info {
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 0;
}

.main_header_area .header_menu.fixed-top .register-login a {
  color: #777 !important;
}
.main_header_area .header_menu.fixed-top .register-login a.nir-btn {
  color: #fff !important;
}
.main_header_area .header_menu.fixed-top .register-login a.nir-btn:hover {
  color: #fff !important;
}

.main_header_area.headerstye-1 {
  position: absolute;
  width: 100%;
}
.main_header_area.headerstye-1 .header_menu .navbar.navbar-default .navbar-header .navbar-brand {
  padding: 0;
  margin: 0;
}
.main_header_area.headerstye-1 .header_menu .navbar.navbar-default .navbar-header .navbar-brand img {
  display: block;
}
.main_header_area.headerstye-1 .header_menu .navbar.navbar-default .navbar-header .navbar-brand img + img {
  display: none;
}
.main_header_area.headerstye-1 .header_menu .navbar.navbar-default .nav.navbar-nav li {
  margin-right: 0;
}
.main_header_area.headerstye-1 .header_menu .navbar.navbar-default .nav.navbar-nav li a {
  color: #fff;
  padding: 10px;
}
.main_header_area.headerstye-1 .header_menu .navbar.navbar-default .nav.navbar-nav li:hover > a {
  color: #A8834E;
}
.main_header_area.headerstye-1 .header_menu .navbar.navbar-default .nav.navbar-nav li.active > a {
  color: #A8834E;
}
.main_header_area.headerstye-1 .header_menu .search-main a i {
  color: #fff;
}
.main_header_area.headerstye-1 .header_menu.fixed-top .navbar-default {
  background: #fff;
}
.main_header_area.headerstye-1 .header_menu.fixed-top .navbar-default .navbar-header .navbar-brand {
  padding: 0;
  margin: 0;
}
.main_header_area.headerstye-1 .header_menu.fixed-top .navbar-default .navbar-header .navbar-brand img {
  display: none !important;
}
.main_header_area.headerstye-1 .header_menu.fixed-top .navbar-default .navbar-header .navbar-brand img + img {
  display: block !important;
}
.main_header_area.headerstye-1 .header_menu.fixed-top .search-main a i {
  color: #777;
}

@media (max-width: 1400px) and (min-width: 1300px) {
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav li a, .main_header_area.headerstye-1 .header_menu .navbar.navbar-default .nav.navbar-nav li a {
    padding: 10px 6px;
    font-size: 14px;
  }
}
@media (max-width: 991px) {
  .headerstye-1 .header-content {
    display: none;
  }
  .headerstye-1 .navbar-header {
    display: block;
  }
  .main_header_area .header-content, .search-main {
    display: none !important;
  }
}
@media (max-width: 735px) {
  .main_header_area .header-content {
    display: none !important;
  }
}
.header_menu .navbar.navbar-default {
  border-radius: 0px;
  margin-bottom: 0px;
  background: transparent;
  border: none;
  width: 100%;
  z-index: 9;
}
.header_menu .navbar.navbar-default .navbar-header .navbar-brand {
  padding: 0;
  margin: 0;
}
.header_menu .navbar.navbar-default .navbar-header .navbar-brand img {
  display: block;
  height: 52px;
  width: auto;
}
@media (min-width: 992px) {
  .header_menu .navbar.navbar-default .navbar-header {
    margin-left: calc((100% - 100vw) / 4);
  }
}
.header_menu .navbar.navbar-default .navbar-header .navbar-brand img + img {
  display: none;
}
.header_menu .navbar.navbar-default .navbar-collapse {
  text-align: right;
  padding: 0;
}
.header_menu .navbar.navbar-default .nav.navbar-nav {
  float: none;
  text-align: right;
  display: inline-block;
  background: transparent;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li {
  float: none;
  display: inline-block;
  margin-right: 0;
  background: transparent;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li:last-child {
  margin: 0;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li a {
  background: transparent;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  padding: 0px;
  line-height: inherit;
  transition: all 150ms linear;
  border: none;
  padding: 0 8px;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li a i {
  font-size: 12px;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li a i.fa-angle-right {
  position: absolute;
  right: 15px;
  top: 20px;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li a:after {
  display: none;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li:hover a, .header_menu .navbar.navbar-default .nav.navbar-nav li.active a {
  color: #A8834E;
  background: transparent;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu {
  position: relative;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu {
  border: none;
  padding: 0px;
  border-radius: 0px;
  box-shadow: none;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #eeeeee transparent transparent transparent;
  position: absolute;
  right: 24px;
  top: 45px;
  z-index: 3;
  opacity: 0;
  transition: all 400ms linear;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li {
  display: block;
  float: none;
  margin-right: 0px;
  border-bottom: 1px dashed #f1f1f1;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a {
  line-height: 2.5;
  color: #777;
  font-size: 14px;
  padding: 3px 20px;
  font-weight: 400;
  letter-spacing: 0.3px;
  transition: all 150ms linear;
  display: flex;
  text-transform: capitalize;
  align-items: center;
  justify-content: space-between;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a:hover {
  background: #A8834E;
  color: #fff;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li:last-child {
  border-bottom: none;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li ul {
  overflow: visible;
}
.header_menu .navbar.navbar-default .nav.navbar-nav.navbar-right li:last-child {
  margin-right: 0px;
}
.header_menu .navbar.navbar-default.navbar-sticky-in .nav.navbar-nav li:hover > a, .header_menu .navbar.navbar-default.navbar-sticky-in .nav.navbar-nav li.active > a {
  color: #A8834E;
}

.main_header_area .header_mlogo .navbar.navbar-default .navbar-header {
  display: none;
  transition: all ease-in-out 0.5s;
}
.main_header_area .header_mlogo .navbar.navbar-default.navbar-sticky-in .navbar-header {
  display: block;
  transition: all ease-in-out 0.5s;
}
.main_header_area .header_mlogo .navbar.navbar-default.navbar-sticky-in .navbar-middle {
  display: none;
  transition: all ease-in-out 0.5s;
}
.main_header_area .header_menu.header_mlogo1.fixed-top {
  position: relative;
  animation: none;
  top: 0;
}

@media (max-width: 991px) {
  .main_header_area .header_mlogo .navbar.navbar-default .navbar-header {
    display: block;
  }
  .navbar-middle {
    display: none;
  }
  .header-start {
    padding-top: 0 !important;
  }
}
/*Fullpage search*/
#search1 {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  transition: all 0.5s ease-in-out;
  transform: translate(0px, -100%) scale(0, 0);
  opacity: 0;
}
#search1 input[type=search] {
  position: absolute;
  top: 40%;
  width: 50%;
  color: #777;
  background: transparent;
  font-size: 38px;
  font-weight: 400;
  text-align: center;
  border-width: 0 0 1px;
  margin: 0px auto;
  padding: 20px 30px;
  outline: none;
  margin-bottom: 30px;
  height: 82px;
  left: 0;
  right: 0;
  border-radius: 0;
  border-bottom: 1px solid #f1f1f1;
}
#search1 .btn {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  background: #A8834E;
  padding: 15px 30px;
  border: none;
  border-radius: 10px;
  font-size: 16px;
  width: 10%;
}
#search1 .close {
  position: fixed;
  top: 15px;
  right: 15px;
  color: #fff;
  background-color: #A8834E;
  border-color: #A8834E;
  opacity: 1;
  padding: 4px 16px;
  border-radius: 10px;
  font-size: 23px;
}

#search1.open {
  transform: translate(0px, 0px) scale(1, 1);
  opacity: 1;
}

.header_sidemenu .header_sidemenu_in .overlay {
  width: 100%;
  height: 100%;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 999;
  transition: opacity 0.25s ease, visibility 0s ease 0.25s;
}
.header_sidemenu .header_sidemenu_in .overlay.show {
  opacity: 0.8;
  visibility: visible;
  background: #000000;
  transition: opacity 0.25s ease, visibility 0s ease;
}
.header_sidemenu .header_sidemenu_in .overlay.hide {
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  transition: opacity 0.25s ease, visibility 0s ease 0.25s;
}
.header_sidemenu .header_sidemenu_in .menu {
  width: 380px;
  height: 100%;
  position: fixed;
  right: -500px;
  top: 0;
  z-index: 9999;
  background-color: #fff;
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.2156862745);
  transition: all ease 0.5s;
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.2156862745);
}
.header_sidemenu .header_sidemenu_in .menu .close-menu {
  float: right;
  font-size: 18px;
  cursor: pointer;
  position: absolute;
  z-index: 1;
  top: 10px;
  right: 10px;
}
.header_sidemenu .menu-ham {
  cursor: pointer;
}

.menu-ham {
  cursor: pointer;
}
.menu-ham a i {
  transition: all ease-in-out 0.5s;
}
.menu-ham a i:hover {
  background: #A8834E !important;
  color: #fff !important;
  transition: all ease-in-out 0.5s;
}

@media (min-width: 992px) {
  .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu {
    position: absolute;
    top: 40px;
    left: 0px;
    min-width: 250px;
    background: #fff;
    box-shadow: 0 0 15px rgba(204, 204, 204, 0.3411764706);
    text-align: left;
    opacity: 0;
    transition: all ease-in-out 0.5s;
    visibility: hidden;
    display: block;
    border: none;
    padding: 0px;
    border-radius: 0px;
  }
  .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li.submenu .dropdown-menu {
    transform: translateZ(0);
    transform: scaleY(0);
    transform-origin: 0 50%;
    position: absolute;
    left: 100%;
    right: auto;
    width: auto;
    top: 0;
  }
  .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li.submenu .dropdown-menu li a {
    line-height: 3;
    color: #777;
    font-size: 14px;
    padding: 3px 20px;
    letter-spacing: 0.3px;
    transition: all 150ms linear;
    display: block;
  }
  .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li.submenu .dropdown-menu li:hover a {
    color: #fff;
  }
  .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li.submenu:hover .dropdown-menu {
    transform: scale(1, 1);
  }
  .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu:hover ul {
    left: 0px;
    visibility: visible;
    opacity: 1;
  }
}
header {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  z-index: 22;
}

.logo a {
  font-size: 24px;
  color: #fff;
}
.logo a [class^=flaticon-]:before {
  font-size: 24px;
  color: #fff;
}

nav.navbar.navbar-default .logo-white {
  display: block;
}
nav.navbar.navbar-default .logo-black {
  display: none;
}

nav.navbar.navbar-default.navbar-sticky-in .logo-white {
  display: none;
}
nav.navbar.navbar-default.navbar-sticky-in .logo-black {
  display: block;
}

.nav-btn {
  display: inline-block;
}

.navbar-sticky-in .nir-btn:hover {
  color: #A8834E;
}

/*Fullpage search*/
.search-wrapper {
  position: relative;
  min-width: 250px;
  display: inline-block;
}
.search-wrapper .search_module {
  position: relative;
}
.search-wrapper .search_module .icon-left {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  transition: all ease-in-out 0.5s;
  z-index: 10;
  color: #fff;
}
.search-wrapper .search_module .search_area form .input-group {
  margin: 0;
}
.search-wrapper .search_module .search_area form .input-group .form-control {
  background: none;
  padding-left: 40px;
  border: 1px solid rgba(255, 255, 255, 0.137254902);
  transition: all ease-in-out 0.5s;
  font-weight: 400;
  width: 100%;
  color: #fff;
}
.search-wrapper .search_module .search_area form .input-group .form-control::-moz-placeholder {
  -moz-transition: all ease-in-out 0.5s;
  transition: all ease-in-out 0.5s;
  color: #fdfdfd;
}
.search-wrapper .search_module .search_area form .input-group .form-control::placeholder {
  transition: all ease-in-out 0.5s;
  color: #fdfdfd;
}
.search-wrapper .search_module .search_area form .input-group .form-control:focus {
  outline: 0;
  box-shadow: none;
}
.search-wrapper .search_module.active + .search-categories {
  visibility: visible;
  opacity: 1;
}
.search-wrapper .search_module.active .search_area form .input-group .form-control {
  border: none;
  padding-left: 2.66667rem;
  border: 1px solid rgba(255, 255, 255, 0.137254902);
  font-weight: 400;
}
.search-wrapper .search_module.active .search_area form .input-group .form-control:focus {
  border: none;
}

.main_header_area.headerstye-1 .header_menu.fixed-top {
  background: #fff;
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.3411764706);
}
.main_header_area.headerstye-1 .header_menu.fixed-top .navbar.navbar-default .navbar-header .navbar-brand img + img {
  display: block;
}
.main_header_area.headerstye-1 .header_menu.fixed-top .navbar.navbar-default .nav.navbar-nav li > a {
  color: #777;
}
.main_header_area.headerstye-1 .header_menu.fixed-top .navbar.navbar-default .nav.navbar-nav li.active > a {
  color: #A8834E;
}
.main_header_area.headerstye-1 .header_menu.fixed-top .search-wrapper .search_module .search_area form .input-group .form-control {
  border-color: #f1f1f1;
  color: #777;
}
.main_header_area.headerstye-1 .header_menu.fixed-top .search-wrapper .search_module .search_area form .input-group .form-control::-moz-placeholder {
  color: #777;
}
.main_header_area.headerstye-1 .header_menu.fixed-top .search-wrapper .search_module .search_area form .input-group .form-control::placeholder {
  color: #777;
}
.main_header_area.headerstye-1 .header_menu.fixed-top .search-wrapper .search_module .icon-left {
  color: #777;
}

.fade.in {
  opacity: 1;
}

.modal__overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-backdrop {
  background: transparent;
}

.modal__container {
  overflow-x: hidden;
  overflow-y: auto;
}
.modal__container .modal__content {
  background-color: #fff;
  width: 450px;
  border-radius: 0px;
  position: relative;
  overflow: hidden;
}
.modal__container .modal__content .login-content {
  background: #fff;
  text-align: center;
  position: relative;
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.2156862745);
}
.modal__container .modal__content .login-content .section-border {
  padding: 20px 30px;
  border-top: 1px dashed #f1f1f1;
}
.modal__container .modal__content .login-content .form-checkbox {
  text-align: left;
}
.modal__container .modal__content .login-content a.btn-facebook, .modal__container .modal__content .login-content a.btn-twitter, .modal__container .modal__content .login-content a.btn-google {
  padding: 8px 20px;
  color: #fff;
  background: #ccc;
  border-radius: 0px;
  display: inline-block;
  border: 1px solid #395899;
}
.modal__container .modal__content .login-content a.btn-facebook {
  background: #395899;
}
.modal__container .modal__content .login-content a.btn-twitter {
  background: #04a9e1;
  border-color: #04a9e1;
}
.modal__container .modal__content .login-content a.btn-google {
  background: #db3236;
}
.modal__container .modal__content .login-content .sign-up {
  padding: 20px 0;
  border-top: 1px dashed #f1f1f1;
}
.modal__container .modal__content button.close {
  background: #A8834E;
  color: #fff;
  position: absolute;
  top: 0;
  right: 0;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  opacity: 1;
  text-align: center;
  line-height: 0.5;
  font-size: 18px;
  padding: 0;
  z-index: 9;
  transition: all ease-in-out 0.5s;
}
.modal__container .modal__content button.close:focus {
  border: none;
  outline: none;
}

.modal-open {
  padding: 0 !important;
}
.modal-open .modal {
  background: rgba(0, 0, 0, 0.6784313725);
  overflow: hidden;
  padding-right: 0 !important;
}
.modal-open .modal .modal-dialog {
  max-width: 920px;
  top: 5%;
}
.modal-open .modal .modal-dialog .modal-content {
  border: none;
  position: relative;
  border-radius: 0;
}
.modal-open .modal .modal-dialog .modal-content .modal-body {
  padding: 20px;
}
.modal-open .modal .modal-dialog .modal-content .login-content {
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.2156862745);
}

@media (max-width: 991px) {
  .modal-open .modal .modal-dialog {
    max-width: 80%;
    margin: 0 auto;
  }
  .modal-open .modal .modal-dialog .blog-full .blog-image > a {
    height: 280px;
  }
}
.log-reg .nav-pills {
  margin-bottom: 20px;
}
.log-reg .nav-pills .nav-link {
  padding: 14px 18px;
}
.log-reg .nav-pills .nav-link.active, .log-reg .nav-pills .show > .nav-link {
  background: #A8834E;
  border-radius: 10px;
}
.log-reg .btn-fb, .log-reg .btn-google {
  padding: 14px 18px;
  text-align: center;
  background: #506dab;
  color: #fff;
  border-radius: 10px;
  font-size: 14px;
}
.log-reg .btn-google {
  background: #dd4b39;
}
.log-reg hr.log-reg-hr {
  opacity: 1;
  background-color: #ccc;
}
.log-reg hr.log-reg-hr::before {
  background-color: #ffffff;
  bottom: 0;
  color: #A8834E;
  content: "Or";
  font-size: 15px;
  position: absolute;
  left: 0;
  margin: 0 auto;
  right: 0;
  text-align: center;
  top: -12px;
  width: 10%;
}

@media (max-width: 1100px) {
  .search-wrapper {
    width: 200px;
  }
}
@media (max-width: 1100px) {
  .slicknav_btn.slicknav_open:before, .slicknav_btn.slicknav_collapsed:before,
  .headerstye-1 .navbar-sticky-in .slicknav_btn.slicknav_open:before,
  .headerstye-1 .navbar-sticky-in .slicknav_btn.slicknav_collapsed:before {
    color: #444 !important;
  }
  .headerstye-1 .slicknav_btn.slicknav_open:before,
  .headerstye-1 .slicknav_btn.slicknav_collapsed:before {
    color: #fff !important;
  }
  .dropdown-toggle::after, .search-wrapper,
  .header_menu .navbar.navbar-default a.cart-icon, .register-login {
    display: none !important;
  }
}
/* ========================================= */
/*          Banner  CSS        */
/* ======================================== */
.banner {
  padding: 0;
  background-size: cover;
  background-position: center;
  background-repeat: repeat-x;
}
.banner .slider {
  height: 680px;
  position: relative;
}
.banner .slider .swiper-container {
  width: 100%;
  height: 100%;
}
.banner .slider .swiper-container .swiper-slide {
  overflow: hidden;
}
.banner .slider .swiper-container .swiper-slide .slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}
.banner .slider .swiper-container .swiper-slide .slide-inner .slide-image {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}
.banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content {
  top: 45.6%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  width: 40%;
  position: absolute;
  z-index: 9;
}
.banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content .nir-btn-black:hover {
  background-color: #fff;
}
.banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content > h1 {
  letter-spacing: 1px;
  font-weight: 700;
}
.banner .slider .swiper-container-horizontal > .swiper-pagination-bullets {
  bottom: 40px;
}
.banner .slider .swiper-pagination-custom .swiper-pagination-fraction {
  bottom: 40px;
}
.banner .slider .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #fff;
  opacity: 1;
}
.banner .slider .swiper-pagination-bullet-active {
  background: #A8834E;
}
.banner .slider .swiper-container-vertical > .swiper-pagination-bullets {
  right: 50px;
}
.banner .slider1 .swiper-container .swiper-slide .slide-inner .swiper-content {
  width: 40%;
  position: absolute;
  z-index: 999;
  right: auto;
  left: 7%;
  text-align: left;
}
.banner .slider2 {
  padding: 0;
  height: 570px !important;
}
.banner .slider2 .swiper-container .swiper-slide .slide-inner .slide-image {
  width: 100%;
}
.banner .slider2 .swiper-container .swiper-slide .slide-inner .swiper-content {
  top: auto;
  transform: none;
  bottom: 0;
  left: 0;
  width: 100%;
  position: absolute;
  z-index: 999;
  right: 0;
  margin: 0 auto;
  padding: 40px;
  background: transparent;
  box-shadow: none;
}
.banner .slider2 .swiper-container .swiper-slide .slide-inner .swiper-content > h1.s-title1 {
  font-size: 24px;
}
.banner .slider2 .swiper-container .swiper-slide .slide-inner .color-overlay {
  height: 100%;
}
.banner .video-slider {
  height: auto;
}
.banner .video-slider .swiper-content {
  top: 56%;
  transform: translateY(-50%);
  left: 0;
  width: 60%;
  right: 0;
  text-align: center;
  margin: 0 auto;
  position: absolute;
  z-index: 3;
}
.banner .video-slider .swiper-content > h1 {
  font-size: 46px;
  letter-spacing: 1px;
  margin-bottom: 0;
}
.banner .video-slider .video-banner video {
  width: 100%;
  display: block;
}
.banner .banner-main {
  height: 630px;
  position: relative;
}
.banner .banner-main .banner-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: top;
}
.banner .banner-main .banner-content {
  top: 45%;
  right: 0;
  left: 0;
  width: 55%;
  position: absolute;
  z-index: 9;
  text-align: center;
  margin: 0 auto;
  transform: translateY(-50%);
}
.banner .banner-main .banner-content > h1 {
  font-size: 46px;
  letter-spacing: 1px;
  font-weight: 700;
}
.banner .banner-main .banner-content p {
  font-size: 18px;
}
.banner .banner-slide {
  height: 500px;
}
.banner .banner-in .banner-image {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  animation: movebounce 5s infinite;
}
.banner .swiper-button-next {
  right: 30px;
}
.banner .swiper-button-prev {
  left: 30px;
}
.banner .swiper-button-next:after, .banner .swiper-button-prev:after {
  background: #A8834E;
  font-size: 18px;
  padding: 10px 20px;
  color: #fff;
  transition: all ease-in-out 0.5s;
  height: 50px;
  width: 50px;
  border-radius: 50%;
}
.banner .swiper-button-next:hover:after, .banner .swiper-button-prev:hover:after {
  background: #C9A971;
  color: #fff;
  transition: all ease-in-out 0.5s;
}
.banner .slider-before:before {
  background: #f1f1f1;
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
}
.banner .slick-content-inner {
  position: absolute;
  top: 45%;
  width: 60%;
  left: 0;
  right: 0;
  text-align: center;
  margin: 0 auto;
  z-index: 1;
}
.banner .slider-thumbs {
  position: absolute !important;
  bottom: 0;
  width: 100%;
  left: 0;
  right: 0;
  background: #fdfdfd;
  margin: 0 auto !important;
  overflow: hidden;
}
.banner .slider-thumbs .slick-prev, .banner .slider-thumbs .slick-next {
  background: #A8834E;
}
.banner .slider-thumbs .slick-prev {
  left: 10px;
}
.banner .slider-thumbs .slick-next {
  right: 10px;
}
.banner .slider-thumbs .slick-slide {
  opacity: 0.7;
}
.banner .slider-thumbs .slick-slide.slick-current.slick-active.slick-center {
  opacity: 1;
}

@media (max-width: 1370px) and (min-width: 1368px) {
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content {
    width: 60%;
  }
  .banner .slider1 .swiper-container .swiper-slide .slide-inner .swiper-content {
    width: 40%;
  }
}
@media (max-width: 1100px) {
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content, .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content1, .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content2 {
    width: 75% !important;
  }
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content h1, .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content1 h1, .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content2 h1 {
    font-size: 38px;
  }
  .banner .video-slider .swiper-content {
    width: 85% !important;
  }
  .banner .video-slider .swiper-content h1 {
    font-size: 40px;
  }
  .banner .banner-main .banner-content {
    width: 90%;
  }
  .banner .slider.slider3 .swiper-container .swiper-slide .slide-inner .swiper-content1 > h1 {
    font-size: 31px;
  }
}
@media (max-width: 991px) {
  .banner .slider .swiper-container .swiper-slide .slide-inner .slide-image {
    width: 100%;
    left: 0;
  }
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content {
    top: 60%;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content h1 {
    font-size: 32px;
  }
  .banner .slider .swiper-container .slider-before .swiper-content {
    top: 50% !important;
  }
  .banner .slider .swiper-container .slider-before:before {
    background: #C9A971;
    width: 100%;
    opacity: 0.7;
  }
  .banner .slider .swiper-container .slider-before span a, .banner .slider .swiper-container .slider-before h1 a, .banner .slider .swiper-container .slider-before p {
    color: #fff;
  }
  .banner .banner-main {
    height: auto;
  }
  .banner .banner-main .banner-content {
    top: 50%;
    transform: translateY(-50%);
  }
  .banner .banner-in .banner-content {
    width: 100% !important;
  }
  .banner .banner-in .banner-content {
    width: 100% !important;
  }
  .banner .banner-in .banner-content .input-box {
    border: none !important;
  }
  .banner .banner-in .banner-content .nir-btn {
    padding: 14px 24px !important;
    margin: 0 1.5rem 1.5rem;
    width: 50% !important;
  }
  .slider-thumbs {
    position: relative !important;
    bottom: 0;
    width: 100%;
    left: 0;
    right: 0;
    padding: 0;
    background: transparent;
  }
  .slick-content-inner {
    width: 90%;
    top: 50%;
    transform: translateY(-50%);
  }
  .search-banner-in .col-lg-6 {
    padding: 0 15px !important;
  }
}
@media (max-width: 767px) {
  .banner .slider .swiper-container .swiper-slide .slide-inner::before {
    display: none;
  }
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content {
    width: 90% !important;
    left: 0;
    right: 0;
    top: 60%;
    text-align: center;
    margin: 0 auto;
  }
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content span {
    padding-left: 0;
  }
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content span:before {
    display: none;
  }
  .banner .slider .swiper-container .swiper-slide .slide-inner .overlay {
    width: 100%;
  }
  .banner .slider .swiper-button-prev, .banner .slider .swiper-button-next {
    display: none;
  }
  .banner .swiper-button-prev, .banner .swiper-button-next {
    display: none;
  }
  .banner .top50 .swiper-container .swiper-slide .slide-inner .swiper-content {
    top: 50%;
  }
  .banner .swiper-button-prev, .banner .swiper-button-next {
    display: none;
  }
}
@media (max-width: 639px) {
  .banner .container {
    padding: 0;
  }
  .banner .slider {
    overflow: visible;
    padding: 0 !important;
  }
  .banner .slider .swiper-container .swiper-slide .slide-inner .slide-image {
    width: 100%;
    position: relative;
    top: inherit;
    left: inherit;
    right: inherit;
    transform: none;
  }
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content > h1 {
    font-size: 27px;
  }
  .banner .slider .swiper-container-vertical > .swiper-pagination-bullets {
    display: none;
  }
  .banner .video-slider .swiper-content {
    display: none;
  }
  .banner .banner-main .banner-content > h1 {
    font-size: 24px;
  }
  .search-banner-list .search-banner-item {
    display: block !important;
    text-align: center;
  }
  .search-banner-list .search-banner-item .search-banner-item-ctn {
    width: 100% !important;
    margin: 15px 0 0 !important;
  }
}
@media (max-width: 400px) {
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content .entry-meta, .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content .entry-date, .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content .entry-category {
    display: block !important;
    margin-bottom: 15px;
  }
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content .entry-author {
    margin-bottom: 15px;
  }
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content .entry-author .entry-date {
    margin-bottom: 0;
  }
  .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content > h1 {
    font-size: 20px;
  }
  .banner .slider .swiper-container-vertical > .swiper-pagination-bullets {
    display: none;
  }
  .banner .video-slider .swiper-content {
    display: none;
  }
  .banner .banner-main .banner-content > h1 {
    font-size: 20px;
  }
  .slider-thumbs, .slick-content-inner {
    display: none !important;
  }
}
#particles-js {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

/* ========================================= */
/*          Banner Form  CSS        */
/* ======================================== */
.form-main {
  position: relative;
  display: block;
  z-index: 2;
}
.form-main .form-content {
  box-shadow: 0px 0px 30px rgba(204, 204, 204, 0.3411764706);
  margin: -76px auto 0;
  background: #fff;
  border-radius: 0px;
  z-index: 2;
}
.form-main .form-content .input-box {
  position: relative;
  width: 100%;
}
.form-main .form-content .input-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.form-main .form-content .input-box [class^=fa-]:before {
  color: #ef2853;
  font-weight: 600;
}
.form-main .form-content .form-navtab {
  position: absolute;
  top: -57px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.form-main .form-content .form-navtab .nav-tabs {
  border: none;
  padding: 0px;
  display: inline-block;
}
.form-main .form-content .form-navtab .nav-tabs li button {
  border-radius: 0;
  background: #fff;
  border: none;
  padding: 15px 30px;
  transition: all 0.5s;
  border-radius: 0;
}
.form-main .form-content .form-navtab .nav-tabs li i {
  color: #444;
  margin-right: 5px;
  transition: all 0.5s;
}
.form-main .form-content .form-navtab .nav-tabs li:hover button {
  background: #16232F;
  color: #fff;
  border: none;
  transition: all 0.5s;
}
.form-main .form-content .form-navtab .nav-tabs li:hover button i {
  color: #fff;
  transition: all 0.5s;
}
.form-main .form-content .form-navtab .nav-tabs li button.active {
  background: #16232F;
  color: #fff;
  border: none;
  transition: all 0.5s;
}
.form-main .form-content .form-navtab .nav-tabs li button.active i {
  color: #fff;
  transition: all 0.5s;
}
.form-main .form-content .tab-content {
  box-shadow: 0px 0px 30px rgba(204, 204, 204, 0.3411764706);
  padding: 30px;
  background: #fff;
}
.form-main .form-content.form-content1 {
  top: -20px;
}
.form-main .form-content.form-content2 {
  padding: 0;
  box-shadow: none;
  top: 0;
}
.form-main .form-content.form-content2 .input-box {
  position: relative;
  display: inline-block;
  width: 100%;
}
.form-main .form-content.form-content2 .input-box input, .form-main .form-content.form-content2 .input-box .nice-select {
  border-width: 0 0 1px;
}
.form-main .form-content.form-content2 .input-box i {
  color: #16232F;
  font-weight: 600;
  left: 0;
}
.form-main .form-content.form-content3 {
  padding: 0;
  box-shadow: none;
  top: 0;
  background: transparent;
}
.form-main .form-content.form-content3 .input-box {
  position: relative;
  display: inline-block;
  width: 100%;
}
.form-main .form-content.form-content3 .input-box input, .form-main .form-content.form-content3 .input-box .nice-select {
  border-width: 0 0 1px;
  background: transparent;
  color: #fff;
}
.form-main .form-content.form-content3 .input-box input::-moz-placeholder, .form-main .form-content.form-content3 .input-box .nice-select::-moz-placeholder {
  color: #fff !important;
}
.form-main .form-content.form-content3 .input-box input::placeholder, .form-main .form-content.form-content3 .input-box .nice-select::placeholder {
  color: #fff !important;
}
.form-main .form-content.form-content3 .input-box i {
  color: #16232F;
  font-weight: 600;
  left: 0;
}

.form-main1 {
  position: absolute;
  bottom: 30px;
  left: 0;
  right: 0;
}

.book-form1 .nice-select, .book-form1 input {
  border-width: 0 0 1px 0;
  border-radius: 0;
  padding: 12px 0px;
}

@media (max-width: 1100px) {
  .form-main .form-content {
    width: 88% !important;
  }
  .form-main .form-content.form-content1 {
    top: 0;
  }
}
@media (max-width: 991px) {
  .form-main .form-content {
    margin: 5rem auto 0.25rem !important;
    left: 0;
    position: relative;
    top: 0;
  }
  .form-main .form-content .form-group {
    padding-right: 0 !important;
    margin-bottom: 1rem !important;
  }
  .form-main .form-title1 {
    border-radius: 10px 10px 0 0 !important;
    margin-bottom: 2rem !important;
  }
  .form-main1 {
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
@media (max-width: 767px) {
  .form-main .form-content .form-navtab .nav-tabs li a {
    padding: 20px 15px;
  }
}
@media (max-width: 735px) {
  .form-main .form-content {
    width: 98% !important;
  }
  .form-main .form-content .tab-content {
    border-top: 2px dashed #f1f1f1;
  }
}
@media (max-width: 479px) {
  .form-main .form-content .form-navtab {
    position: relative;
    top: 0;
  }
  .form-main .form-content .form-navtab .nav-tabs {
    display: block;
  }
  .form-main .form-content .form-navtab .nav-tabs li {
    width: 100%;
  }
  .form-main .form-content .form-navtab .nav-tabs li button {
    width: 100%;
  }
  .form-main .form-content .form-navtab .nav-tabs li a {
    display: block;
  }
  .form-main .form-content .form-navtab .nav-tabs li:nth-child(odd) a {
    background: #f1f1f1;
  }
}
/* ========================================= */
/*          trending-topic  CSS        */
/* ======================================== */
.category-item {
  position: relative;
}
.category-item i {
  font-size: 31px;
}
.category-item img {
  width: auto !important;
}
.category-item::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 3px;
  transition: all ease-in-out 0.5s;
  background: #A8834E !important;
  cursor: pointer;
}
.category-item .trending-topic-content {
  position: relative;
  z-index: 1;
}
.category-item:hover::before {
  width: 100%;
  transition: all ease-in-out 0.5s;
}

.trending-topic-counter::before {
  content: "";
  background: #f1f1f1;
  position: absolute;
  height: 50%;
  width: 100%;
  left: 0;
  top: 0;
}
.trending-topic-counter .trending-topic-counter-inner {
  width: 65%;
  margin: 0 auto;
  padding: 40px 40px 100px;
}
.trending-topic-counter .trending-topic-counter-inner .section-title::before {
  display: none;
}
.trending-topic-counter .trending-topic-counter-inner .section-title h2 {
  font-weight: 700;
}
.trending-topic-counter .trending-topic-counter-inner .counter-item {
  padding: 20px !important;
  border: 1px solid rgba(241, 241, 241, 0.6509803922);
}

.why-us .why-us-item {
  transition: all ease-in-out 0.5s;
  overflow: hidden;
  position: relative;
  transform: translateY(0px);
}
.why-us .why-us-item::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  transition: all ease-in-out 0.5s;
  background: #A8834E !important;
  cursor: pointer;
}
.why-us .why-us-item .why-us-content {
  z-index: 1;
  position: relative;
}
.why-us .why-us-item:hover::before {
  height: 100%;
  transition: all ease-in-out 0.5s;
}
.why-us .why-us-item .why-us-icon [class^=flaticon-]::before, .why-us .why-us-item .why-us-icon i {
  font-size: 46px;
}
.why-us .why-us-item:hover i, .why-us .why-us-item:hover a, .why-us .why-us-item:hover p {
  color: #fff !important;
  transition: all ease-in-out 0.5s;
}

@media (max-width: 1100px) {
  .trending-topic-counter .trending-topic-counter-inner {
    width: 86%;
    padding: 40px 40px 80px;
  }
}
@media (max-width: 991px) {
  .trending-topic-counter {
    padding-bottom: 0;
  }
  .trending-topic-counter .trending-topic-counter-inner {
    padding: 40px;
    margin: 0 auto 0 !important;
  }
  .trending-topic-counter .trending-topic-counter-inner .car-image {
    width: 100%;
    position: relative;
    bottom: inherit;
  }
  .category-main-inner h3 {
    margin-bottom: 0 !important;
  }
}
@media (max-width: 767px) {
  .trending-topic .trending-topic-item {
    text-align: center;
  }
  .trending-topic .trending-topic-item:before {
    display: none;
  }
}
/* ========================================= */
/*          Trending  CSS        */
/* ======================================== */
.trending {
  background-position: top right;
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}
.trending .trend-item, .trending .trend-item1, .trending .trend-item2 {
  position: relative;
  transition: all ease-in-out 0.5s;
  overflow: hidden;
}
.trending .trend-item::before, .trending .trend-item1::before, .trending .trend-item2::before {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  bottom: 0;
  background: #A8834E;
  height: 4px;
  transition: all ease-in-out 0.5s;
  z-index: 2;
}
.trending .trend-item .trend-meta, .trending .trend-item1 .trend-meta, .trending .trend-item2 .trend-meta {
  position: absolute;
  top: -28px;
  right: 20px;
}
.trending .trend-item .trend-image, .trending .trend-item1 .trend-image, .trending .trend-item2 .trend-image {
  position: relative;
}
.trending .trend-item .trend-image img, .trending .trend-item1 .trend-image img, .trending .trend-item2 .trend-image img {
  transition: all ease-in-out 0.5s;
  width: 100%;
}
.trending .trend-item .trend-image .trend-content, .trending .trend-item1 .trend-image .trend-content, .trending .trend-item2 .trend-image .trend-content {
  z-index: 1;
}
.trending .trend-item .trend-image, .trending .trend-item .trend-image1, .trending .trend-item1 .trend-image, .trending .trend-item1 .trend-image1, .trending .trend-item2 .trend-image, .trending .trend-item2 .trend-image1 {
  transition: all ease-in-out 0.5s;
  overflow: hidden;
}
.trending .trend-item .trend-content1, .trending .trend-item1 .trend-content1, .trending .trend-item2 .trend-content1 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1;
}
.trending .trend-item:hover, .trending .trend-item1:hover, .trending .trend-item2:hover {
  transition: all ease-in-out 0.5s;
}
.trending .trend-item:hover::before, .trending .trend-item1:hover::before, .trending .trend-item2:hover::before {
  transition: all ease-in-out 0.5s;
  width: 100%;
}
.trending .trend-item:hover .trend-image img, .trending .trend-item1:hover .trend-image img, .trending .trend-item2:hover .trend-image img {
  transform: scale(1.1);
  transition: all ease-in-out 0.5s;
}
.trending .trend-item:hover .color-overlay, .trending .trend-item1:hover .color-overlay, .trending .trend-item2:hover .color-overlay {
  height: 100%;
  transition: all ease-in-out 0.5s;
}
.trending .trend-item:hover .color-overlay, .trending .trend-item1:hover .color-overlay, .trending .trend-item2:hover .color-overlay {
  height: 100%;
  transition: all ease-in-out 0.5s;
}
.trending .trend-item1::before {
  display: none;
}
.trending .trend-item2 {
  position: relative;
  transition: all ease-in-out 0.5s;
  height: 100%;
  overflow: hidden;
}
.trending .trend-item2 > a {
  background-size: cover;
  height: 100%;
  width: 100%;
  background-position: center;
  display: inline-block;
  transition: all ease-in-out 0.5s;
}
.trending .trend-item2::before {
  display: none;
}
.trending .trend-image1 {
  position: relative;
  height: 100%;
  overflow: hidden;
  transition: all ease-in-out 0.5s;
}
.trending .trend-image1 > a {
  background-size: cover;
  height: 100%;
  width: 100%;
  background-position: center;
  display: inline-block;
  transition: all ease-in-out 0.5s;
}

.section-shape {
  position: absolute;
  top: -96px;
  left: 0;
  width: 100%;
  height: 96px;
  background-size: contain;
  background-repeat: repeat-x;
  z-index: 1;
}

.section-shape.section-shape1 {
  transform: rotate(180deg);
}

@media (max-width: 991px) {
  .section-shape {
    background-size: cover;
  }
}
@media (max-width: 767px) {
  .trending .trend-item .trend-image1 {
    height: 340px;
    margin-bottom: 1rem;
  }
  .trending .trend-item2 {
    height: 300px;
    border-radius: 10px;
    margin-bottom: 15px;
  }
  .trend-packages .trend-full .col-lg-5 {
    padding: 0 !important;
  }
}
@media (max-width: 400px) {
  .trending .trend-item .trend-image .trend-meta {
    position: relative;
    display: block !important;
    text-align: center;
  }
  .trending .trend-item .trend-image .trend-meta .entry-author {
    margin-bottom: 15px;
  }
}
.entry-author img {
  width: 36px !important;
  height: 36px !important;
  display: inline-block !important;
}

.sidebar-sticky {
  position: sticky;
  top: 0;
  transition: all ease-in-out 0.5s;
}
.sidebar-sticky .list-sidebar {
  border-radius: 0px;
}
.sidebar-sticky .list-sidebar .sidebar-item {
  padding: 0 0px 30px;
  border-bottom: 2px dashed #f1f1f1;
  margin-bottom: 30px;
}
.sidebar-sticky .list-sidebar .sidebar-item:last-child {
  border: none;
  margin: 0;
  padding: 0;
}
.sidebar-sticky .list-sidebar .sidebar-item h3 {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 30px;
  border-bottom: 1px solid #f1f1f1;
}
.sidebar-sticky .list-sidebar .sidebar-item h3::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 20%;
  height: 2px;
  background: #A8834E;
}
.sidebar-sticky .list-sidebar .sidebar-item h4 {
  border: none;
  padding: 0;
}
.sidebar-sticky .list-sidebar .sidebar-item .pretty {
  display: block;
  margin-bottom: 20px;
  margin-right: 0;
}
.sidebar-sticky .list-sidebar .sidebar-item .pretty .state label {
  text-indent: 1em;
  width: 100%;
  padding-left: 10px;
}
.sidebar-sticky .list-sidebar .sidebar-item .pretty .state label span.number {
  float: right;
}
.sidebar-sticky .list-sidebar .sidebar-item .pretty:last-child {
  margin: 0;
}
.sidebar-sticky .list-sidebar .sidebar-item .pretty.p-icon .state .icon {
  color: #fff;
}
.sidebar-sticky .list-sidebar .sidebar-item .pretty.p-icon input:checked ~ .state .icon {
  background: #A8834E;
}
.sidebar-sticky .list-sidebar .sidebar-item .range-slider {
  margin-bottom: 0;
}
.sidebar-sticky .list-sidebar .sidebar-item .range-slider .ui-slider .ui-slider-range {
  background: #A8834E;
}
.sidebar-sticky .list-sidebar .sidebar-item .star-rating span {
  color: #ffbc00;
  display: inline;
}
.sidebar-sticky .list-sidebar .sidebar-item .map-box {
  background: url(../images/map.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
.sidebar-sticky .form-content {
  box-shadow: 0px 0px 30px rgba(204, 204, 204, 0.3411764706);
  background: #A8834E;
  padding: 30px;
}
.sidebar-sticky .form-content h4::before {
  display: none !important;
}
.sidebar-sticky .form-content .nice-select {
  padding: 13px 20px 10px 35px;
  font-weight: 400;
}
.sidebar-sticky .form-content .input-box {
  position: relative;
  display: inline-block;
  width: 100%;
}
.sidebar-sticky .form-content .input-box input {
  padding-left: 35px;
}
.sidebar-sticky .form-content .input-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.sidebar-sticky .form-content .input-box [class^=fa-]:before {
  color: #ef2853;
  font-weight: 600;
}

.sidebar-sticky.sticky1 {
  top: 120px;
}

.sidebar-sticky.sticky1.tab-sticky {
  top: 30px;
  box-shadow: none;
}

.tabs-navbar {
  border: 1px solid #f1f1f1;
}
.tabs-navbar ul li {
  display: block;
  width: 100%;
}
.tabs-navbar ul li a {
  padding: 15px;
  transition: all ease-in-out 0.5s;
  display: block;
  background: rgba(255, 255, 255, 0);
  width: 100%;
}
.tabs-navbar ul li a:hover {
  color: #fff;
  background: #A8834E;
  transition: all ease-in-out 0.5s;
}
.tabs-navbar ul li.active a {
  color: #fff;
  background: #A8834E;
  transition: all ease-in-out 0.5s;
}

.tabs-navbar1 {
  border: 1px solid #f1f1f1;
}
.tabs-navbar1 ul {
  display: inherit;
  text-align: center;
}
.tabs-navbar1 ul li a {
  padding: 10px 15px;
  transition: all ease-in-out 0.5s;
  border-radius: 10px;
}
.tabs-navbar1 ul li a:hover {
  color: #fff;
  background: #A8834E;
  transition: all ease-in-out 0.5s;
}
.tabs-navbar1 ul li.active a {
  color: #fff;
  background: #A8834E;
  transition: all ease-in-out 0.5s;
}

.navbar-sticky {
  z-index: 9;
  position: fixed !important;
  left: 0;
  top: 0;
  width: 100%;
  animation-name: slideInUp;
  transition: all ease-in-out 0.5s;
}

.tabs-navbar1.navbar-sticky {
  top: 99px;
  transition: all ease-in-out 0.5s;
  border-top: 1px solid #f1f1f1 !important;
}

.sticky1.tab-sticky {
  top: 0px;
  transition: all ease-in-out 0.5s;
  animation-name: slideInUp;
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.3411764706);
  padding-top: 1.5rem;
}

@media (max-width: 991px) {
  .tabs-navbar1.navbar-sticky {
    top: 0;
    position: relative !important;
  }
  .more-top .trend-image1 {
    height: 300px;
  }
  .more-top .trend-content-main .trend-content {
    padding: 20px 0 0;
  }
}
@media (max-width: 567px) {
  .trending .trend-item {
    display: block !important;
  }
  .trending .trend-item .trend-content-main, .trending .trend-item .trend-image {
    width: 100% !important;
  }
  .trending .trend-item .trend-content {
    padding: 20px 0;
  }
  .entry-meta {
    display: block !important;
  }
}
/* ========================================= */
/*          featured-video  CSS        */
/* ======================================== */
.featured-video, .recent-post {
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
}
.featured-video .featured-item, .featured-video .recent-item, .recent-post .featured-item, .recent-post .recent-item {
  position: relative;
  overflow: hidden;
}
.featured-video .featured-item .featured-image, .featured-video .featured-item .recent-image img, .featured-video .recent-item .featured-image, .featured-video .recent-item .recent-image img, .recent-post .featured-item .featured-image, .recent-post .featured-item .recent-image img, .recent-post .recent-item .featured-image, .recent-post .recent-item .recent-image img {
  transition: all ease-in-out 0.5s;
}
.featured-video .featured-item .featured-content, .featured-video .recent-item .featured-content, .recent-post .featured-item .featured-content, .recent-post .recent-item .featured-content {
  position: absolute;
  bottom: -60px;
  transition: all ease-in-out 0.5s;
}
.featured-video .featured-item .recent-content, .featured-video .recent-item .recent-content, .recent-post .featured-item .recent-content, .recent-post .recent-item .recent-content {
  position: absolute;
  bottom: 0;
  transition: all ease-in-out 0.5s;
  z-index: 1;
}
.featured-video .featured-item:hover .featured-image, .featured-video .recent-item:hover .featured-image, .recent-post .featured-item:hover .featured-image, .recent-post .recent-item:hover .featured-image {
  transition: all ease-in-out 0.5s;
  transform: scale(1.1);
}
.featured-video .featured-item:hover .featured-content, .featured-video .recent-item:hover .featured-content, .recent-post .featured-item:hover .featured-content, .recent-post .recent-item:hover .featured-content {
  bottom: 0;
  transition: all ease-in-out 0.5s;
}
.featured-video .featured-item:hover .recent-image > img, .featured-video .recent-item:hover .recent-image > img, .recent-post .featured-item:hover .recent-image > img, .recent-post .recent-item:hover .recent-image > img {
  transition: all ease-in-out 0.5s;
  filter: grayscale(10);
  transform: scale(1.1);
}
.featured-video .featured-item:hover .color-overlay, .featured-video .recent-item:hover .color-overlay, .recent-post .featured-item:hover .color-overlay, .recent-post .recent-item:hover .color-overlay {
  height: 100%;
  transition: all ease-in-out 0.5s;
}
.featured-video .video-banner, .recent-post .video-banner {
  height: 500px;
}

.recent-post-main {
  position: relative;
  z-index: 1;
}

@media (max-width: 479px) {
  .featured-video .recent-item .featured-content, .featured-video .featured-item .featured-content, .recent-post .recent-item .featured-content, .recent-post .featured-item .featured-content {
    position: relative;
    bottom: 0;
    background: #232323;
  }
}
/* ========================================= */
/*          Discount CSS        */
/* ======================================== */
.discount-action {
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow: hidden;
  z-index: 2;
}
.discount-action .call-banner, .discount-action .call-banner1 {
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
}
.discount-action .call-banner .call-banner-inner, .discount-action .call-banner1 .call-banner-inner {
  position: relative;
  z-index: 1;
}
.discount-action .call-banner1 {
  background-size: contain;
  background-attachment: inherit;
  background-position: right;
}

ul.social-with-text li {
  text-align: center;
}
ul.social-with-text li a i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 100%;
  background: #f1f1f1;
  display: inline-block;
  text-align: center;
  margin-right: 18px;
}

@media (max-width: 991px) {
  .discount-action .call-banner {
    background-size: cover;
  }
  .discount-action .call-banner .trend-content {
    width: 100% !important;
    padding: 0 !important;
    margin-bottom: 2rem !important;
  }
  .discount-action .call-banner .call-banner-inner {
    padding: 0 !important;
    width: 100% !important;
  }
  .discount-action .call-banner .call-banner-inner .trend-content {
    padding: 0 !important;
    text-align: center;
  }
  .discount-action .call-banner .call-banner-inner1 {
    padding: 30px !important;
  }
  .discount-action .call-banner .call-banner-inner1 .trend-content-main {
    width: 100% !important;
  }
  .discount-action .call-banner1 {
    background-size: cover !important;
  }
  .discount-action .call-banner1 .call-banner-inner {
    margin: 0 !important;
    border-radius: 0 !important;
  }
}
@media (max-width: 767px) {
  .discount-action .call-banner .col-lg-6 {
    padding: 0 !important;
  }
  .discount-action .call-banner .call-button {
    top: 55px;
    transform: none;
    z-index: 1;
  }
  .discount-action .call-banner1 .call-banner-inner {
    padding: 30px !important;
    text-align: center;
  }
  .discount-action .call-banner1 .video-button {
    margin: 60px 0 !important;
  }
}
@media (max-width: 567px) {
  .discount-action .call-banner .call-banner-inner {
    width: 100% !important;
    padding: 0 !important;
  }
  .section-btns {
    display: block !important;
  }
  .section-btns a {
    margin: 1rem 0 0 !important;
    width: 100%;
  }
}
/* ========================================= */
/*          Call To Action CSS        */
/* ======================================== */
.call-to-action, .call-to-action1 {
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}
.call-to-action h2.call-name, .call-to-action1 h2.call-name {
  font-size: 43px;
}
.call-to-action .video-button, .call-to-action1 .video-button {
  position: relative;
}
.call-to-action .video-button img, .call-to-action1 .video-button img {
  border: 8px solid rgba(255, 255, 255, 0.1803921569);
}

.call-button {
  position: relative;
}
.call-button button.play-btn {
  position: relative;
  left: 0;
  right: 0;
  padding: 5px;
  background: #A8834E;
  border: none;
  border-radius: 50%;
  height: 70px;
  width: 70px;
}
.call-button button.play-btn i, .call-button button.play-btn svg {
  font-size: 20px;
  line-height: 2.5;
  text-align: center;
  color: #fff;
  transition: all ease-in-out 0.5s;
  padding: 0 0 0 5px;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -ms-border-radius: 50%;
  -moz-border-radius: 50%;
}
.call-button button.play-btn::after, .call-button button.play-btn::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  bottom: 0;
  left: 0;
  border-radius: 50%;
  border: 2px solid rgba(201, 169, 113, 0.5019607843);
  opacity: 0.3;
}
.call-button button.play-btn::before {
  animation: ripple 2s linear infinite;
}
.call-button button.play-btn::after {
  animation: ripple 2s linear 1s infinite;
}

.call-to-action1::before, .call-to-action1::after {
  display: none;
}

/* ========================================= */
/*         Counter CSS        */
/* ======================================== */
.counter {
  margin-top: -120px;
}
.counter .counter-item h2 {
  font-size: 40px;
}
.counter .counter-item i {
  font-size: 32px;
}
.counter .d-line {
  border-right: 1px dashed #f1f1f1;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

.counter_one:before {
  position: absolute;
  top: 10px;
  left: 0;
  bottom: 0;
  background: #fff;
  content: "";
  z-index: -1;
  border-top: 10px solid #A8834E;
  width: 91.3%;
}
.counter_one .counter1 {
  position: relative;
  display: block;
  margin-top: -120px;
  z-index: 10;
}
.counter_one .counter1 .counter-item {
  text-align: center;
  width: 100%;
}
.counter_one .counter1 .counter-item h3 {
  font-size: 43px;
}
.counter_one .counter1 .counter-item i {
  font-size: 18px;
}
.counter_one .counter1 .d-line {
  border-right: 1px solid #ccc;
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
}

@media (max-width: 991px) {
  .counter-main {
    width: 100% !important;
  }
  .counter-main .counter {
    margin: 0 !important;
  }
  .counter-main .counter-item {
    border: none !important;
    padding: 0 !important;
  }
}
/* ========================================= */
/*          Packages CSS        */
/* ======================================== */
.packages .pg-title i.icon {
  border-radius: 50%;
  height: 80px;
  width: 80px;
  line-height: 2;
}
.packages .pg-title h2 span {
  font-weight: 300;
  font-size: 14px;
  display: block;
}
.packages .pg-main ul li {
  display: inline-block;
  width: 100%;
  line-height: 3;
  border-bottom: 1px dashed #f1f1f1;
}

/* ========================================= */
/*         Top Restro CSS        */
/* ======================================== */
.top-restro .slider-content {
  background: #fff;
  padding: 20px;
  width: 94%;
  margin: 0 auto;
  margin-top: -2rem;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.3411764706);
}
.top-restro .slider-content .restro-content li {
  display: block;
  font-size: 14px;
  color: #999;
}

/* ========================================= */
/*         Latest Tour CSS        */
/* ======================================== */
.latest-tour .tour-item {
  position: relative;
  overflow: hidden;
  transition: all ease-in-out 0.5s;
}
.latest-tour .tour-item:before {
  position: absolute;
  top: 0px;
  left: 0;
  background: rgba(46, 61, 98, 0.6196078431);
  z-index: 1;
  content: "";
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: all ease-in-out 0.5s;
}
.latest-tour .tour-item .tour-image img {
  transition: all ease-in-out 0.5s;
}
.latest-tour .tour-item .tour-content {
  padding: 20px;
  position: absolute;
  bottom: -162px;
  left: 0;
  width: 100%;
  z-index: 1;
  transition: all ease-in-out 0.5s;
}
.latest-tour .tour-item .tour-tag {
  position: absolute;
  padding: 10px;
  top: 20px;
  right: 0;
  background: #A8834E;
  z-index: 1;
}
.latest-tour .tour-item .tour-tag .old-price {
  text-decoration: line-through;
}
.latest-tour .tour-item:hover .tour-content {
  bottom: 50%;
  transform: translateY(50%);
  transition: all ease-in-out 0.5s;
}
.latest-tour .tour-item:hover .tour-image img {
  transform: rotate(5deg) scale(1.2);
  transition: all ease-in-out 0.5s;
}
.latest-tour .tour-item:hover:before {
  opacity: 1;
  visibility: visible;
  transition: all ease-in-out 0.5s;
}

/* ========================================= */
/*         Services CSS        */
/* ======================================== */
section.about-detail {
  background-size: contain;
  background-position: right;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
section.about-detail .about-image {
  border-radius: 0px;
  overflow: hidden;
}
section.about-detail .about-image img {
  border-radius: 15px;
}
section.about-detail .p-about-us .p-call-action li {
  display: inline-block;
  padding: 5px;
  width: 49%;
}
section.about-detail .about-detail-content {
  border-radius: 15px;
}

@media (max-width: 811px) {
  section.about-detail {
    background-size: cover;
  }
}
@media (max-width: 767px) {
  section.about-us {
    padding-bottom: 3rem;
  }
  section.about-us .about-listing:after {
    display: none;
  }
  section.about-us .counter .d-line {
    position: relative;
    border: none;
  }
  .about-banner {
    text-align: center;
  }
  .about-banner .about-banner-content {
    margin-bottom: 2rem;
  }
  section.about-detail:before {
    display: none;
  }
}
/* ========================================= */
/*         Quick Services CSS        */
/* ======================================== */
.quick-service {
  position: relative;
}
.quick-service .card-box {
  position: relative;
  width: 320px;
  height: 320px;
  transform-style: preserve-3d;
  perspective: 1000px;
  border-radius: 15px;
  margin: 0 auto;
}
.quick-service .card-box .box-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: 1s cubic-bezier(0.15, 0.15, 0.3, 1.3);
}
.quick-service .card-box .box-inner .box-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.quick-service .card-box .box-inner .box-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.quick-service .card-box .box-inner .box-image .box-title {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 2;
  background: #A8834E;
  padding: 15px 10px;
}
.quick-service .card-box .box-inner .box-image .box-title i {
  font-size: 27px;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background: #fff;
  color: #A8834E;
  line-height: 2.4;
}
.quick-service .card-box .box-inner .top-service {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  transform-style: preserve-3d;
  padding: 0;
  transform: rotateY(180deg);
  border-radius: 15px;
}
.quick-service .card-box .box-inner .top-service .service-inner {
  transform-style: preserve-3d;
  padding: 20px;
  background: #A8834E;
  transform: translateZ(100px);
}
.quick-service .card-box .box-inner .top-service .service-inner i {
  font-size: 32px;
  height: 90px;
  width: 90px;
  border-radius: 50%;
  background: #fff;
  color: #A8834E;
  line-height: 2.4;
}
.quick-service .card-box:hover .box-inner {
  transform: rotateY(180deg);
}
.quick-service .top-service {
  display: flex;
  flex-direction: column;
  text-align: center;
  padding: 45px 25px;
  border-radius: 15px;
}
.quick-service .top-service i {
  font-size: 2.4rem;
  margin-bottom: 15px;
}
.quick-service .top-service p {
  color: #f1f1f1;
  font-size: 13px;
}

@media (max-width: 359px) {
  .quick-service .card-box {
    height: 280px;
    width: 280px;
  }
}
/* ========================================= */
/*         About Us CSS        */
/* ======================================== */
.about-us {
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
  position: relative;
}
.about-us:hover .trend-item {
  transform: none;
}
.about-us .about-trending-topic ul li {
  display: inline-block;
  width: 49%;
  position: relative;
  line-height: 2.4;
  font-weight: 400;
}
.about-us .about-trending-topic ul li:before {
  content: "\f105";
  font-family: "FontAwesome";
  margin-right: 10px;
}
.about-us .about-image-box .about-image {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background: #fcdc6b;
  animation: border-transform 10s linear infinite alternate forwards;
}
.about-us .about-image-box1 .about-image {
  margin-top: -40px;
}
.about-us .about-image-box1 .about-content {
  right: inherit;
  left: -40px;
  top: 0;
}
.about-us .about-inner {
  position: relative;
  z-index: 1;
}
.about-us .about-inner h2 {
  font-size: 38px;
  margin-bottom: 10px !important;
}
.about-us .about-inner .about-image-box {
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}
.about-us .about-inner .about-image-box img {
  width: 100%;
}
.about-us .about-inner .about-image-box::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 150%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  transition: transform 1.8s;
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -200%, 0);
  z-index: 1;
}
.about-us .about-inner .about-image-box:hover:before {
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0);
}
.about-us .box-title i {
  font-size: 32px;
  color: #A8834E;
}
.about-us .about-left {
  position: absolute;
  top: 50%;
  right: -50px;
  background: #fff;
  width: 100%;
  z-index: 1;
  transform: translateY(-50%);
  border-radius: 15px;
  padding: 30px 30px 30px 0;
}

.about-us1 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}
.about-us1:before {
  background: #fff;
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
}

@media (max-width: 991px) {
  .about-us .trend-image1 {
    height: 300px;
    margin-bottom: 20px;
  }
  .about-us .about-inner .about-image-box {
    margin-top: 2rem;
  }
  .about-us .about-image-box .about-image-desti {
    margin-bottom: 0;
  }
  .about-us .about-image-box .about-image-main {
    margin-top: 30px;
  }
  .about-us .about-image-box .about-image-main .col-lg-6 {
    margin-top: 0 !important;
  }
  .about-us .about-image-box .about-content {
    margin-bottom: 15px;
    width: 100% !important;
  }
  .about-us .form-content {
    top: 5rem;
    margin-bottom: 2rem;
  }
  .about-us .about-left {
    position: relative;
    right: 0;
    top: 0;
    transform: none;
    padding: 0;
  }
  .about-us1:before {
    top: 8%;
    width: 100%;
    height: 84%;
  }
  .about-us1:after {
    bottom: -48px;
  }
}
@media (max-width: 639px) {
  .about-us1.about-us:before {
    display: block;
  }
  .about-us1.about-us:after {
    bottom: -72px;
  }
  .about-us:before {
    display: none;
  }
  .about-us .about-trending-topic ul li {
    display: block;
    width: 100%;
  }
  .about-us .about-listing ul {
    display: block !important;
  }
  .about-us .about-listing ul li {
    line-height: 2;
  }
}
/* ========================================= */
/*         call-to-action CSS        */
/* ======================================== */
.call-to-action {
  background-repeat: no-repeat;
  background-position: top;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}
.call-to-action .call-content {
  position: relative;
  z-index: 1;
}
.call-to-action .call-content h2 {
  font-weight: 700;
  font-size: 34px;
  text-transform: uppercase;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.2509803922);
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.0784313725);
  margin-bottom: 14px !important;
  border-radius: 15px;
  margin-bottom: 17px !important;
}
.call-to-action .call-content h2 span {
  color: #A8834E;
}
.call-to-action .call-content p {
  font-size: 16px;
  font-weight: 700;
}

section.call-to-action1 {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}
section.call-to-action1 .call-inner {
  position: relative;
  z-index: 1;
}
section.call-to-action1 .call-inner .call-content {
  position: relative;
  z-index: 1;
}
section.call-to-action1 .call-inner .call-content h2 {
  font-weight: 700;
  font-size: 34px;
  text-transform: uppercase;
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, 0.2509803922);
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.0784313725);
}
section.call-to-action1 .call-inner .call-content h2 span {
  color: #A8834E;
}
section.call-to-action1 .call-inner .call-content p {
  font-size: 16px;
}
section.call-to-action1:before, section.call-to-action1:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(47, 38, 57, 0.43);
}
section.call-to-action1:after {
  background: #fff;
  width: 33%;
  transform: skew(30deg);
  right: -196px;
  left: inherit;
}
section.call-to-action1 .call-main1 .video-button .call-button {
  top: inherit;
  transform: none;
}

section.call-to-action.maincounter {
  background-image: url(../images/calltoaction3.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
  padding-top: 70px;
  padding-bottom: 75px;
}
section.call-to-action.maincounter .counter {
  border: none;
}

@media (max-width: 991px) {
  section.call-to-action {
    padding-bottom: 3rem;
  }
  section.call-to-action .call-content {
    width: 100% !important;
    text-align: center !important;
  }
  section.call-to-action .section-title {
    width: 100% !important;
  }
  section.call-to-action1:after {
    display: none;
  }
  section.call-to-action1 .call-inner {
    text-align: center;
  }
  section.call-to-action1 .call-inner .call-content {
    text-align: center !important;
    padding: 0 0 2rem !important;
  }
  .newsletter-image {
    text-align: center;
  }
  .newsletter-image img {
    width: 70%;
    margin: 0 auto;
  }
}
@media (max-width: 811px) {
  section.call-to-action .counter .counter-item h3 {
    font-size: 27px;
  }
}
@media (max-width: 767px) {
  section.call-to-action {
    padding-bottom: 3rem;
  }
  section.call-to-action .call-content-inner {
    margin-top: 2rem;
    text-align: center;
  }
  section.call-to-action .counter .d-line {
    position: relative;
    border: none;
    margin-bottom: 2rem;
  }
  .call-to-main .call-to-action .call-content {
    width: 100% !important;
    text-align: center !important;
  }
  .counter_one .counter1 .d-line {
    position: relative;
    border: none;
  }
  .call-main1 .action-content {
    width: 100% !important;
  }
}
@media (max-width: 639px) {
  .call-to-action .call-content h2 {
    font-size: 20px;
  }
  .call-to-main .call-to-action {
    padding: 20px !important;
  }
}
/* ========================================= */
/*         Team CSS        */
/* ======================================== */
.our-team {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.our-team .team-image {
  overflow: hidden;
  transition: all ease-in-out 0.5s;
}
.our-team .team-image img {
  transition: all ease-in-out 0.5s;
  width: 100%;
}
.our-team .team-image:hover img {
  transition: all ease-in-out 0.5s;
  transform: scale(1.1);
}
.our-team .team-list {
  overflow: hidden;
}
.our-team .team-list .team-content {
  transition: all 0.5s;
  position: relative;
  z-index: 1;
}
.our-team .team-list .team-content1 {
  background: #fff;
  top: -2rem;
  transition: all 0.5s;
  position: relative;
  z-index: 1;
  width: 96%;
  padding-top: 20px;
}
.our-team .team-list:hover .team-content {
  margin-top: -15px;
  transition: all 0.5s;
}

/* ========================================= */
/*          Reviews CSS        */
/* ======================================== */
.testimonial {
  background-position: center;
  background-repeat: repeat-x;
  background-size: cover;
}
.testimonial .testimonial-item .testimonial-content, .testimonial .testimonial-item1 .testimonial-content {
  background: #fff;
  border: 1px solid #f1f1f1;
  position: relative;
}
.testimonial .testimonial-item .testimonial-content p, .testimonial .testimonial-item1 .testimonial-content p {
  font-style: italic;
}
.testimonial .testimonial-item .testimonial-content .testimonial-icon, .testimonial .testimonial-item1 .testimonial-content .testimonial-icon {
  width: 50px;
  height: 45px;
  background: #A8834E;
  text-align: center;
  font-size: 19px;
  color: #fff;
  line-height: 45px;
  position: absolute;
  top: 37px;
  left: -19px;
}
.testimonial .testimonial-item .testimonial-content .testimonial-icon:before, .testimonial .testimonial-item1 .testimonial-content .testimonial-icon:before {
  content: "";
  border-bottom: 16px solid #e41212;
  border-left: 18px solid transparent;
  position: absolute;
  top: -16px;
  left: 1px;
}
.testimonial .testimonial-item .details, .testimonial .testimonial-item1 .details {
  position: relative;
}
.testimonial .testimonial-item .details i, .testimonial .testimonial-item1 .details i {
  font-size: 32px;
  color: #A8834E;
  margin-bottom: 13px !important;
}
.testimonial .testimonial-item .details p, .testimonial .testimonial-item1 .details p {
  font-size: 16px;
  font-style: italic;
}
.testimonial .testimonial-item a, .testimonial .testimonial-item1 a {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.testimonial .testimonial-item a img, .testimonial .testimonial-item1 a img {
  height: 80px;
  width: 80px;
  border-radius: 50%;
}
.testimonial .testimonial-item .author-info, .testimonial .testimonial-item1 .author-info {
  position: relative;
}
.testimonial .testimonial-item .author-info img, .testimonial .testimonial-item1 .author-info img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.testimonial .testimonial-item .author-info i, .testimonial .testimonial-item1 .author-info i {
  font-size: 18px;
  color: #A8834E;
  position: absolute;
  left: 38%;
  z-index: 1;
  background: #fff;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  line-height: 1.8;
}
.testimonial .review-slider .slick-prev, .testimonial .review-slider .slick-next {
  bottom: -80px;
  top: inherit;
  background: #A8834E;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  line-height: 1;
}
.testimonial .review-slider .slick-prev::before, .testimonial .review-slider .slick-next::before {
  color: #fff;
  font-size: 16px;
  line-height: 50px;
}
.testimonial .review-slider .slick-prev:hover, .testimonial .review-slider .slick-prev:focus, .testimonial .review-slider .slick-next:hover, .testimonial .review-slider .slick-next:focus {
  background: #16232F;
}
.testimonial .review-slider .slick-prev:hover::before, .testimonial .review-slider .slick-prev:focus::before, .testimonial .review-slider .slick-next:hover::before, .testimonial .review-slider .slick-next:focus::before {
  color: #fff;
}
.testimonial .review-slider .slick-prev {
  left: 16px;
}
.testimonial .review-slider .slick-next {
  left: 76px;
  right: inherit;
}
.testimonial .abt-short .short-p {
  position: relative;
  letter-spacing: 2px;
  transition: all 0.5s;
}
.testimonial .abt-short .short-p::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -30px;
  height: 2px;
  width: 30%;
  background: #A8834E;
}
.testimonial .tst-slide p {
  padding: 30px;
  border: 2px dashed rgba(241, 241, 241, 0.1607843137);
  border-radius: 15px;
  margin-bottom: 25px;
  transition: all 0.5s;
}
.testimonial .tst-slide p i {
  font-size: 32px;
  color: #A8834E;
  margin-bottom: 13px !important;
}
.testimonial .tst-slide:hover p {
  border-color: #A8834E;
}
.testimonial .tst-info {
  position: relative;
}
.testimonial .tst-info img {
  width: 10%;
  border-radius: 50px;
}
.testimonial .testimonials_one_single {
  position: relative;
  display: block;
  padding-top: 50px;
  padding-bottom: 50px;
  padding-left: 165px;
  padding-right: 50px;
  z-index: 10;
}
.testimonial .testimonials_one_single:before {
  position: absolute;
  bottom: -40px;
  left: 130px;
  width: 91px;
  height: 40px;
  background-image: url(../images/testi-shape.png);
  background-repeat: no-repeat;
  content: "";
}
.testimonial .testimonials_one_single .shadow-box {
  position: absolute;
  top: 0;
  left: 65px;
  bottom: 0;
  right: 0;
  box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.07);
  z-index: -1;
}
.testimonial .testimonials_one_single .testimonials_one_image {
  position: absolute;
  top: 80px;
  left: 20px;
}
.testimonial .testimonials_one_single .testimonials_one_image img {
  border-radius: 50%;
  height: 110px;
  width: 110px;
}
.testimonial .testimonials_one_single .testimonials_one_image:before {
  position: absolute;
  top: -15px;
  left: -20px;
  right: -20px;
  bottom: 0px;
  content: "";
  border: 10px solid #fff;
  border-radius: 50%;
  transition: all 500ms ease;
  height: 140px;
  width: 140px;
}
.testimonial .testimonials_one_single:hover .testimonials_one_image:before {
  border: 10px solid #A8834E;
}
.testimonial .testimonials_one_single .testimonials_one_text {
  position: relative;
  display: block;
}
.testimonial .testimonials_one_single .testimonials_one_text .testimonials_one_rating_box {
  display: flex;
  align-items: center;
}
.testimonial .testimonials_one_single .testimonials_one_text .testimonials_one_rating_box a {
  color: #A8834E;
}
.testimonial .testimonials_one_single .testimonials_one_text .testimonials_quote_icon {
  position: absolute;
  bottom: -4px;
  right: 10px;
  transition: all 500ms ease;
}
.testimonial .testimonials_one_single .testimonials_one_text .testimonials_quote_icon span {
  font-size: 31px;
  color: #A8834E;
}
.testimonial .testimonials_one_single .testimonials_one_text .customer_info h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 30px;
}
.testimonial .testimonials_one_single .testimonials_one_text .customer_info span {
  font-size: 14px;
  color: #777;
  margin-left: 5px;
}
.testimonial .testimonials_one_single:after {
  position: absolute;
  top: 0;
  left: 65px;
  bottom: 0;
  right: 0;
  background-color: #fff;
  content: "";
  z-index: -1;
  border-radius: 4px;
}
.testimonial .counter-main .counter-item {
  padding: 0 1rem 1rem !important;
}

@media (max-width: 991px) {
  .testimonial .section-title {
    text-align: center !important;
    margin-bottom: 2.5rem;
  }
  .testimonial .about-slider {
    width: 100% !important;
    margin: 0 !important;
  }
}
@media (max-width: 735px) {
  .testimonial .testimonial-item1 {
    margin: 2.5rem 0rem 0rem;
    text-align: center;
  }
  .testimonial .testimonial-item1 .author-info {
    display: inline-block !important;
  }
  .testimonial .testimonial-item1 i {
    display: none;
  }
  .testimonial .testimonial-item1 .author-content {
    margin: 0 !important;
  }
  .testimonial .testimonial-item1::after {
    left: 0;
  }
  .testimonial .testimonial-item1 .author-content {
    margin: 0 !important;
  }
  .testimonial .counter-main .contact-pac span {
    display: block;
    margin-bottom: 1rem;
  }
}
@media (max-width: 567px) {
  .testimonial1 .testimonials_one_single {
    padding: 20px;
    text-align: center;
    background: #fff;
  }
  .testimonial1 .testimonials_one_single .testimonials_one_image {
    position: relative;
    top: inherit;
    left: inherit;
    margin-bottom: 1rem;
  }
  .testimonial1 .testimonials_one_single .testimonials_one_image img {
    margin: 0 auto;
  }
  .testimonial1 .testimonials_one_single .testimonials_one_image:before {
    display: none;
  }
  .testimonial1 .testimonials_one_single .testimonials_one_text .testimonials_one_rating_box {
    display: inline-block;
  }
  .testimonial1 .testimonials_one_single .testimonials_one_text .testimonials_quote_icon {
    position: relative;
    bottom: 0;
    right: 0;
  }
  .testimonial1 .testimonials_one_single:after {
    display: none;
  }
}
/* ========================================= */
/*          News section CSS        */
/* ======================================== */
.news {
  padding-bottom: 6rem;
  z-index: inherit;
}
.news .news-item {
  position: relative;
}
.news .news-item .news-image {
  position: relative;
  transition: all ease-in-out 0.5s;
  overflow: hidden;
}
.news .news-item .news-image::before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  transition: transform 1.8s;
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -200%, 0);
  z-index: 1;
}
.news .news-item .news-image:hover:before {
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0);
}
.news .news-item .news-image .news-date1 {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.8901960784);
  padding: 10px 15px;
  z-index: 2;
}
.news .news-item .news-image .news-date1 span {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}
.news .news-item .news-image .news-content1 {
  padding: 20px;
  position: absolute;
  bottom: 0;
  z-index: 2;
}
.news .news-item .news-image .news-content1 .news-list {
  border-top: 1px dashed #f1f1f1;
  padding-top: 15px;
}
.news .news-item .news-image .news-content1 .news-list li a {
  font-size: 14px;
  color: #999;
}
.news .news-item .news-image .news-content1 .news-list li a:hover {
  color: #A8834E;
}
.news .news-item .news-image .overlay {
  background: linear-gradient(to bottom, transparent 0%, #826d43 100%);
  top: inherit;
  height: 50%;
  bottom: 0;
}
.news .news-item .news-image img {
  transition: all ease-in-out 0.5s;
  width: 100%;
}
.news .news-item .news-image:hover img {
  transition: all ease-in-out 0.5s;
  transform: scale(1.2);
}
.news .news-item .news-content-over {
  position: absolute;
  left: 0;
  width: 90%;
  right: 0;
  margin: 0 auto;
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.2156862745);
  bottom: -1.5rem;
  padding: 20px;
  z-index: 1;
  background: #fff;
}
.news .news-item .news-list li a {
  font-size: 14px;
  color: #999;
  font-style: italic;
}
.news .news-item .news-list li a:hover {
  color: #A8834E;
}
.news .news-item .news-content .news-list li a {
  font-size: 14px;
  color: #999;
}
.news .news-item .news-content .news-list li a:hover {
  color: #A8834E;
}
.news .news-item .news-content .author-img img {
  max-width: 40px;
  border-radius: 50%;
  margin-right: 10px;
}
.news .news-item .news-content a.news-btn {
  font-size: 14px;
}
.news .news-item .news-cont {
  background: #fff;
  border-radius: 15px;
  padding: 20px 15px;
  position: relative;
  z-index: 1;
  width: 96%;
  margin-top: -24px;
}
.news .news-item .news-cont .news-list li a {
  font-size: 14px;
  color: #999;
  font-style: italic;
}
.news .news-item .news-cont .news-list li a:hover {
  color: #A8834E;
}
.news .news-item .blog-one__content {
  padding: 24px 24px 20px;
  background: #ffffff;
  margin-right: 30px;
  margin-top: -70px;
  position: relative;
  transition: all 700ms ease;
  z-index: 1;
}
.news .news-item .blog-one__content .blog-one__meta {
  margin: 0;
  display: flex;
  align-items: center;
}
.news .news-item .blog-one__content .blog-one__meta li a {
  font-size: 14px;
  color: #777;
  transition: all 500ms ease;
}
.news .news-item .blog-one__content .blog_one_text {
  width: 83%;
}
.news .news-item .blog-one__content .blog_one_date {
  height: 70px;
  width: 70px;
  background: #A8834E;
  padding-top: 15px;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: 700;
  line-height: 1.2;
}

@media (max-width: 1100px) and (min-width: 1024px) {
  .news .news-item .blog-one__content {
    margin-right: 0;
  }
  .news .news-item .blog-one__content .blog-one__meta li a {
    font-size: 12px;
  }
}
@media (max-width: 991px) {
  .testi-news .section-title {
    text-align: center !important;
  }
  .news .news-item .blog-one__content .blog-one__meta li a {
    font-size: 13px;
  }
}
@media (max-width: 500px) {
  .recent-articles .trend-item1 {
    display: block !important;
  }
  .recent-articles .trend-item1 .trend-image {
    width: 100% !important;
    margin-bottom: 1rem;
  }
  .recent-articles .trend-item1 .trend-content-main {
    width: 100% !important;
    padding: 0 !important;
  }
}
/* ========================================= */
/*          Partner CSS        */
/* ======================================== */
.partners_inner {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #f1f1f1;
}
.partners_inner ul {
  margin: -2px -10px -2px -2px;
  padding-top: 2px;
  padding-left: 2px;
}
.partners_inner ul li {
  margin: 0px;
  float: left;
  width: 25%;
  border: 1px solid #f1f1f1;
  text-align: center;
  height: 140px;
  line-height: 140px;
  position: relative;
  margin-top: -2px;
  margin-left: -2px;
  overflow: hidden;
}
.partners_inner ul li img {
  opacity: 0.5;
  transition: all ease-in-out 0.5s;
  filter: grayscale(100%);
  width: 60%;
}
.partners_inner ul li:hover img {
  opacity: 1;
  transition: all ease-in-out 0.5s;
  filter: grayscale(0%);
}

@media (max-width: 911px) {
  .partners_inner {
    margin-top: 40px;
  }
  .partners_inner ul li {
    width: 50%;
  }
}
@media (max-width: 540px) {
  .partners_inner ul li {
    width: 100%;
  }
}
/* ========================================= */
/*          Contact Page CSS        */
/* ======================================== */
.contact-main .contact-info .info-item {
  position: relative;
  padding: 20px;
}
.contact-main .contact-info .info-item .box-table li {
  font-size: 15px;
  font-weight: 500;
  list-style-type: none;
  margin-bottom: 20px;
  position: relative;
  width: 100%;
}
.contact-main .contact-info .info-item .box-table li span {
  color: #A8834E;
  float: right;
}
.contact-main .contact-info .info-item .box-table li::before {
  content: "";
  position: absolute;
  height: 1px;
  width: 50px;
  border: 1px dashed #737373;
  top: 12px;
  left: 0;
  right: 0;
  margin: auto;
}
.contact-main .contact-info .info-item .box-table li:last-child {
  margin-bottom: 0;
}
.contact-main .contact-info .info-item .info-icon i {
  font-size: 48px;
}
.contact-main .contact-map .map-main {
  border-radius: 15px;
  overflow: hidden;
}
.contact-main .contact-map .contact-form {
  background: #3f3f3f;
  padding: 30px;
  border-radius: 15px;
}

@media (max-width: 991px) {
  .contact-main .contact-info .contact-form {
    padding: 0 !important;
  }
}
@media (max-width: 767px) {
  .contact-main .contact-map .contact-form {
    margin-top: 2rem;
  }
}
.contact-info-main {
  margin-top: -80px;
}

/* ========================================= */
/*          Gallery CSS        */
/* ======================================== */
.gallery .gallery-item {
  position: relative;
  overflow: hidden;
}
.gallery .gallery-item .gallery-image img {
  width: 100%;
}
.gallery .gallery-item .gallery-content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 100%;
  left: 0;
  background: linear-gradient(to bottom, transparent, #000000);
  transition: all ease-in-out 0.5s;
  z-index: 2;
}
.gallery .gallery-item .gallery-content ul {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.gallery .gallery-item .gallery-content ul li {
  border: 1px solid rgba(255, 255, 255, 0.1490196078);
  color: #fff;
  height: 50px;
  width: 50px;
  text-align: center;
  font-size: 18px;
  line-height: 2.5;
  display: inline-block;
  border-radius: 10px;
  margin: 0;
  transition: all ease-in-out 0.5s;
}
.gallery .gallery-item .gallery-content ul li a {
  color: #fff;
}
.gallery .gallery-item .gallery-content ul li:hover {
  background: #A8834E;
  transition: all ease-in-out 0.5s;
}
.gallery .gallery-item:hover .gallery-content {
  top: 0;
  transition: all ease-in-out 0.5s;
}
.gallery .overlay {
  background: rgba(0, 0, 0, 0.4);
}

a.lb-close {
  position: absolute;
  top: -30px;
  right: 30px;
}

/* ========================================= */
/*          Error Page CSS        */
/* ======================================== */
.error {
  background: #fff;
  border-top: 1px solid #f1f1f1;
}
.error .error-content {
  width: 60%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.error .error-content i {
  color: #A8834E;
}
.error .error-content h1 {
  font-size: 202px;
  margin: 0px;
  color: #fff;
  line-height: 1;
}
.error .error-content h1 span {
  text-shadow: -8px 0px 0px #fff;
  color: #A8834E;
}
.error .newsletter-form {
  position: relative;
}
.error .newsletter-form form {
  border-radius: 0px;
  overflow: hidden;
  position: relative;
}
.error .newsletter-form form input {
  padding-right: 65px;
  height: 50px;
  outline: none;
}
.error .newsletter-form form input.nir-btn {
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  text-align: center;
  border-radius: 0;
  padding: 14px 20px 12px;
  transition: all ease-in-out 0.5s;
}
.error .newsletter-form form input.nir-btn:hover {
  background: #A8834E !important;
  transition: all ease-in-out 0.5s;
  color: #fff;
}

.error.error1:before {
  content: "";
  background: url(../images/trending-bg.jpg) no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}

@media (max-width: 991px) {
  .error .error-content {
    width: 100%;
  }
  .reservation-main {
    width: 100% !important;
    padding: 0 !important;
  }
}
@media (max-width: 811px) {
  .error {
    padding: 5rem 0 3rem !important;
  }
  .error .error-content {
    width: 100%;
  }
}
@media (max-width: 567px) {
  .error .error-content h1 {
    font-size: 112px;
    letter-spacing: -20px;
  }
  .error .error-content .nir-btn {
    margin: 0 0 1rem;
  }
  .error .newsletter-form {
    width: 100% !important;
  }
  .error .newsletter-form form {
    border-radius: 0px;
  }
  .error .newsletter-form form input[type=email] {
    padding-right: 20px;
  }
  .login-register .log-main {
    width: 100% !important;
  }
  .login-register .log-main button {
    width: 100% !important;
    margin: 0 0 10px !important;
  }
}
/* ========================================= */
/*          Coming Soon CSS        */
/* ======================================== */
section.comingsoon {
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
}
section.comingsoon::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  background: url(../images/bg/bg6.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  opacity: 0.4;
}
section.comingsoon .comingsoon-content {
  position: relative;
  z-index: 1;
}
section.comingsoon .comingsoon-content .coming-title span {
  color: #A8834E;
  font-size: 72px;
}
section.comingsoon .comingsoon-content .counter-box {
  text-align: center;
  display: inline-block;
  color: #fff;
  padding: 0 30px;
  text-transform: capitalize;
  font-size: 18px;
}
section.comingsoon .comingsoon-content .counter-box span {
  font-size: 72px;
  color: #fff;
  display: block;
  font-weight: 700;
  line-height: 1.5;
}

@media (max-width: 991px) and (min-width: 812px) {
  section.comingsoon {
    height: 200vh;
  }
}
@media (max-width: 911px) {
  section.comingsoon .comingsoon-content .newsletter-form {
    width: 100%;
  }
}
@media (max-width: 767px) {
  section.comingsoon .comingsoon-content .coming-title span {
    font-size: 32px;
  }
  section.comingsoon .comingsoon-content .counter-box span {
    font-size: 43px;
  }
  section.comingsoon .coming-image {
    margin-top: 2rem;
  }
}
@media (max-width: 639px) {
  section.comingsoon::before {
    display: none;
  }
  section.comingsoon .comingsoon-content .coming-title h1 {
    font-size: 35px;
    line-height: 1;
    margin-bottom: 15px !important;
  }
  section.comingsoon .comingsoon-content .coming-title span {
    font-size: 26px;
  }
  section.comingsoon .comingsoon-content .counter-box {
    width: 100%;
  }
  section.comingsoon .comingsoon-content .counter-box span {
    font-size: 34px;
  }
}
@media (max-width: 567px) {
  section.comingsoon .comingsoon-content .coming-title-main, section.comingsoon.comingsoon1 .comingsoon-content .coming-title-main {
    width: 100% !important;
  }
  section.comingsoon .comingsoon-content .newsletter-form form, section.comingsoon.comingsoon1 .comingsoon-content .newsletter-form form {
    border-radius: 0px;
  }
  section.comingsoon .comingsoon-content .newsletter-form form input[type=email], section.comingsoon.comingsoon1 .comingsoon-content .newsletter-form form input[type=email] {
    padding-right: 20px;
  }
  section.comingsoon .comingsoon-content .newsletter-form form input.nir-btn, section.comingsoon.comingsoon1 .comingsoon-content .newsletter-form form input.nir-btn {
    position: relative;
    border-radius: 0px;
    margin: 1rem 0 0;
  }
}
/* ========================================= */
/*          Instagram CSS        */
/* ======================================== */
.insta-main .insta-inner .follow-button {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}
.insta-main .insta-inner .follow-button h5 {
  position: relative;
  background-color: #fff;
  font-size: 15px;
  color: #1a1a1a;
  display: block;
  padding: 12px 15px 13px;
  text-align: center;
  font-weight: 400;
  width: 250px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
.insta-main .insta-inner .follow-button h5:after {
  content: "";
  position: absolute;
  left: -5px;
  top: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid #fff;
  border-radius: 10px;
}
.insta-main .insta-inner .insta-image, .insta-main .insta-inner .insta-image a img {
  transition: all ease-in-out 0.5s;
  overflow: hidden;
}
.insta-main .insta-inner .insta-image:hover img {
  transform: scale(1.1);
  transition: all ease-in-out 0.5s;
}

@media (max-width: 479px) {
  .insta-main .insta-inner .follow-button h5 a {
    font-size: 13px;
  }
}
/* ========================================= */
/*          Newsletter CSS        */
/* ======================================== */
.newsletter {
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
.newsletter .newsletter-form {
  position: relative;
}
.newsletter .newsletter-form form {
  border-radius: 0px;
  overflow: hidden;
  position: relative;
  border: 1px solid #f1f1f1;
}
.newsletter .newsletter-form form input {
  padding-right: 65px;
  border: none;
  height: 50px;
  outline: none;
}
.newsletter .newsletter-form form button {
  position: absolute;
  right: 0;
  top: 0;
  padding: 15px 24px;
  transition: all ease-in-out 0.5s;
}
.newsletter .newsletter-form form button:hover {
  background: #C9A971 !important;
  transition: all ease-in-out 0.5s;
  color: #fff;
  opacity: 0.8;
}

@media (max-width: 811px) {
  .newsletter .newsletter-main .newsletter-form {
    width: 60% !important;
  }
}
@media (max-width: 767px) {
  .newsletter .newsletter-main .newsletter-form {
    width: 100% !important;
  }
}
@media (max-width: 567px) {
  .newsletter .newsletter-main .newsletter-form form {
    border: none !important;
    border-radius: 0 !important;
  }
  .newsletter .newsletter-main .newsletter-form form input {
    border: 1px solid #f1f1f1 !important;
    padding-right: 20px !important;
  }
  .newsletter .newsletter-main .newsletter-form form input.nir-btn, .newsletter .newsletter-main .newsletter-form form button {
    border: none !important;
    position: relative !important;
    margin-top: 16px;
    width: 100%;
  }
}
/* ========================================= */
/*          Footer CSS        */
/* ======================================== */
footer {
  width: 100%;
  overflow: hidden;
  position: relative;
  background-position: bottom right;
  background-repeat: no-repeat;
  background-color: #16232F;
}
footer .overlay {
  opacity: 0.8;
}
footer a, footer p, footer li {
  color: #fff;
  font-weight: 400;
}
footer a:hover {
  color: #fff !important;
}
footer h3 {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 30px;
}
footer h3:after {
  position: absolute;
  content: "";
  height: 2px;
  width: 50px;
  background: #fff;
  left: 0;
  bottom: 0;
}
footer .footer-upper {
  position: relative;
  z-index: 1;
}
footer .footer-upper .footer-links ul.list li {
  display: inline-block;
  padding: 0 10px;
}
footer .footer-upper .footer-links ul li {
  margin-bottom: 20px;
  color: #fff;
  display: block;
}
footer .footer-upper .footer-links ul li a {
  transition: all ease-in-out 0.5s;
  color: #fff;
}
footer .footer-upper .footer-links ul li a:hover {
  color: #A8834E !important;
  transition: all ease-in-out 0.5s;
}
footer .footer-upper .footer-links ul li a.active {
  color: #A8834E;
}
footer .footer-upper .footer-links ul p span {
  color: #A8834E;
}
footer .footer-upper .footer-links .tagcloud a {
  display: inline-block;
}
footer .footer-upper .footer-links .tagcloud a:hover {
  background: #A8834E !important;
}
footer .footer-upper .footer-links h5 {
  border: none;
  padding: 0;
}
footer .footer-upper .footer-links p.f-para {
  border-bottom: 1px dashed #f1f1f1;
}
footer .footer-upper .footer-links input.nir-btn {
  border: none;
}
footer .footer-upper .footer-links input.nir-btn:hover {
  opacity: 0.8;
  background: #A8834E !important;
  color: #fff;
}
footer .footer-upper .footer-links .post-list {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1882352941);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
footer .footer-upper .footer-links .post-list:last-child {
  border: none;
  margin: 0;
  padding: 0;
}
footer .footer-upper .footer-links .post-list .post-image {
  width: 30%;
  border-radius: 0px;
  overflow: hidden;
}
footer .footer-upper .footer-links .post-list span {
  font-size: 12px;
}
footer .footer-upper .footer-about p, footer .footer-upper .footer-about li {
  color: #777;
}
footer .footer-upper .footer-about li {
  line-height: 2;
}
footer .footer-middle {
  border-top: 1px dashed #f1f1f1;
}
footer .footer-middle .footer-nav ul li a {
  display: inline-block;
  margin: 0 5px;
  font-weight: 700;
}
footer .footer-copyright {
  position: relative;
  z-index: 1;
}
footer .footer-copyright .copyright-inner {
  background: rgba(251, 251, 251, 0.0705882353);
}
footer .newsletter-main .section-title h2 {
  font-size: 20px;
}
footer .newsletter-form button {
  width: 38%;
}
footer .footer-payment {
  position: relative;
  z-index: 2;
}
footer .footer-payment .col-lg-8.footer-payment-nav {
  margin-bottom: 1rem !important;
}
footer .footer-payment .col-lg-4.footer-payment-nav {
  margin-bottom: 1.5rem !important;
}
footer .footer-listing-main .footer-listing {
  border: 1px dashed rgba(241, 241, 241, 0.3411764706);
  padding: 20px;
}
footer .footer-listing-main .footer-listing i {
  font-size: 31px;
  display: block;
}

.social-links {
  display: inline-block;
}
.social-links ul li {
  display: inline-block !important;
}
.social-links ul li a {
  background: rgba(255, 255, 255, 0.1490196078);
  color: #fff;
  width: 40px;
  height: 40px;
  display: inline-block;
  text-align: center;
  font-size: 15px;
  line-height: 2.4;
  border-radius: 50%;
}
.social-links ul li a:hover {
  color: #fff;
  background: #A8834E;
}

footer.footer1 {
  background-color: transparent;
}
footer.footer1 h4:after {
  position: absolute;
  content: "";
  height: 2px;
  width: 50px;
  background: #A8834E;
  left: 0;
  bottom: 0;
}
footer.footer1 .footer-upper .footer-links ul li {
  margin-bottom: 0;
  line-height: 2.5;
  display: block;
  color: #3f3f3f;
}
footer.footer1 .footer-upper .footer-links ul li a {
  color: #3f3f3f;
}
footer.footer1 .footer-upper .footer-links ul p span {
  color: #A8834E;
}
footer.footer1 .footer-upper .footer-links input.nir-btn {
  border: none;
}
footer.footer1 .footer-upper .footer-links input.nir-btn:hover {
  opacity: 0.8;
  background: #A8834E !important;
  color: #fff;
}
footer.footer1 .footer-upper .footer-links .post-list {
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1882352941);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
footer.footer1 .footer-upper .footer-links .post-list:last-child {
  border: none;
  margin: 0;
  padding: 0;
}
footer.footer1 .footer-upper .footer-links .post-list .post-image {
  width: 30%;
  border-radius: 0px;
  overflow: hidden;
}
footer.footer1 .footer-upper .footer-links .post-list span {
  font-size: 12px;
}
footer.footer1 .footer-copyright .social-links ul li {
  display: inline-block;
}
footer.footer1 .footer-copyright .social-links ul li a {
  background: #A8834E;
  color: #fff;
  width: 40px;
  height: 40px;
  display: inline-block;
  text-align: center;
  font-size: 15px;
  line-height: 2.5;
}
footer.footer1 .footer-copyright .social-links ul li a:hover {
  color: #fff;
  background: #A8834E;
}

footer.footermain {
  width: 100%;
  overflow: hidden;
  position: relative;
}
footer.footermain::before {
  content: "";
  background: #181d20 url(../images/testimonial.png);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
footer.footermain .footer-upper {
  position: relative;
  z-index: 1;
}

@media (max-width: 1100px) and (min-width: 1024px) {
  footer .footer-listing-main .footer-listing {
    margin: 0 5px;
  }
}
@media (max-width: 991px) {
  footer .footer-upper {
    padding-bottom: 3rem;
  }
  footer .footer-upper .footer-links {
    width: 100% !important;
  }
  footer .newsletter .newsletter-main {
    text-align: center;
  }
  footer .newsletter .newsletter-main .section-title {
    margin-bottom: 1rem;
  }
  footer .newsletter .newsletter-main .newsletter-form {
    margin: 0 auto !important;
  }
  footer .f-payment {
    margin-top: 1rem;
    text-align: center;
  }
  footer .footer-listing-main .footer-listing {
    margin-top: 15px;
  }
  footer .newsletter-form form {
    display: block !important;
  }
  footer .newsletter-form button {
    width: 100%;
    margin: 10px 0 0 !important;
  }
  footer.footer1 .section-title {
    width: 100%;
    text-align: center;
    margin-bottom: 2rem;
  }
  footer.footer1 .newsletter .newsletter-main {
    text-align: center;
  }
  footer.footer1 .newsletter .newsletter-main .newsletter-form {
    width: 80%;
    margin: 0 auto;
  }
}
@media (max-width: 767px) {
  footer .footer-copyright .copyright-inner {
    text-align: center;
  }
  footer .footer-copyright .copyright-inner .copyright-text {
    margin-bottom: 15px;
  }
  footer .footer-middle {
    padding-top: 0 !important;
  }
  footer .footer-middle .footer-nav {
    width: 100% !important;
  }
}
@media (max-width: 639px) {
  footer .footer-upper .footer-links .post-list {
    justify-content: normal !important;
  }
  footer .footer-upper .footer-links .post-list .post-content {
    padding-left: 1rem;
  }
}
@media (max-width: 359px) {
  footer .footer-payment .footer-pay .footer-payment-nav select {
    margin-bottom: 15px;
  }
}
/* ========================================= */
/*          Listing CSS        */
/* ======================================== */
.listing-main.mt-map {
  margin-top: -80px;
  position: relative;
}

.list-results {
  position: relative;
  margin-bottom: 2rem;
  width: 100%;
}
.list-results label {
  margin: 0;
}
.list-results .nice-select {
  border: 1px solid #f1f1f1;
  background: #fff;
  width: 150px;
  padding-left: 20px;
  line-height: 1.5;
  height: 44px;
}
.list-results .change-grid, .list-results .change-list {
  display: inline-block;
}
.list-results .change-grid i, .list-results .change-list i {
  line-height: 2.5;
  text-align: center;
  display: inline-block;
  transition: all ease-in-out 0.5s;
  height: 40px;
  width: 40px;
  background: #fff;
}
.list-results .change-list.f-active i, .list-results .change-grid.f-active i {
  background: #C9A971;
  color: #fff;
  transition: all ease-in-out 0.5s;
  border-color: #C9A971;
}

.form-find .nice-select {
  line-height: 2;
}

.page-banner-img {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;
  width: 100%;
}

.blog-full {
  overflow: hidden;
}
.blog-full .blog-image {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 0px;
  transition: all ease-in-out 0.5s;
}
.blog-full .blog-image .h-date {
  text-align: center;
  position: absolute;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  border-radius: 15px;
  z-index: 1;
}
.blog-full .blog-image > a {
  background-size: cover;
  height: 100%;
  width: 100%;
  background-position: center;
  display: inline-block;
  transition: all ease-in-out 0.5s;
}

.blog-content {
  display: inline-block;
  width: 100%;
}
.blog-content p:first-child:first-letter {
  font-size: 64px;
  color: #A8834E;
  float: left;
  display: block;
  line-height: 1;
  padding-right: 10px;
  font-weight: 400;
}
.blog-content > a:hover {
  color: #A8834E !important;
  transition: all ease-in-out 0.5s;
}

.detail-title .detail-title-inner .listing-rating i {
  color: #fff;
}
.detail-title .detail-title-inner .list-single-contacts li {
  font-size: 13px;
  padding-right: 10px;
}
.detail-title .detail-title-inner .list-single-details .list-single-rating {
  position: relative;
  z-index: 1;
  display: inline-block;
}
.detail-title .detail-title-inner .list-single-details .list-single-rating .rating-score span, .detail-title .detail-title-inner .list-single-details .list-single-rating .rating-score svg {
  background: #fff;
  color: #A8834E;
  float: left;
  font-weight: 700;
  border-radius: 0px;
  padding: 16px 18px;
  font-size: 20px;
}

.detail-listing-inner {
  border: 1px solid #f1f1f1;
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.2156862745);
  padding: 20px;
  border-radius: 0px;
}
.detail-listing-inner > div {
  border-bottom: 1px dashed #f1f1f1;
  padding-bottom: 2rem;
  margin-bottom: 1.5rem;
}
.detail-listing-inner > div .detail-amenities li {
  width: 32.9%;
  margin-bottom: 0.5%;
  border: 1px dashed #f1f1f1;
  padding: 10px;
  color: #777;
  border-radius: 0px;
}
.detail-listing-inner > div .detail-amenities li i {
  margin-right: 5px;
}
.detail-listing-inner > div:last-child {
  border: none;
  padding: 0;
  margin: 0;
}
.detail-listing-inner .detail-recentlist .blog-full {
  box-shadow: none;
}

.detail-comments .comment-box, .single-comments .comment-box {
  display: flex;
  margin-bottom: 30px;
}
.detail-comments .comment-box:last-child, .single-comments .comment-box:last-child {
  margin-bottom: 0;
}
.detail-comments .comment-box .comment-image, .single-comments .comment-box .comment-image {
  text-align: center;
}
.detail-comments .comment-box .comment-image img, .single-comments .comment-box .comment-image img {
  border-radius: 10px;
}
.detail-comments .comment-box .comment-content, .single-comments .comment-box .comment-content {
  border-bottom: 1px dashed #f1f1f1;
  position: relative;
  background: #f1f1f1;
  padding: 20px;
  margin-left: 30px;
}
.detail-comments .comment-box .comment-content:before, .single-comments .comment-box .comment-content:before {
  content: "";
  position: absolute;
  left: -20px;
  top: 25px;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 20px solid #f1f1f1;
}
.detail-comments .comment-box .comment-content:last-child, .single-comments .comment-box .comment-content:last-child {
  border: 0;
}
.detail-comments .comment-box .comment-content p.comment-date, .single-comments .comment-box .comment-content p.comment-date {
  position: absolute;
  right: 20px;
  top: 20px;
  font-size: 14px;
  margin: 0;
}
.detail-comments .comment-box .comment-content .comment-rate span.comment-title, .single-comments .comment-box .comment-content .comment-rate span.comment-title {
  font-weight: 500;
  font-style: italic;
}
.detail-comments .comment-box .comment-content p.comment, .single-comments .comment-box .comment-content p.comment {
  margin: 0.5rem 0;
}
.detail-comments .comment-box .comment-content .comment-like, .single-comments .comment-box .comment-content .comment-like {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
}
.detail-comments .comment-box .comment-content .comment-like a, .single-comments .comment-box .comment-content .comment-like a {
  padding: 6px 12px;
}
.detail-comments .comment-box .comment-content .comment-like .like-title, .single-comments .comment-box .comment-content .comment-like .like-title {
  display: inline-block;
}
.detail-comments .comment-box .comment-content .comment-like .like-btn a, .single-comments .comment-box .comment-content .comment-like .like-btn a {
  margin-left: 10px;
}
.detail-comments .comment-box .comment-content .comment-like .like-btn a.like, .single-comments .comment-box .comment-content .comment-like .like-btn a.like {
  color: #292e8c;
}
.detail-comments .comment-box .comment-content .comment-like .like-btn a.dislike, .single-comments .comment-box .comment-content .comment-like .like-btn a.dislike {
  color: #a6aebb;
}
.detail-comments .comment-box .comment-content .comment-like .like-btn a.love, .single-comments .comment-box .comment-content .comment-like .like-btn a.love {
  color: #ff6f7e;
}

@media (max-width: 991px) {
  .blog-full .blog-height {
    height: 250px;
  }
  .list-sidebar {
    margin-top: 2rem;
  }
  .listing-main1 {
    padding: 0 !important;
  }
  .listing-main1 .form-find .form-group {
    margin: 0 0 0.5rem !important;
  }
}
@media (max-width: 767px) {
  .detail-listing-inner > div .detail-amenities li {
    width: 49%;
  }
  .blog-full .blog-image > a {
    height: 320px;
  }
  .blog-content {
    padding-top: 20px !important;
  }
  .blog-single-in .blog-date, .blog-single-in .blog-single-in-cont {
    width: 100% !important;
  }
  .blog-single-in .blog-single-in-cont {
    padding: 0 20px 20px;
  }
  .blog .listing-inner {
    padding: 0 !important;
  }
}
@media (max-width: 639px) {
  .detail-comments .comment-box, .single-comments .comment-box {
    display: block !important;
    text-align: center;
  }
  .detail-comments .comment-box .comment-image, .single-comments .comment-box .comment-image {
    display: inline-block;
  }
  .detail-comments .comment-box .comment-content, .single-comments .comment-box .comment-content {
    margin-top: 1rem;
    margin-left: 0 !important;
  }
  .detail-comments .comment-box .comment-content:before, .single-comments .comment-box .comment-content:before {
    display: none;
  }
  .detail-comments .comment-box .comment-content p.comment-date, .single-comments .comment-box .comment-content p.comment-date {
    position: relative !important;
    top: 0;
    right: 0;
  }
  .detail-comments .comment-box .comment-content .rating-comment, .single-comments .comment-box .comment-content .rating-comment {
    display: inline-block !important;
    width: 100%;
  }
  .detail-comments .comment-box p.comment-date, .single-comments .comment-box p.comment-date {
    display: inline-block !important;
    margin-top: 2rem;
  }
  .blog-imagelist {
    text-align: center;
  }
  .blog-imagelist img {
    margin-bottom: 1rem;
  }
  .review-box {
    margin-bottom: 15px;
  }
}
@media (max-width: 567px) {
  .list-results {
    display: inherit !important;
    text-align: center;
  }
  .list-results .click-menu {
    justify-content: center !important;
    margin-top: 1rem;
  }
  .list-results .click-menu .sortby {
    display: inline-block !important;
  }
  ul.detail-inline {
    display: block !important;
  }
  ul.detail-inline li {
    display: block !important;
    margin: 0 0 5px !important;
  }
  .detail-listing-inner > div .detail-amenities li {
    width: 100%;
  }
}
@media (max-width: 400px) {
  .detail-comments .comment-box .comment-content .comment-like, .single-comments .comment-box .comment-content .comment-like {
    display: block !important;
  }
  .detail-comments .comment-box .comment-content .comment-like .like-title, .single-comments .comment-box .comment-content .comment-like .like-title {
    float: none !important;
  }
  .detail-comments .comment-box .comment-content .comment-like .like-btn, .single-comments .comment-box .comment-content .comment-like .like-btn {
    float: none !important;
    margin-top: 0.5rem;
  }
  .detail-comments .comment-box .comment-content .comment-like .like-btn a, .single-comments .comment-box .comment-content .comment-like .like-btn a {
    padding: 0;
  }
  .detail-title .detail-title-inner .list-single-contacts li {
    padding-right: 0;
  }
}
/* ========================================= */
/*          Blog CSS        */
/* ======================================== */
.swiper-list li {
  display: inline-block;
  margin-bottom: 0;
  border: 1px solid #fff;
  padding: 5px 10px;
  text-align: center;
  border-radius: 0px;
}

section.blog .grid {
  position: relative;
  overflow: hidden;
  border-radius: 0px;
}
section.blog .grid .gridblog-content {
  padding: 20px 0 0;
}
section.blog .grid .gridblog-content .date {
  border-bottom: 1px solid #f1f1f1;
  display: inline-block;
}
section.blog .grid .gridblog-content .date a {
  color: #999;
  font-size: 14px;
}
section.blog .grid .gridblog-content .date a:hover {
  color: #A8834E;
}
section.blog .grid .grid-image {
  position: relative;
  transition: all ease-in-out 0.5s;
  overflow: hidden;
}
section.blog .grid .grid-image img {
  transition: all ease-in-out 0.5s;
  width: 100%;
}
section.blog .grid .grid-image:hover img {
  transform: scale(1.1);
  transition: all ease-in-out 0.5s;
}
section.blog .grid .grid-image:before {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
  transition: transform 1.8s;
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -200%, 0);
  z-index: 1;
}
section.blog .grid .grid-image:hover:before {
  transform: scale3d(1.9, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 200%, 0);
}
section.blog .grid .grid-image .overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4901960784), transparent);
}
section.blog .grid .grid-item1 .gridblog-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 2;
  padding: 20px;
}
section.blog .grid .grid-item1 .date {
  border-bottom: 1px solid #fff;
  display: inline-block;
}

.author-news {
  position: relative;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  display: inline-block;
  width: 100%;
}
.author-news .author-news-content {
  position: relative;
  z-index: 1;
}
.author-news .author-news-content .author-thumb {
  width: 100px;
  height: 100px;
  margin: 0px auto;
  position: relative;
  overflow: hidden;
}
.author-news .author-news-content .author-thumb img {
  width: 100%;
  border-radius: 50%;
  height: 100%;
}
.author-news .author-news-content .author-thumb:before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 80px;
  width: 80px;
  border-radius: 50%;
  border: 2px dashed #fff;
}

.header-social ul li {
  display: inline-block;
  margin: 0;
}
.header-social ul li a i {
  height: 40px;
  width: 40px;
  text-align: center;
  line-height: 40px;
  background: #5e5eb7;
  color: #fff;
  margin-right: 2px;
}
.header-social ul li a i:hover {
  opacity: 0.8;
}
.header-social ul li a i:last-child {
  margin-right: 0;
}
.header-social ul li:nth-child(2) a i {
  background: #c72026;
}
.header-social ul li:nth-child(3) a i {
  background: #29a4dd;
}

ul.sidebar-category li {
  display: block;
}
ul.sidebar-category li a {
  position: relative;
  margin: 0 0 12px;
  border-radius: 10px;
  background: #fff;
  padding: 14px 20px;
  border: 1px solid #f1f1f1;
  display: block;
}
ul.sidebar-category li a:hover {
  background: #A8834E;
  color: #fff;
}
ul.sidebar-category li.active a {
  background: #A8834E;
  color: #fff;
}

ul.sidebar-category1 li {
  display: block;
  line-height: 2.4;
}

.sidebar-products .s-content {
  border-bottom: 1px dashed #f1f1f1;
}
.sidebar-products .s-content .products-price {
  color: #A8834E;
}

.sidebar-tabs .nav-tabs {
  border-bottom: none;
  background: #fff;
  overflow: hidden;
  margin-bottom: 30px;
}
.sidebar-tabs .nav-tabs > li button {
  border-radius: 10px;
  padding: 15px;
  margin: 0;
  line-height: inherit;
  border: 1px solid #f1f1f1;
  display: inline-block;
  width: 100%;
}
.sidebar-tabs .nav-tabs > li button:hover {
  color: #fff !important;
  border-color: #A8834E;
  background: #A8834E;
}
.sidebar-tabs .nav-tabs > li button.active {
  color: #fff !important;
  border-color: #A8834E;
  background: #A8834E;
}
.sidebar-tabs .nav-tabs > li button.active:hover {
  color: #fff !important;
  border-color: #A8834E;
  background: #A8834E;
}
.sidebar-tabs .sidebar-image {
  overflow: hidden;
}
.sidebar-tabs .sidebar-image img {
  width: 100%;
  border-radius: 10px;
}
.sidebar-tabs .s-content .blog-no {
  font-size: 27px;
  color: #ccc;
  font-weight: 700;
}
.sidebar-tabs .s-content .date {
  font-size: 14px;
  font-style: italic;
}
.sidebar-tabs .s-content h5 {
  text-transform: capitalize;
  border: none;
  padding: 0;
}

ul.sidebar-tags li {
  display: inline-block;
  margin-bottom: 0;
}
ul.sidebar-tags li a {
  padding: 10px 15px;
  background: #fff;
  display: inline-block;
  margin-bottom: 3px;
  border-radius: 10px;
  color: #444;
  border: 1px solid #f1f1f1;
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.2156862745);
  transition: all ease-in-out 0.5s;
}
ul.sidebar-tags li a:hover {
  background: #A8834E;
  color: #fff;
  transition: all ease-in-out 0.5s;
}

.sidebar-videos article.post {
  padding: 15px;
  background: #fff;
  border: 1px solid #f1f1f1;
  box-shadow: 0 0 15px rgba(204, 204, 204, 0.2156862745);
}
.sidebar-videos button.slick-prev.slick-arrow, .sidebar-videos button.slick-next.slick-arrow {
  display: none !important;
}

@media (max-width: 991px) {
  .sidebar-pomplet {
    text-align: center;
  }
}
.blog-single .para-content {
  border-top: 1px dashed #f1f1f1;
  padding-top: 15px;
}
.blog-single .para-content span a {
  font-size: 14px;
  font-style: italic;
}
.blog-single .blog-quote {
  position: relative;
  text-align: center;
  z-index: 10;
  padding: 60px 40px 30px;
  border-radius: 0px;
  overflow: hidden;
}
.blog-single .blog-quote:before {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: #A8834E;
  z-index: -1;
}
.blog-single .blog-quote p {
  font-size: 24px;
  line-height: 1.3;
  margin-top: 50px;
}
.blog-single .blog-quote span {
  font-size: 16px;
  font-style: italic;
}
.blog-single .blog-quote i {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 30px;
  height: 75px;
  width: 75px;
  text-align: center;
  line-height: 75px;
  background: #fff;
  color: #A8834E;
  border-radius: 50%;
  margin-bottom: 20px;
}
.blog-single .blog-quote i:after {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 55px;
  width: 55px;
  border-radius: 50%;
  border: 1px dashed #fff;
}
.blog-single .blog-share {
  padding: 20px;
  background: #fff;
}
.blog-single .blog-share .blog-share-tag ul li {
  display: inline-block;
  margin-bottom: 0;
}
.blog-single .blog-next {
  display: inline-block;
  width: 100%;
  background: #fff;
  border-radius: 0px;
  overflow: hidden;
}
.blog-single .blog-next a {
  width: 50%;
  padding: 20px;
}
.blog-single .blog-next a.float-left {
  background: #A8834E;
}
.blog-single .blog-next .prev, .blog-single .blog-next .next {
  position: relative;
}
.blog-single .blog-next .prev i, .blog-single .blog-next .next i {
  position: absolute;
  left: 0;
  top: 6px;
}
.blog-single .blog-next .next i {
  left: inherit;
  right: 0;
}
.blog-single .blog-author {
  padding: 20px;
  border-radius: 0px;
  background: #fff;
}
.blog-single .blog-author .blog-author-item .title span {
  text-transform: capitalize;
  font-size: 15px;
  font-weight: 400;
}
.blog-single .blog-author .blog-author-item .blog-thumb img {
  border-radius: 50%;
  width: 150px;
  height: 150px;
}
.blog-single .blog-author .blog-author-item .blog-thumb:before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
  height: 125px;
  width: 125px;
  transform: translate(-50%, -50%);
  z-index: 1;
  border: 2px dashed #fff;
  border-radius: 50%;
}

@media (max-width: 991px) {
  .blog-sidebar {
    margin-top: 2rem;
    position: relative;
  }
  section.login {
    padding-bottom: 0 !important;
  }
  section.login .login-content {
    margin-bottom: 2rem;
  }
}
@media (max-width: 767px) {
  .blog-single .blog-next a {
    width: 100%;
  }
  .blog-single .blog-share {
    display: block !important;
    text-align: center;
  }
  .blog-single .blog-share .header-social {
    margin-top: 1rem;
  }
  .blog-single .blog-author {
    text-align: center;
  }
  .blog-single .blog-author .blog-thumb {
    margin-bottom: 1rem;
  }
  .blog-single .blog-quote {
    padding: 60px 20px 30px;
  }
  .blog-single .blog-quote p {
    font-size: 18px;
  }
  .blog-single .blog-single-in-cont {
    width: 100% !important;
    padding: 0 !important;
  }
  .detail-comments h4, .single-comments h4 {
    text-align: center;
  }
}
@media (max-width: 359px) {
  .sidebar-tabs .nav-tabs > li > a {
    padding: 15px 13px;
  }
}
.main-slider-1 {
  z-index: 1;
}
.main-slider-1::before {
  content: "";
  background: #172445;
  height: 100%;
  width: 50%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
}
.main-slider-1 .main-slider-inner {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
}
.main-slider-1 .main-slider-inner .logo-tab a {
  background: #fff;
  display: inline-block;
  padding: 15px;
}
.main-slider-1 .main-slider-inner .form-content {
  width: 80%;
}
.main-slider-1 .main-slider-inner .form-content .search-tabs li a {
  color: #fff;
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
  font-weight: 500;
  position: relative;
}
.main-slider-1 .main-slider-inner .form-content .search-tabs li a span {
  display: block;
  font-size: 14px;
}
.main-slider-1 .main-slider-inner .form-content .search-tabs li i {
  border-radius: 50%;
  color: #A8834E;
  float: right;
  font-size: 15px;
  height: 38px;
  line-height: 38px;
  margin-right: 0px;
  margin-top: 2px;
  text-align: center;
  width: 38px;
  background: #fff;
}
.main-slider-1 .main-slider-inner .form-content .search-tabs li.active a {
  color: #A8834E;
}
.main-slider-1 .main-slider-inner .form-content .search-tabs li.active a span {
  color: #A8834E;
}
.main-slider-1 .main-slider-inner .form-content .search-tabs li.active i {
  background: #A8834E;
  color: #fff;
}
.main-slider-1 .main-slider-inner .form-content .nice-select {
  padding: 13px 20px 10px 35px;
}
.main-slider-1 .main-slider-inner .form-content .range-slider .ui-slider .ui-slider-range {
  background: #fff;
}
.main-slider-1 .main-slider-inner .form-content .range-slider .ui-slider .min-value, .main-slider-1 .main-slider-inner .form-content .range-slider .ui-slider .max-value {
  color: #fff;
}
.main-slider-1 .main-slider-inner .form-content label {
  color: #fff;
}
.main-slider-1 .main-slider-inner .form-content .input-box {
  position: relative;
  display: inline-block;
  width: 100%;
}
.main-slider-1 .main-slider-inner .form-content .input-box input {
  padding-left: 35px;
}
.main-slider-1 .main-slider-inner .form-content .input-box i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.main-slider-1 .main-slider-inner .form-content .input-box [class^=fa-]:before {
  color: #A8834E;
  font-weight: 600;
}
.main-slider-1 .main-slider-inner .social-icons li {
  display: inline-block;
  position: relative;
}
.main-slider-1 .main-slider-inner .social-icons li a {
  color: #A8834E;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: #fff;
  text-align: center;
  line-height: 2.3;
  margin: 0 2px;
}
.main-slider-1 #particles-js {
  position: fixed;
  z-index: -1;
}

@media (max-width: 991px) {
  .home-search .overlay {
    display: none;
  }
  .home-search .main-slider-1::before {
    width: 100%;
    opacity: 0.8;
  }
  .home-search .main-slider-1 .main-slider-inner {
    position: relative;
    top: inherit;
    left: inherit;
    transform: none;
  }
  .home-search .main-slider-1 .main-slider-inner .main-tab-sec {
    margin-bottom: 2rem;
  }
  .home-search .main-slider-1 .main-slider-inner .col-lg-6 {
    padding: 0 15px !important;
  }
  .home-search .main-slider-1 .main-slider-inner .form-content .search-tabs li {
    text-align: center;
  }
  .home-search .main-slider-1 .main-slider-inner .form-content .search-tabs li a {
    display: block;
  }
  .home-search .main-slider-1 .main-slider-inner .form-content .search-tabs li i {
    float: none;
  }
}
@media (max-width: 991px) {
  .booking-terms .form-group {
    width: 100% !important;
  }
  .booking-terms a {
    width: auto !important;
  }
}
.flight-banner a.nir-btn {
  padding: 12px 24px;
  height: 50px;
  line-height: 2;
}
.flight-banner .flight-slider {
  position: relative;
  width: 150%;
  right: 0;
  top: 0;
}

.flight-navtab .nav-tabs {
  border: none;
  background: #777;
  border-radius: 10px 10px 0 0;
  text-align: center;
  display: inline-block;
}
.flight-navtab .nav-tabs button {
  padding: 15px 20px;
  text-align: center;
  display: inline-block;
  text-transform: uppercase;
  color: #fff;
  border: none;
  border-radius: 0;
}
.flight-navtab .nav-tabs button span {
  display: block;
  font-weight: 700;
}
.flight-navtab .nav-tabs button.active, .flight-navtab .nav-tabs button.show {
  background: #A8834E;
  color: #fff;
}

.flight-full .accordion-button:focus {
  box-shadow: none;
}
.flight-full .accordion-button:not(.collapsed) {
  color: #A8834E;
  background: none;
  box-shadow: none;
}

@media (max-width: 991px) {
  .flight-banner .banner-in .book-form {
    position: relative !important;
  }
  .flight-banner .flight-slider {
    position: relative;
    width: 100%;
  }
}
@media (max-width: 991px) {
  .flight-navtab .nav-tabs button {
    width: 100%;
  }
}
.car-banner a.nir-btn {
  padding: 12px 24px;
  height: 50px;
  line-height: 2;
}
.car-banner .book-form {
  width: 90%;
}

.car-image {
  position: absolute;
  bottom: -90%;
  right: 0;
  width: 68%;
  left: 0;
  margin: 0 auto;
}

@media (max-width: 991px) {
  .car-image {
    width: 100%;
    bottom: -51%;
  }
}
@media (max-width: 735px) {
  .car-banner .container {
    padding: 0 15px;
  }
  .car-banner .book-form {
    width: 100%;
  }
  .car-banner .car-slider {
    top: 20px !important;
  }
  .car-banner .car-slider .slick-initialized .slick-slide {
    margin: 0px 0 20px;
  }
  .featured-counter {
    padding-bottom: 0 !important;
  }
  .featured-counter .car-image {
    position: relative;
    bottom: -18px;
  }
  .car-testi {
    padding-top: 5rem !important;
  }
  .category-main-inner {
    padding-top: 3rem !important;
  }
}
.cruise-banner .slider {
  height: 600px !important;
}
.cruise-banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content {
  width: 60%;
  top: 50%;
}

.home-thh .main_header_area {
  position: absolute;
}
.home-thh .main_header_area .header-content {
  background: transparent;
  border-bottom: 1px solid #656565;
}
.home-thh .main_header_area .navbar.navbar-default {
  border-bottom: 1px solid #656565;
}
.home-thh .main_header_area .navbar.navbar-default .nav.navbar-nav li a {
  color: #fff;
}
.home-thh .main_header_area .navbar.navbar-default .nav.navbar-nav li a.mt_search {
  border-left: 1px solid #656565;
  border-right: 1px solid #656565;
  padding: 30px 35px;
  margin-left: 20px;
}
.home-thh .main_header_area .navbar.navbar-default .nav.navbar-nav li a.mt_search i {
  font-size: 16px;
}
.home-thh .main_header_area .navbar.navbar-default .nav.navbar-nav li.active a, .home-thh .main_header_area .navbar.navbar-default .nav.navbar-nav li:hover a {
  color: #A8834E;
}
.home-thh .main_header_area .navbar.navbar-default.navbar-sticky-in {
  border-color: #eee;
}
.home-thh .main_header_area .navbar.navbar-default.navbar-sticky-in .nav.navbar-nav li a {
  color: #777;
  border-color: #eee;
}
.home-thh .main_header_area .register-login a {
  color: #fff;
}
.home-thh .banner .slider {
  height: 100vh !important;
}
.home-thh .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content {
  top: 55%;
  width: 60%;
}
.home-thh .banner .swiper-button-next:after, .home-thh .banner .swiper-button-prev:after {
  background: transparent;
}
.home-thh .banner .banner-main {
  height: 100vh;
}
.home-thh .banner .banner-main .banner-content {
  top: 55%;
  width: 65%;
}
.home-thh .banner .banner-main .banner-content h1 {
  font-size: 38px;
}
.home-thh .banner .banner-main .banner-content .banner-booking .form-content {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.home-thh .banner .banner-main .banner-content .banner-booking .form-content .nice-select.niceSelect, .home-thh .banner .banner-main .banner-content .banner-booking .form-content input {
  background: transparent;
  color: #fff;
}

@media (min-width: 992px) {
  .home-thh .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu:hover ul {
    left: inherit;
    right: 0;
  }
}
.about_us__ot .experience-badge {
  position: absolute;
  top: 0;
  left: 20px;
  background: #A8834E;
  color: white;
  border: 5px solid #fff;
  padding: 20px;
  border-radius: 50px;
  font-weight: bold;
}
.about_us__ot .img-fluid {
  width: 65%;
}
.about_us__ot .video-thumbnail {
  position: absolute;
  right: 20px;
  bottom: 30px;
  width: 50%;
  border: 10px solid #fff;
  background: #fff;
  border-radius: 10px;
}
.about_us__ot .video-thumbnail img {
  border-radius: 5px;
}
.about_us__ot .icon__png {
  position: absolute;
  top: 5%;
  right: 5%;
  width: 15%;
  z-index: -1;
  transform: rotate(-4deg);
  animation: moveUpDown 3s infinite alternate ease-in-out;
}
.about_us__ot .cloud__png1, .about_us__ot .cloud__png2, .about_us__ot .cloud__png3 {
  position: absolute;
  width: 25%;
  z-index: 1;
  transform: rotate(-4deg);
  animation: moveUpDown 3s infinite alternate ease-in-out;
}
.about_us__ot .cloud__png1 {
  top: 32%;
  left: 16%;
}
.about_us__ot .cloud__png2 {
  top: 60%;
  right: -9%;
}
.about_us__ot .cloud__png3 {
  bottom: -8%;
  left: 25%;
}
.about_us__ot .dot-pattern {
  width: 100px;
  height: 120px;
  background: radial-gradient(circle, #C9A971 10%, transparent 10%) 0 0/15px 15px;
  position: absolute;
  bottom: -5%;
  left: 10%;
  transform: translate(-50%, -50%);
  animation: moveUpDown 2s infinite alternate ease-in-out;
}
@keyframes moveUpDown {
  0% {
    transform: translate(-50%, -50%) translateY(0);
  }
  100% {
    transform: translate(-50%, -50%) translateY(10px);
  }
}
.about_us__ot .video-button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.offer_banner {
  position: relative;
  border-radius: 10px;
  height: 306px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  animation: slideIn 1s ease-in-out;
}
.offer_banner img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 0.5s ease-in-out;
}
.offer_banner:hover img {
  transform: scale(1.05);
}
.offer_banner .content {
  position: relative;
  width: 60%;
  background: linear-gradient(to right, #C9A971, rgba(255, 255, 0, 0));
  color: white;
  padding: 30px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  height: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  animation: fadeIn 1s ease-in-out;
}
.offer_banner .content h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
.offer_banner .content p {
  font-size: 16px;
  margin-bottom: 15px;
}
.offer_banner .content .discount {
  font-size: 20px;
  font-weight: bold;
  color: yellow;
}
.offer_banner .nir-btn-white {
  margin-top: 10px;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
  animation: pulse 2s infinite;
}
.offer_banner .nir-btn-white:hover {
  transform: scale(1.1);
}
.offer_banner .blob {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  z-index: 1;
}
.offer_banner .content-2 {
  opacity: 0.8;
  z-index: 1;
}
.offer_banner .content-2 p {
  width: -moz-max-content;
  width: max-content;
  margin: 0 auto;
}
.offer_banner .content-2 > * {
  border-radius: 5px;
}

@keyframes slideIn {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes moveUpDn {
  0% {
    bottom: 130px;
    transform: rotate(-190deg);
  }
  100% {
    bottom: 140px;
    transform: rotate(-140deg);
  }
}
.home-eight .banner {
  margin: 0 45px;
  border-radius: 15px;
}
.home-eight .banner .swiper-button-next {
  left: 30px;
  right: inherit;
  top: 48%;
}
.home-eight .banner .swiper-button-next:after {
  content: "\e078";
}
.home-eight .banner .swiper-button-prev {
  top: 57%;
}
.home-eight .banner .swiper-button-prev:after {
  content: "\e07b";
}
.home-eight .banner .swiper-button-next:after, .home-eight .banner .swiper-button-prev:after {
  font-family: simple-line-icons;
  background: transparent;
  opacity: 0.7;
}
.home-eight .banner .slider {
  height: 630px !important;
}
.home-eight .banner .slider .swiper-container .swiper-slide .slide-inner .swiper-content {
  text-align: left;
  margin: 0;
  left: 8%;
  top: 55%;
}
.home-eight .banner .banner-content {
  top: 23%;
  left: 8%;
  z-index: 2;
}
.home-eight .banner .banner-content h1 {
  width: 75%;
}
.home-eight .banner .banner-content .banner-booking .form-content-in {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.home-eight .banner .banner-content .banner-booking .form-content-in .form-group .nice-select, .home-eight .banner .banner-content .banner-booking .form-content-in .form-group input {
  background: transparent;
  border: none;
  height: 45px;
  color: #fff;
}
.home-eight .banner .banner-content .banner-booking .form-content-in .form-group .nice-select::after, .home-eight .banner .banner-content .banner-booking .form-content-in .form-group input::after {
  border-color: #fff;
  top: 55%;
  right: 5px;
}
.home-eight .banner .banner-content .banner-booking .form-content-in .form-group .nir-btn {
  box-shadow: none;
}
.home-eight .top-dscp .cards-container {
  display: flex;
  gap: 30px;
  flex-wrap: nowrap;
  justify-content: center;
  overflow-x: auto;
}
.home-eight .top-dscp .cards-container .card {
  position: relative;
  width: 180px;
  height: 350px;
  border-radius: 16px;
  overflow: hidden;
  color: white;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  transition: width 0.4s ease;
}
.home-eight .top-dscp .cards-container .card.card:hover {
  width: 280px;
}
.home-eight .top-dscp .cards-container .card .card-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  writing-mode: sideways-lr;
  text-orientation: upright;
  z-index: 1;
}
.home-eight .top-dscp .cards-container .card .card-content h4 {
  color: #ffd700;
  font-size: 15px;
}
.home-eight .top-dscp .cards-container .card .card-content h2 {
  font-size: 20px;
  margin-top: 5px;
  color: #fff;
}
.home-eight .top-dscp .cards-container .card .tour-badge {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: #00bfa5;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 14px;
  color: white;
  font-weight: bold;
}
.home-eight .about-us-tv {
  background-color: rgba(168, 131, 78, 0.15);
}
.home-eight .about-us-tv .about_us__ot .aa__img1 {
  border-radius: 25px;
  width: 55%;
}
.home-eight .about-us-tv .about_us__ot .aa__img2 {
  position: absolute;
  bottom: -40px;
  right: 8%;
  border: 15px solid #d8f0ef;
  border-radius: 50px;
  width: 30%;
}
.home-eight .about-us-tv .about_us__ot span {
  position: absolute;
  left: 7rem;
  top: 50px;
  writing-mode: sideways-lr;
  padding: 30px 10px;
  border-radius: 25px;
  background: #d8f0ef;
  color: #16232F;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 1px;
}
.home-eight .about-us-tv .about_us__ot .ap__icon {
  position: absolute;
  top: 0;
  left: -30px;
  width: 23rem;
  transform: rotate(232deg);
  z-index: -1;
}
.home-eight .about-us-tv .about_us__ot .ap__icon1 {
  position: absolute;
  bottom: 160px;
  right: 19px;
  width: 15rem;
  transform: rotate(-29deg);
  z-index: 0;
}
.home-eight .about-us-tv .about_us__ot .ap__icon2 {
  position: absolute;
  bottom: 130px;
  left: 0;
  width: 13rem;
  transform: rotate(-190deg);
  z-index: -1;
  animation: moveUpDn 6s infinite alternate ease-in-out;
}
.home-eight .dc__action {
  padding-bottom: 16rem;
}
.home-eight .dc__action .offer_banner_tw img {
  position: absolute;
  right: -5%;
  top: 10%;
  width: 45%;
  border-radius: 40px;
  border: 15px solid #fff;
  transform: rotate(20deg);
}
.home-eight .dc__action .offer_banner_tw img.offr_2 {
  bottom: 5%;
  top: inherit;
  right: 100px;
  width: 37%;
}
.home-eight .dc__action .ctb__bottom h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  font-size: 9.6rem;
  text-transform: uppercase;
  color: #fff;
  z-index: 1;
  opacity: 0.7;
  letter-spacing: 20px;
  text-shadow: 0 0 3px #e3e3e3;
}
.home-eight .dc__action .ctb__bottom img {
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  z-index: 2;
  height: 20%;
}

.offer_deals {
  background-color: rgba(168, 131, 78, 0.15);
}
.offer_deals .deal-section {
  color: #fff;
  overflow: hidden;
}
.offer_deals .deal-left {
  text-align: center;
  padding: 2rem;
}
.offer_deals .deal-left h1 {
  font-size: 7.2rem;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -10px;
}
.offer_deals .deal-left h1 span {
  font-size: 4rem;
}
.offer_deals .deal-left p {
  font-size: 1.7rem;
  font-family: "Inter", sans-serif;
}
.offer_deals .deal-left .timer {
  margin-top: 2rem;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}
.offer_deals .deal-left .timer .timer-box {
  background-color: #16a6a5;
  padding: 10px 15px;
  border-radius: 10px;
  min-width: 70px;
  color: #fff;
}
.offer_deals .deal-left .timer .timer-box strong {
  display: block;
  font-size: 1.275rem;
}
.offer_deals .deal-right {
  background: #fff;
  padding: 4rem;
}
.offer_deals .deal-right .deal-title h2 {
  font-weight: bold;
  margin-top: 5px;
}
.offer_deals .deal-right .card-deal {
  background: #fff;
  overflow: hidden;
  color: #000;
}
.offer_deals .deal-right .card-deal img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.offer_deals .deal-right .card-deal .card-body-deal {
  padding-top: 1rem;
}
.offer_deals .deal-right .card-deal .card-body-deal .rating {
  border: 1px solid #eee;
  border-radius: 20px;
  font-size: 0.8rem;
  padding: 2px 10px;
  display: inline-block;
}
.offer_deals .deal-right .promo-slider.slick_arrows .slick-prev, .offer_deals .deal-right .promo-slider.slick_arrows .slick-next {
  top: -4rem;
}
.offer_deals .deal-right .promo-slider.slick_arrows .slick-prev {
  left: inherit;
  right: 5rem;
}
.offer_deals .deal-right .promo-slider.slick_arrows .slick-next {
  right: 1rem;
}

.faq-section .faq-header {
  font-size: 2rem;
  font-weight: bold;
}
.faq-section .faq-accordion .accordion-button {
  font-weight: 600;
  border: 1px solid #eee;
  border-radius: 10px;
}
.faq-section .faq-accordion .accordion-button:not(.collapsed) {
  background-color: #C9A971;
  color: #16232F;
}
.faq-section .faq-accordion .accordion-button:focus, .faq-section .faq-accordion .accordion-button:active {
  border-color: transparent;
  box-shadow: none;
}
.faq-section .faq-accordion .accordion-item {
  border: none;
  border-radius: 0.5rem;
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.faq-section .tag-card {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 1rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.faq-section .stacked-img {
  position: absolute;
  bottom: -2rem;
  left: 3rem;
  border-radius: 1rem;
  border: 10px solid #fff;
}

.offer-banner {
  border-radius: 1rem;
  overflow: hidden;
  background-color: #1a1a1a;
  color: white;
}
.offer-banner .offer-text {
  padding: 2rem;
}
.offer-banner .btn-orange {
  background-color: #f97316;
  color: white;
  border: none;
  border-radius: 30px;
  padding: 0.6rem 1.5rem;
  font-weight: 600;
}
.offer-banner .btn-orange:hover {
  background-color: #ea580c;
}
.offer-banner .bg-map {
  background-image: url("../images/testimonial.png");
  background-size: cover;
  background-position: center;
}

.why-choose-us {
  background-position: center;
  background-size: 40%;
  background-repeat: no-repeat;
  position: relative;
}
.why-choose-us .feature-box {
  position: relative;
  background: #fafafa;
  border-radius: 20px;
  box-shadow: 0 2px 16px #eee;
  margin: 0 35px;
}
.why-choose-us .feature-box.fbox-one {
  right: -45px;
}
.why-choose-us .feature-box.fbox-three {
  left: -45px;
}

@media (max-width: 1199.98px) {
  .home-thh .form-main .form-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  .home-thh .slicknav_btn.slicknav_open:before, .home-thh .slicknav_btn.slicknav_collapsed:before, .home-thh .headerstye-1 .navbar-sticky-in .slicknav_btn.slicknav_open:before, .home-thh .headerstye-1 .navbar-sticky-in .slicknav_btn.slicknav_collapsed:before {
    color: #fff !important;
  }
  .home-thh .banner .banner-main {
    height: 80vh;
  }
  .home-thh .banner .banner-main .banner-content {
    width: 75%;
  }
  .why-choose-us .feature-box {
    margin: 0;
  }
  .why-choose-us .feature-box.fbox-one, .why-choose-us .feature-box.fbox-three {
    right: 0;
    left: 0;
  }
  .why-choose-us .traveler-img {
    width: 100% !important;
  }
}
@media (max-width: 991.98px) {
  .home-eight .header_menu .navbar-flex .navbar-collapse1 .nir-btn {
    display: none;
  }
  .home-eight .banner .banner-content {
    left: 12%;
    width: 70%;
  }
  .home-eight .banner .banner-content .banner-booking .form-content-in {
    flex-wrap: wrap;
    justify-content: start !important;
  }
  .home-eight .banner .banner-content .banner-booking .form-content-in .form-group {
    width: -moz-max-content;
    width: max-content;
  }
  .home-eight .about-us-tv .about_us__ot span {
    left: 8rem;
  }
  .home-eight .dc__action .ctb__bottom h2 {
    bottom: 10px;
    font-size: 6.4rem;
    letter-spacing: 10px;
  }
  .home-eight .offer_deals .deal-right {
    padding-bottom: 0;
  }
  .why-choose-us .feature-box {
    flex-direction: column !important;
  }
  .why-choose-us .feature-box div {
    text-align: center;
  }
  .why-choose-us .feature-box div h5 {
    margin-bottom: 10px;
  }
  .home-thh .banner .banner-main {
    height: 100%;
  }
  .home-thh .banner .banner-main .banner-booking {
    display: none;
  }
}
@media (max-width: 575.98px) {
  .offer_banner .content {
    width: 80%;
  }
  .home-thh .header_menu .navbar.navbar-default .navbar-header .navbar-brand img {
    display: block;
    width: 50%;
  }
  .home-thh .banner .banner-main .banner-content {
    top: 65%;
    width: 95%;
  }
  .home-thh .banner .banner-main .banner-content .entry-category a {
    font-size: 14px;
  }
  .home-thh .banner .banner-main .banner-content h1 {
    font-size: 15px;
  }
  .row.offer-banner {
    margin: 0 15px;
  }
  .row.offer-banner .offer-text {
    padding: 20px 0;
  }
  .home-eight .slicknav_nav {
    top: 72px;
  }
  .home-eight .banner {
    margin: 0 15px;
  }
  .home-eight .banner .banner-content {
    width: auto;
    left: 15px;
    right: 15px;
  }
  .home-eight .banner .banner-content h1 {
    width: 100%;
  }
  .home-eight .about-us-tv .about_us__ot .ap__icon {
    width: 18rem;
    transform: rotate(255deg);
  }
  .home-eight .about-us-tv .about_us__ot .ap__icon1 {
    right: -50px;
  }
  .home-eight .about-us-tv .about_us__ot .aa__img1 {
    width: 75%;
  }
  .home-eight .about-us-tv .about_us__ot .aa__img2 {
    width: 50%;
  }
  .home-eight .about-us-tv .about_us__ot span {
    left: 1rem;
  }
  .home-eight .discount-action .call-banner .call-button {
    top: 10px;
  }
  .home-eight .dc__action {
    overflow: hidden !important;
    margin: 0 15px 4.5rem !important;
  }
  .home-eight .dc__action .ctb__bottom h2 {
    font-size: 3.2rem;
    bottom: -10px;
  }
  .home-eight .dc__action .ctb__bottom img {
    height: 8%;
  }
  .home-eight .offer_deals .deal-right {
    padding-left: 15px;
    padding-right: 15px;
  }
  .home-eight .why-choose-us {
    background-size: contain;
  }
  .home-eight .why-choose-us .col-md-4 .gap-5 {
    gap: 30px !important;
  }
  .home-eight .why-choose-us .feature-box {
    margin-top: 0 !important;
  }
  .home-eight .why-choose-us .feature-box.fbox-one, .home-eight .why-choose-us .feature-box.fbox-three {
    margin-bottom: 0 !important;
  }
  .home-eight .why-choose-us .traveler-img {
    width: 70% !important;
    padding: 15px 0;
  }
  .home-eight .faq-section .img-fluid {
    margin-right: 15px;
  }
  .home-eight .faq-section .stacked-img {
    width: 35% !important;
  }
}

/*-----------------------------------------------------------------------------------*/
/*  PREMIUM HEADER NAVIGATION                                                         */
/*-----------------------------------------------------------------------------------*/

/* --- Top level links: refined typography --- */
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav li a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.1px;
  color: #16232F;
  padding: 12px 14px;
  position: relative;
}

/* --- Sliding underline on hover --- */
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a::before {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: #A8834E;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li:hover > a::before,
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.active > a::before {
  transform: scaleX(1);
}

/* --- Caret rotates open --- */
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.submenu > a i.icon-arrow-down {
  display: inline-block;
  font-size: 10px;
  margin-left: 4px;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.submenu:hover > a i.icon-arrow-down {
  transform: rotate(180deg);
}

/* --- Tighter spacing on mid-size screens so nothing wraps --- */
@media (max-width: 1199px) and (min-width: 992px) {
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav li a {
    font-size: 12px;
    letter-spacing: 0.4px;
    padding: 10px 8px;
  }
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a::before {
    left: 8px;
    right: 8px;
  }
}

/* --- Dropdown panel: floating card --- */
@media (min-width: 992px) {
  .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu {
    top: calc(100% + 12px);
    min-width: 215px;
    padding: 8px;
    background: #fff;
    border: 1px solid rgba(22, 35, 47, 0.07);
    border-radius: 14px;
    box-shadow: 0 20px 45px -15px rgba(22, 35, 47, 0.3), 0 6px 14px rgba(22, 35, 47, 0.05);
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.3s;
  }
  .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu:hover .dropdown-menu {
    transform: translateY(0);
  }
  /* invisible bridge keeps hover alive across the gap */
  .header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu:before {
    content: "";
    position: absolute;
    top: -12px;
    left: 0;
    right: 0;
    width: auto;
    height: 12px;
    border: none;
    background: transparent;
    opacity: 1;
  }
}

/* --- Dropdown items --- */
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li {
  border-bottom: none;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a {
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 1.5;
  color: #55627a;
  border-radius: 9px;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a:hover {
  background: rgba(168, 131, 78, 0.09);
  color: #16232F;
  padding-left: 20px;
}

/*-----------------------------------------------------------------------------------*/
/*  PREMIUM HEADER: TOP BAR, BUTTON, SURFACE                                          */
/*-----------------------------------------------------------------------------------*/

/* --- Top utility bar: deep navy, quieter type --- */
.main_header_area .header-content.bg-theme {
  background: #16232F !important;
}
.main_header_area .header-content a,
.main_header_area .header-content i {
  font-size: 12px;
  letter-spacing: 0.4px;
}
.main_header_area .header-content a.white,
.main_header_area .header-content a.white i,
.main_header_area .header-content i.white {
  color: rgba(255, 255, 255, 0.72) !important;
  transition: color 0.25s ease;
}
.main_header_area .header-content a.white:hover,
.main_header_area .header-content a.white:hover i {
  color: #fff !important;
}
.main_header_area .header-content li {
  border-left-color: rgba(255, 255, 255, 0.16);
  padding: 0 14px;
}

/* --- Social icons: circular hover --- */
.main_header_area .header-content .links.float-right ul li {
  border-left: none;
  padding: 0 0 0 4px;
}
.main_header_area .header-content .links.float-right ul li a {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}
.main_header_area .header-content .links.float-right ul li a:hover {
  background: rgba(255, 255, 255, 0.14);
}

/* --- Navbar surface: hairline separation from banner --- */
.main_header_area .header_menu {
  background: #fff;
  border-bottom: 1px solid rgba(22, 35, 47, 0.07);
}

/* --- Enquire Now: solid navy, lifts on hover --- */
.main_header_area .register-login a.nir-btn {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 26px;
  border-radius: 8px;
  background: #16232F;
  box-shadow: 0 6px 18px -6px rgba(22, 35, 47, 0.55);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.main_header_area .register-login a.nir-btn::before {
  background: #A8834E;
}
.main_header_area .register-login a.nir-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -8px rgba(22, 35, 47, 0.6);
}

/*-----------------------------------------------------------------------------------*/
/*  PREMIUM HEADER: MENU ICONS                                                        */
/*-----------------------------------------------------------------------------------*/

/* flex keeps chip and label centred against each other */
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a {
  display: inline-flex;
  align-items: center;
}

/* --- Icon chip: soft tinted tile, fills solid on hover --- */
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav li a i.nav-ico {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-size: 12px;
  margin-right: 7px;
  color: #A8834E;
  background: rgba(168, 131, 78, 0.1);
  transition: color 0.3s ease, background 0.3s ease,
              transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li:hover > a i.nav-ico,
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li.active > a i.nav-ico {
  color: #fff;
  background: #A8834E;
  transform: translateY(-2px);
  box-shadow: 0 5px 12px -3px rgba(168, 131, 78, 0.55);
}

/* slightly tighter label padding now that chips take room */
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav li a {
  padding: 12px 11px;
}
.main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a::before {
  left: 11px;
  right: 11px;
}

/* --- Dropdown rows: icon before label, larger tile --- */
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a {
  justify-content: flex-start;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a i.nav-ico {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 9px;
  font-size: 14px;
  margin-right: 11px;
}
.header_menu .navbar.navbar-default .nav.navbar-nav li.submenu .dropdown-menu li a:hover i.nav-ico {
  color: #fff;
  background: #A8834E;
  box-shadow: 0 5px 12px -3px rgba(168, 131, 78, 0.55);
}

/* 1200-1399px: shrink chips and spacing so the row still fits */
@media (max-width: 1399px) and (min-width: 1200px) {
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav li a {
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 12px 7px;
  }
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav li a i.nav-ico {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    border-radius: 6px;
    font-size: 10px;
    margin-right: 5px;
  }
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a::before {
    left: 7px;
    right: 7px;
  }
}

/* below 1200px there is no room for chips in the top row - labels only */
@media (max-width: 1199px) and (min-width: 992px) {
  .main_header_area .header_menu .navbar.navbar-default .nav.navbar-nav > li > a i.nav-ico {
    display: none;
  }
}

/*-----------------------------------------------------------------------------------*/
/*  PREMIUM HERO: FIT / GIT / MICE / CORPORATE                                        */
/*  Selectors carry the full template path so they outrank the stock banner rules.    */
/*-----------------------------------------------------------------------------------*/

.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content {
  width: 62%;
  max-width: 800px;
}

/* gradient keeps the headline readable over any photo */
.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .dot-overlay {
  background: linear-gradient(180deg, rgba(12, 20, 29, 0.62) 0%, rgba(12, 20, 29, 0.4) 45%, rgba(12, 20, 29, 0.8) 100%);
  opacity: 1;
}

/* --- Eyebrow pill --- */
.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content .entry-category {
  display: inline-block;
  padding: 7px 20px;
  border-radius: 100px;
  background: rgba(168, 131, 78, 0.92);
  color: #fff;
  font-family: "Inter", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.2px;
  line-height: 1.7;
  text-transform: uppercase;
}

/* --- Headline: h1 on slide 1, h2 on the rest, identical styling ---
   Inter carries real weights, so headings use 700 here. */
.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content > h1,
.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content > h2 {
  font-family: "Inter", sans-serif;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.13;
  letter-spacing: -1.5px;
  color: #fff;
}

.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content p {
  font-family: "Inter", sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.9);
  max-width: 650px;
  margin-left: auto;
  margin-right: auto;
}

/* --- Call to action pair --- */
.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content .nir-btn,
.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content .hero-btn-ghost {
  font-family: "Inter", sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 15px 32px;
  border-radius: 8px;
}
.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content .hero-btn-ghost {
  display: inline-block;
  text-align: center;
  color: #fff;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content .hero-btn-ghost:hover {
  background: #fff;
  border-color: #fff;
  color: #16232F;
}

/* --- Pagination: active dot stretches into a pill --- */
.banner.hero-main .slider .swiper-pagination-bullet {
  width: 9px;
  height: 9px;
  background: rgba(255, 255, 255, 0.5);
  opacity: 1;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.banner.hero-main .slider .swiper-pagination-bullet-active {
  width: 30px;
  border-radius: 5px;
  background: #A8834E;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content {
    width: 88%;
  }
  .banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content > h1,
  .banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content > h2 {
    font-size: 32px;
  }
  .banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content p {
    font-size: 14px;
  }
}
@media (max-width: 575px) {
  .banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content > h1,
  .banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content > h2 {
    font-size: 24px;
  }
  /* stock CSS forces display:block !important below 400px - keep the pill a pill */
  .banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content .entry-category {
    display: inline-block !important;
    font-size: 10px;
    letter-spacing: 1.4px;
  }
  .banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content .nir-btn,
  .banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .swiper-content .hero-btn-ghost {
    padding: 13px 22px;
    font-size: 12px;
  }
}

/*-----------------------------------------------------------------------------------*/
/*  SECTION EYEBROW                                                                   */
/*  Small uppercase label above each section title. Two variants because the brand    */
/*  teal (#A8834E) only reaches 3.45:1 on white - too low for 12px text.              */
/*-----------------------------------------------------------------------------------*/

.section-eyebrow,
.section-eyebrow-light {
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  line-height: 1.6;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* on light backgrounds - darkened teal, 4.96:1 on white */
.section-eyebrow {
  color: #8A6A3D;
}

/* on dark backgrounds - the lighter teal, 5.77:1 on navy */
.section-eyebrow-light {
  color: #C9A971;
}

/*-----------------------------------------------------------------------------------*/
/*  TOP BAR MARQUEE                                                                   */
/*  CSS-only scroller. The track holds two identical copies of the item list, so       */
/*  translating it by exactly -50% loops seamlessly with no jump.                      */
/*-----------------------------------------------------------------------------------*/
/* strip height is set here now that the py-1 utility is off the markup */
.main_header_area .header-content {
  padding: 2px 0;
}


.main_header_area .header-content .topbar-marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  margin-right: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

.main_header_area .header-content .topbar-marquee-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: topbar-marquee-scroll 45s linear infinite;
}

@keyframes topbar-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* let people stop it to read an item */
.main_header_area .header-content .topbar-marquee:hover .topbar-marquee-track {
  animation-play-state: paused;
}

.main_header_area .header-content .tm-item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.4px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.95);
  white-space: nowrap;
}
.main_header_area .header-content .tm-item i {
  font-size: 12px;
  margin-right: 8px;
  color: #C9A971;
}

.main_header_area .header-content .tm-sep {
  display: inline-block;
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
  margin: 0 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
}

/* moving text can be a problem for some readers - honour the OS setting */
@media (prefers-reduced-motion: reduce) {
  .main_header_area .header-content .topbar-marquee-track {
    animation: none;
  }
}


/*-----------------------------------------------------------------------------------*/
/*  HERO MOTION BACKGROUND                                                            */
/*  Built from CSS gradients and SVG strokes - no video, no image, no extra request.   */
/*  Sits above .slide-image and below .dot-overlay by DOM order alone.                 */
/*-----------------------------------------------------------------------------------*/

.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .slide-motion {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(135deg, #0C151E 0%, #16232F 48%, #223444 100%);
}

/* --- Drifting colour fields --- */
.banner.hero-main .slide-motion .mo-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  transform: translateZ(0);
}
.banner.hero-main .slide-motion .mo-blob-a {
  width: 46vw;
  height: 46vw;
  background: #A8834E;
  top: -14%;
  left: -8%;
  animation: mo-drift-a 26s ease-in-out infinite alternate;
}
.banner.hero-main .slide-motion .mo-blob-b {
  width: 40vw;
  height: 40vw;
  background: #2B4256;
  bottom: -18%;
  right: -6%;
  animation: mo-drift-b 34s ease-in-out infinite alternate;
}

@keyframes mo-drift-a {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(12%, 10%, 0) scale(1.18); }
}
@keyframes mo-drift-b {
  from { transform: translate3d(0, 0, 0) scale(1.12); }
  to   { transform: translate3d(-14%, -8%, 0) scale(1); }
}

/* --- Line motifs --- */
.banner.hero-main .slide-motion .mo-motif {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.banner.hero-main .slide-motion .mo-line {
  fill: none;
  stroke: rgba(255, 255, 255, 0.22);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 14 12;
  animation: mo-flow 3.4s linear infinite;
}
/* offset equals one dash + one gap, so the loop has no visible seam */
@keyframes mo-flow {
  to { stroke-dashoffset: -26; }
}
.banner.hero-main .slide-motion .mo-line-2 { animation-delay: -1.1s; stroke: rgba(255, 255, 255, 0.16); }
.banner.hero-main .slide-motion .mo-line-3 { animation-delay: -2.2s; stroke: rgba(255, 255, 255, 0.12); }
.banner.hero-main .slide-motion .mo-line-4 { animation-delay: -0.6s; stroke: rgba(255, 255, 255, 0.09); }

/* --- MICE rings pulse outward instead of flowing --- */
.banner.hero-main .slide-motion .mo-ring {
  fill: none;
  stroke: rgba(255, 255, 255, 0.28);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  animation: mo-pulse 7s ease-out infinite;
}
.banner.hero-main .slide-motion .mo-ring-2 { animation-delay: -2.33s; }
.banner.hero-main .slide-motion .mo-ring-3 { animation-delay: -4.66s; }

@keyframes mo-pulse {
  0%   { transform: scale(0.35); opacity: 0; }
  18%  { opacity: 0.5; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* --- Per-vertical variation, all inside the brand palette --- */
.banner.hero-main .mo-git .mo-blob-a  { left: auto; right: -10%; background: #2B4256; }
.banner.hero-main .mo-git .mo-blob-b  { right: auto; left: -10%; background: #A8834E; }
.banner.hero-main .mo-mice .mo-blob-a { top: 20%; left: 26%; width: 38vw; height: 38vw; }
.banner.hero-main .mo-mice .mo-blob-b { bottom: -24%; right: 30%; }
.banner.hero-main .mo-corp .mo-blob-a { background: #2B4256; }
.banner.hero-main .mo-corp .mo-blob-b { background: #1E2E3C; }

/* --- Only the slide on screen animates. Eight blurred layers running at
       once is wasted GPU work, and Swiper already tags the live slide. --- */
.banner.hero-main .swiper-slide .mo-blob,
.banner.hero-main .swiper-slide .mo-line,
.banner.hero-main .swiper-slide .mo-ring {
  animation-play-state: paused;
}
.banner.hero-main .swiper-slide-active .mo-blob,
.banner.hero-main .swiper-slide-active .mo-line,
.banner.hero-main .swiper-slide-active .mo-ring {
  animation-play-state: running;
}
.banner.hero-main .swiper-slide-active .mo-blob {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .banner.hero-main .swiper-slide-active .mo-blob,
  .banner.hero-main .swiper-slide-active .mo-line,
  .banner.hero-main .swiper-slide-active .mo-ring {
    animation: none;
  }
}

/* ==========================================================
   Typography scale-down (Plannex Journeys)
   Bootstrap .fs-* utilities carry !important, so the text-heavy
   ones are re-declared here to match the reduced heading scale.
   .fs-2/.fs-3/.fs-4 are left at Bootstrap defaults - in this build
   they are used almost entirely to size icons, not text.
   ========================================================== */
.fs-1 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem) !important;
}

.fs-5 {
  font-size: 1.125rem !important;
}

.fs-6 {
  font-size: 0.9375rem !important;
}

/* ==========================================================
   Typography scale-down (Plannex Journeys)
   Bootstrap .fs-* utilities carry !important, so the text-heavy
   ones are re-declared here to match the reduced heading scale.
   .fs-2/.fs-3/.fs-4 stay at Bootstrap defaults - in this build
   they are used almost entirely to size icons, not text.
   ========================================================== */
.fs-1 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem) !important;
}

.fs-5 {
  font-size: 1.125rem !important;
}

.fs-6 {
  font-size: 0.9375rem !important;
}

/* Compact CTA - for links that sit under body copy rather than
   leading a section (e.g. the About Us block on the homepage) */
.nir-btn-sm {
  font-size: 13px;
  padding: 10px 18px;
  border-radius: 8px;
}
.nir-btn-sm i {
  font-size: 11px;
  margin-left: 6px;
  vertical-align: middle;
  transition: transform ease-in-out 0.3s;
  display: inline-block;
}
.nir-btn-sm:hover i {
  transform: translateX(3px);
}

/* ==========================================================
   Core Expertise - four flip panels (FIT / GIT / MICE / Corporate)
   Front is the image, back carries the copy. Hover turns the panel
   over on its vertical axis. Touch devices cannot hover, so there the
   flip is switched off and the back becomes a gradient overlay on the
   image instead - otherwise phone users get four unlabelled pictures.
   ========================================================== */
.core-expertise {
  background: #fff;
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.expertise-card {
  position: relative;
  display: block;
  height: 300px;
  perspective: 1400px;
  text-decoration: none !important;
  transition: opacity 0.4s ease;
}

.expertise-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.expertise-face {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-radius: 14px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.expertise-front {
  background-color: #d9dee3;
  background-size: cover;
  background-position: center;
  box-shadow: 0 10px 26px -16px rgba(22, 35, 47, 0.5);
}

/* The name has to sit on the front too - without it the resting card is an
   unlabelled photo and nobody knows which of the four they are looking at. */
.expertise-front-label {
  position: absolute;
  right: 22px;
  bottom: 20px;
  left: 22px;
  z-index: 2;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.expertise-front-label::after {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  margin-top: 9px;
  background: #C9A971;
}

/* Shade at the foot of the panel: it ties the four together and, now that the
   name sits on the front, gives that name something to be legible against. */
.expertise-front::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(12, 20, 29, 0.88) 0%, rgba(13, 22, 32, 0.5) 26%, rgba(22, 35, 47, 0.12) 58%, rgba(22, 35, 47, 0) 100%);
}

.expertise-back {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px 22px;
  background: linear-gradient(155deg, #1B2A38 0%, #16232F 48%, #01294c 100%);
  border-top: 3px solid #C9A971;
  transform: rotateY(180deg);
  box-shadow: 0 18px 40px -18px rgba(22, 35, 47, 0.6);
}

/* faint compass ring in the corner so the back is not a plain block */
.expertise-back::after {
  content: "";
  position: absolute;
  right: -50px;
  bottom: -50px;
  width: 140px;
  height: 140px;
  border: 1px solid rgba(201, 169, 113, 0.28);
  border-radius: 50%;
}

.expertise-body {
  position: relative;
  z-index: 1;
}

.expertise-code {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A971;
}
.expertise-code::after {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  margin-top: 9px;
  background: #C9A971;
}

.expertise-title {
  margin: 0 0 9px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
}

.expertise-text {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}

.expertise-cta {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.expertise-cta i {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  vertical-align: middle;
  transition: transform 0.35s ease;
}

/* --- turned state (hover + keyboard focus) --- */
.expertise-card:hover .expertise-inner,
.expertise-card:focus-visible .expertise-inner {
  transform: rotateY(180deg);
}
.expertise-card:hover .expertise-cta i {
  transform: translateX(5px);
}
.expertise-card:focus-visible {
  outline: 3px solid #C9A971;
  outline-offset: 4px;
  border-radius: 14px;
}

/* the panel you are on stays lit, the other three step back */
.expertise-grid:hover .expertise-card:not(:hover) {
  opacity: 0.6;
}

@media (max-width: 1199px) {
  .expertise-card {
    height: 280px;
  }
  .expertise-title {
    font-size: 16px;
  }
  .expertise-back {
    padding: 20px 18px;
  }
}

@media (max-width: 991px) {
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .expertise-card {
    height: 300px;
  }
}

@media (max-width: 575px) {
  .expertise-grid {
    grid-template-columns: 1fr;
  }
  .expertise-card {
    height: 260px;
  }
}

/* No hover on touch: stop flipping and lay the copy over the image. */
@media (hover: none) {
  .expertise-inner {
    transform: none !important;
  }
  .expertise-face {
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
  }
  .expertise-back {
    justify-content: flex-end;
    background: linear-gradient(to top, rgba(22, 35, 47, 0.95) 0%, rgba(22, 35, 47, 0.78) 42%, rgba(22, 35, 47, 0.1) 82%, rgba(22, 35, 47, 0) 100%);
    border-top: 0;
    transform: none;
    box-shadow: none;
  }
  .expertise-back::after {
    display: none;
  }
  .expertise-grid:hover .expertise-card:not(:hover) {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .expertise-inner,
  .expertise-cta i {
    transition-duration: 0.01ms;
  }
}

/* ==========================================================
   Contact page - hero, enquiry form, aside and map
   ========================================================== */

/* --- hero --- */
.contact-hero {
  position: relative;
  padding: 85px 0 85px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.contact-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  /* The banner artwork is already dark, so this only deepens the left half
     far enough for the headline to sit on clean ground. */
  background: linear-gradient(100deg, rgba(11, 18, 26, 0.9) 0%, rgba(12, 20, 29, 0.66) 38%, rgba(13, 22, 32, 0.18) 72%, rgba(13, 22, 32, 0) 100%);
}
.contact-hero .container {
  position: relative;
  z-index: 2;
}
.contact-hero .dot-overlay {
  z-index: 1;
}
.contact-hero .breadcrumb {
  margin-bottom: 16px;
  padding: 0;
  background: none;
}
.contact-hero .breadcrumb li,
.contact-hero .breadcrumb li a {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}
.contact-hero .breadcrumb li a:hover {
  color: #C9A971;
}
.contact-hero h1 {
  color: #fff;
  max-width: 15ch;
}
.contact-hero p {
  max-width: 60ch;
  color: rgba(255, 255, 255, 0.85);
  font-size: 15px;
  line-height: 1.7;
}

.hero-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 40px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
}
.hero-pill i {
  margin-right: 8px;
  color: #C9A971;
  font-size: 14px;
}

/* --- quick contact card in the hero --- */
.quick-contact-card {
  padding: 30px 28px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 60px -30px rgba(13, 22, 32, 0.7);
}
.qc-title {
  margin-bottom: 4px;
  font-size: 20px;
}
.contact-hero .qc-sub {
  margin-bottom: 20px;
  font-size: 13px;
  color: #777;
}
.qc-list {
  margin-bottom: 22px;
}
.qc-list li {
  display: flex;
  align-items: flex-start;
  padding: 13px 0;
  border-bottom: 1px solid #EFE9E0;
}
.qc-list li:first-child {
  padding-top: 0;
}
.qc-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.qc-ico {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  margin-right: 14px;
  border-radius: 10px;
  background: rgba(168, 131, 78, 0.1);
  color: #A8834E;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qc-body {
  display: block;
  padding-top: 2px;
}
.qc-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9A9188;
}
.qc-value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #16232F;
  text-decoration: none;
}
a.qc-value:hover {
  color: #A8834E;
}

/* --- enquiry layout --- */
.enquiry-main {
  background: #f6f8fa;
}
.enquiry-card {
  padding: 34px 34px 30px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 50px -34px rgba(22, 35, 47, 0.5);
}
.enquiry-head {
  padding-bottom: 22px;
  margin-bottom: 6px;
  border-bottom: 1px solid #EFE9E0;
}
.enquiry-head p {
  font-size: 14px;
  color: #777;
}

.enq-block {
  padding: 26px 0;
  border-bottom: 1px dashed #e3e8ed;
}
.enq-block-last,
.enq-block:last-of-type {
  border-bottom: 0;
  padding-bottom: 6px;
}
.enq-step {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 11px;
  border-radius: 30px;
  background: rgba(168, 131, 78, 0.1);
  color: #A8834E;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.enq-legend {
  margin-bottom: 18px;
  font-size: 19px;
  color: #16232F;
}

/* hidden branches: display none plus the fieldset is disabled in JS, so they
   are skipped by validation and left out of the POST */
.enq-conditional {
  display: none;
  min-width: 0;
  border: 0;
  padding: 26px 0;
  margin: 0;
}
.enq-conditional.is-active {
  display: block;
}

/* --- travel type selector --- */
.travel-type {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.tt-option {
  margin: 0;
  cursor: pointer;
}
.tt-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.tt-inner {
  display: block;
  height: 100%;
  padding: 18px 16px;
  border: 1px solid #E2D9CD;
  border-radius: 12px;
  background: #fff;
  text-align: left;
  transition: all ease-in-out 0.25s;
}
.tt-inner i {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
  color: #A8834E;
  transition: color ease-in-out 0.25s;
}
.tt-code {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 700;
  color: #16232F;
}
.tt-label {
  display: block;
  font-size: 12px;
  line-height: 1.45;
  color: #8B8179;
}
.tt-option:hover .tt-inner {
  border-color: #C9A971;
  transform: translateY(-2px);
}
.tt-option input:checked + .tt-inner {
  border-color: #A8834E;
  background: #16232F;
  box-shadow: 0 14px 26px -16px rgba(22, 35, 47, 0.75);
}
.tt-option input:checked + .tt-inner i,
.tt-option input:checked + .tt-inner .tt-code {
  color: #fff;
}
.tt-option input:checked + .tt-inner .tt-label {
  color: rgba(255, 255, 255, 0.7);
}
.tt-option input:focus-visible + .tt-inner {
  outline: 3px solid #C9A971;
  outline-offset: 2px;
}

/* --- fields --- */
.enq-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #4A443F;
}
.enq-label .req {
  color: #d9534f;
}
.enquiry-card .form-control,
.enquiry-card .form-select {
  height: auto;
  padding: 11px 14px;
  border: 1px solid #E2D9CD;
  border-radius: 10px;
  background-color: #FCFAF6;
  font-size: 14px;
  color: #333;
  box-shadow: none;
  transition: border-color ease-in-out 0.2s, background-color ease-in-out 0.2s;
}
.enquiry-card textarea.form-control {
  height: auto;
  min-height: 120px;
}
.enquiry-card .form-control::placeholder {
  color: #ABA298;
}
.enquiry-card .form-control:focus,
.enquiry-card .form-select:focus {
  border-color: #A8834E;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(168, 131, 78, 0.12);
}

/* --- checkbox pills --- */
.checkgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 2px;
}
.chk {
  margin: 0;
  cursor: pointer;
}
.chk input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.chk span {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid #E2D9CD;
  border-radius: 30px;
  background: #FCFAF6;
  font-size: 13px;
  color: #55504B;
  transition: all ease-in-out 0.2s;
}
.chk:hover span {
  border-color: #C9A971;
  color: #A8834E;
}
.chk input:checked + span {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff;
}
.chk input:focus-visible + span {
  outline: 3px solid #C9A971;
  outline-offset: 2px;
}

.chk-consent {
  display: flex;
  align-items: flex-start;
}
.chk-consent input {
  position: static;
  opacity: 1;
  width: 17px;
  height: 17px;
  margin: 2px 10px 0 0;
  flex: 0 0 17px;
  accent-color: #A8834E;
}
.chk-consent span {
  padding: 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-size: 13.5px;
  color: #55504B;
}
.chk-consent:hover span {
  border: 0;
  color: #55504B;
}

.enq-submit {
  border: none;
  cursor: pointer;
}
.enq-submit i {
  margin-left: 8px;
  font-size: 11px;
  vertical-align: middle;
}
.enq-note {
  margin-top: 12px;
  font-size: 12.5px;
  color: #9A9188;
}
.enq-msg:not(:empty) {
  margin-bottom: 16px;
}
.enq-msg .alert-success,
.enq-msg .alert-error {
  padding: 16px 18px;
  border-radius: 10px;
  font-size: 14px;
}
.enq-msg .alert-success {
  border: 1px solid rgba(168, 131, 78, 0.35);
  background: rgba(168, 131, 78, 0.08);
  color: #0f6f6c;
}
.enq-msg .alert-success h4 {
  margin-bottom: 4px;
  font-size: 16px;
  color: #0f6f6c;
}
.enq-msg .alert-error {
  border: 1px solid rgba(217, 83, 79, 0.35);
  background: rgba(217, 83, 79, 0.07);
  color: #b4433f;
}

/* --- aside --- */
.aside-card {
  padding: 26px 24px;
  margin-bottom: 22px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 50px -34px rgba(22, 35, 47, 0.5);
}
.aside-title {
  margin-bottom: 4px;
  font-size: 18px;
  color: #16232F;
}
.aside-sub {
  margin-bottom: 16px;
  font-size: 13px;
  color: #8B8179;
}
.aside-card .aside-title + .next-steps,
.aside-card .aside-title + .desk-list,
.aside-card .aside-title + .hours-list {
  margin-top: 16px;
}

.next-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.next-steps li {
  display: flex;
  align-items: flex-start;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid #EFE9E0;
}
.next-steps li:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: 0;
}
.ns-num {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  margin-right: 14px;
  border-radius: 50%;
  background: #16232F;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ns-body {
  display: block;
  font-size: 13px;
  line-height: 1.6;
  color: #7D746C;
}
.ns-body strong {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  color: #16232F;
}

.desk-list li {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #EFE9E0;
}
.desk-list li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}
.desk-ico {
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
  margin-right: 13px;
  border-radius: 10px;
  background: rgba(22, 35, 47, 0.07);
  color: #16232F;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.desk-body {
  display: block;
  min-width: 0;
}
.desk-name {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #16232F;
}
.desk-tag {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(168, 131, 78, 0.1);
  color: #A8834E;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: middle;
}
.desk-body a {
  font-size: 12.5px;
  color: #8B8179;
  text-decoration: none;
  word-break: break-all;
}
.desk-body a:hover {
  color: #A8834E;
}

.aside-card-dark {
  background: linear-gradient(155deg, #1B2A38 0%, #16232F 55%, #01294c 100%);
}
.aside-card-dark .aside-title {
  color: #fff;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.78);
}
.hours-list li span:last-child {
  color: #fff;
  font-weight: 600;
}
.hours-list li:last-child {
  border-bottom: 0;
}
.hours-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.hours-note i {
  margin-right: 7px;
  color: #C9A971;
}

/* --- map --- */
.contact-map-main {
  padding: 80px 0 0;
  background: #fff;
}
.map-wrap {
  position: relative;
}
.map-frame {
  line-height: 0;
  filter: grayscale(0.25);
}
.map-frame iframe {
  width: 100%;
  height: 520px;
  border: 0;
}
.map-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.map-card {
  width: 360px;
  max-width: 100%;
  padding: 30px 28px;
  border-radius: 16px;
  border-top: 3px solid #C9A971;
  background: #fff;
  box-shadow: 0 30px 60px -28px rgba(13, 22, 32, 0.55);
  pointer-events: auto;
}
.map-eyebrow {
  display: block;
  margin-bottom: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #A8834E;
}
.map-title {
  margin-bottom: 18px;
  font-size: 20px;
}
.map-details {
  margin-bottom: 22px;
}
.map-details li {
  display: flex;
  align-items: flex-start;
  padding: 9px 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6E665F;
  border-bottom: 1px solid #EFE9E0;
}
.map-details li:last-child {
  border-bottom: 0;
}
.map-details li i {
  flex: 0 0 18px;
  margin-top: 3px;
  margin-right: 10px;
  color: #A8834E;
  font-size: 14px;
}
.map-details li a {
  color: #6E665F;
  text-decoration: none;
}
.map-details li a:hover {
  color: #A8834E;
}

/* --- responsive --- */
@media (max-width: 1199px) {
  .travel-type {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .contact-hero {
    padding: 70px 0 65px;
  }
  .contact-hero h1 {
    max-width: none;
  }
  .quick-contact-card {
    margin-top: 34px;
  }
  .enquiry-card {
    padding: 26px 22px 24px;
  }
  .map-container {
    position: static;
    display: block;
    padding-top: 0;
  }
  .map-card {
    width: 100%;
    margin: -60px auto 0;
    position: relative;
    z-index: 2;
  }
  .map-frame iframe {
    height: 420px;
  }
}

@media (max-width: 575px) {
  .contact-hero {
    padding: 55px 0 50px;
  }
  .travel-type {
    grid-template-columns: 1fr;
  }
  .enquiry-card {
    padding: 22px 18px 20px;
  }
  .hero-pill {
    font-size: 11.5px;
  }
}

/* ==========================================================
   Plannex date picker - drives js/plannex-datepicker.js
   ========================================================== */
.pj-date-wrap {
  position: relative;
}

.enquiry-card .form-control.pj-date {
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23149A96' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.pj-cal {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 40;
  display: none;
  width: 292px;
  padding: 14px;
  border: 1px solid #E2D9CD;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 24px 48px -20px rgba(22, 35, 47, 0.4);
}
.pj-cal.is-open {
  display: block;
}
/* flipped when the panel would run past the right edge of the screen */
.pj-cal.pj-flip {
  left: auto;
  right: 0;
}

.pj-cal-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
}
.pj-selects {
  display: flex;
  flex: 1;
  gap: 6px;
  min-width: 0;
}
.pj-cal select {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: 1px solid #E2D9CD;
  border-radius: 8px;
  background: #FCFAF6;
  font-size: 13px;
  font-weight: 600;
  color: #16232F;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23013A6B' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 22px;
}
.pj-cal select:focus {
  outline: none;
  border-color: #A8834E;
}
.pj-cal .pj-month {
  flex: 1.5;
}

.pj-nav {
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #E2D9CD;
  border-radius: 8px;
  background: #fff;
  color: #16232F;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: all ease-in-out 0.2s;
}
.pj-nav:hover {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff;
}

.pj-dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
}
.pj-dow span {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #9A9188;
}

.pj-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.pj-day {
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  font-size: 13px;
  color: #4A443F;
  cursor: pointer;
  transition: background ease-in-out 0.15s, color ease-in-out 0.15s;
}
.pj-day.pj-empty {
  cursor: default;
}
.pj-day:hover:not(:disabled):not(.pj-empty) {
  background: rgba(168, 131, 78, 0.12);
  color: #0f6f6c;
}
.pj-day:disabled {
  color: #cfd6dd;
  cursor: not-allowed;
}
.pj-day.is-today {
  box-shadow: inset 0 0 0 1px #C9A971;
  font-weight: 700;
}
.pj-day.is-between {
  background: rgba(168, 131, 78, 0.1);
  border-radius: 0;
}
.pj-day.is-selected,
.pj-day.is-selected:hover {
  background: #16232F;
  color: #fff;
  font-weight: 700;
  box-shadow: none;
}

.pj-cal-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #EFE9E0;
}
.pj-cal-foot button {
  padding: 0;
  border: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  color: #A8834E;
  cursor: pointer;
}
.pj-cal-foot .pj-clear {
  color: #9A9188;
}
.pj-cal-foot button:hover {
  text-decoration: underline;
}

@media (max-width: 575px) {
  .pj-cal {
    width: 100%;
    min-width: 264px;
  }
}

/* ==========================================================
   Destinations - region tabs over a snap carousel
   Travel Styles says how you want to travel; this says where.
   The rail is a native scroll-snap track: real swipe on touch,
   arrow-driven on desktop, and no carousel library to load.
   ========================================================== */
.destinations {
  background: #F8F5F0;
}

/* --- control bar --- */
.dest-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}

.dest-tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  /* the pills scroll rather than wrap, so the bar keeps its single-row shape */
  overflow-x: auto;
  padding: 2px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dest-tabs::-webkit-scrollbar {
  display: none;
}

/* Outlined pills: transparent at rest so they sit lightly on the section,
   with the selected region filled in so it is unmistakable. */
.dest-tab {
  flex: 0 0 auto;
  padding: 10px 21px;
  border: 1px solid #d7e0e8;
  border-radius: 30px;
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6E665F;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}
.dest-tab:hover {
  border-color: #C9A971;
  background: rgba(201, 169, 113, 0.09);
  color: #16232F;
}
.dest-tab.is-active {
  border-color: #16232F;
  background: #16232F;
  color: #fff;
  box-shadow: 0 10px 20px -12px rgba(22, 35, 47, 0.7);
}
.dest-tab:focus-visible {
  outline: 2px solid #C9A971;
  outline-offset: 2px;
}

.dest-nav {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}
.dest-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid #dde4ea;
  border-radius: 50%;
  background: #fff;
  color: #16232F;
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, opacity 0.3s ease;
}
.dest-arrow:hover:not(:disabled) {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff;
}
.dest-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}
.dest-arrow:focus-visible {
  outline: 2px solid #C9A971;
  outline-offset: 2px;
}

/* --- the rail --- */
.dest-panel[hidden] {
  display: none;
}
.dest-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* room for the lifted card shadow, which overflow would otherwise clip */
  padding: 4px 0 10px;
}
.dest-track::-webkit-scrollbar {
  display: none;
}

.dest-card {
  position: relative;
  flex: 0 0 calc((100% - 54px) / 4);
  height: 360px;
  scroll-snap-align: start;
  border-radius: 14px;
  overflow: hidden;
  background-color: #101A24;
  text-decoration: none !important;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dest-card:hover,
.dest-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 28px 46px -26px rgba(13, 22, 32, 0.55);
}
.dest-card:focus-visible {
  outline: 3px solid #C9A971;
  outline-offset: 3px;
}
/* hairline ring so cards keep an edge on the tinted section */
.dest-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.dest-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.97);
  transform: scale(1.004);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1), filter 520ms ease;
}
.dest-card:hover .dest-img,
.dest-card:focus-visible .dest-img {
  filter: saturate(1.06) brightness(1.03);
  transform: scale(1.06);
}

.dest-veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background: linear-gradient(to top, rgba(11, 18, 26, 0.94) 0%, rgba(12, 20, 29, 0.8) 30%, rgba(13, 22, 32, 0.36) 58%, rgba(13, 22, 32, 0.08) 82%, rgba(13, 22, 32, 0) 100%);
}
.dest-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  background: linear-gradient(to top, rgba(11, 18, 26, 0.96) 0%, rgba(12, 20, 29, 0.88) 40%, rgba(13, 22, 32, 0.56) 70%, rgba(13, 22, 32, 0.24) 100%);
  transition: opacity 420ms ease;
}
.dest-card:hover::after,
.dest-card:focus-visible::after {
  opacity: 1;
}

.dest-region {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.13);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
}

.dest-body {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dest-card:hover .dest-body,
.dest-card:focus-visible .dest-body {
  transform: translateY(-4px);
}

.dest-name {
  margin: 0 0 7px;
  font-size: 21px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
}
.dest-desc {
  /* two lines reserved so the CTA sits on one line across the rail */
  min-height: 40px;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
}

.dest-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.dest-cta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.45);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), background 420ms ease;
}
.dest-card:hover .dest-cta::after,
.dest-card:focus-visible .dest-cta::after {
  background: #C9A971;
  transform: scaleX(1);
}
.dest-cta i {
  margin-left: 9px;
  font-size: 10px;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.dest-card:hover .dest-cta i {
  transform: translateX(4px);
}

/* --- responsive --- */
@media (max-width: 1199px) {
  .dest-card {
    flex-basis: calc((100% - 36px) / 3);
    height: 345px;
  }
  .dest-name {
    font-size: 20px;
  }
}

@media (max-width: 991px) {
  .dest-card {
    flex-basis: calc((100% - 18px) / 2);
    height: 340px;
  }
}

@media (max-width: 767px) {
  /* a sliver of the next card showing is what tells a thumb it can swipe */
  .dest-card {
    flex-basis: 78%;
    height: 350px;
  }
  .dest-nav {
    display: none;
  }
  .dest-bar {
    margin-bottom: 20px;
  }
  .dest-tabs {
    gap: 8px;
  }
  .dest-tab {
    padding: 9px 16px;
    font-size: 11px;
  }
}

@media (max-width: 575px) {
  .dest-card {
    flex-basis: 84%;
  }
  .dest-name {
    font-size: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dest-track {
    scroll-behavior: auto;
  }
  .dest-card,
  .dest-card::after,
  .dest-img,
  .dest-body,
  .dest-cta::after,
  .dest-cta i,
  .dest-tab::after {
    transition-duration: 0.01ms;
  }
  .dest-card:hover,
  .dest-card:hover .dest-img {
    transform: none;
  }
}

/* ==========================================================
   Homepage sections 05-15
   ========================================================== */

/* shared quiet text CTA used under a few sections */
.link-cta {
  display: inline-flex;
  align-items: center;
  padding-bottom: 7px;
  position: relative;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #16232F;
  text-decoration: none !important;
  transition: color 0.3s ease;
}
.link-cta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: #D5CABA;
  transition: background 0.35s ease;
}
.link-cta i {
  margin-left: 10px;
  font-size: 10px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.link-cta:hover {
  color: #A8834E;
}
.link-cta:hover::after {
  background: #C9A971;
}
.link-cta:hover i {
  transform: translateX(4px);
}

.nir-btn-ghost {
  display: inline-block;
  padding: 14px 26px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 10px;
  font-size: 14px;
  color: #fff;
  text-decoration: none !important;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.nir-btn-ghost:hover {
  border-color: #fff;
  background: rgba(255, 255, 255, 0.12);
  color: #fff !important;
}

/* --- 05 brand strip --- */
.brand-strip {
  padding: 20px 0;
  border-top: 1px solid #EAE3D9;
  border-bottom: 1px solid #EAE3D9;
  background: #fff;
  overflow: hidden;
}
.bs-track {
  display: flex;
  width: max-content;
  /* slow, so it reads as a texture rather than a ticker demanding attention */
  animation: bs-scroll 46s linear infinite;
}
.brand-strip:hover .bs-track {
  animation-play-state: paused;
}
.bs-run {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}
.bs-item {
  padding: 0 26px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #9A9188;
  white-space: nowrap;
}
.bs-dot {
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #C9A971;
}
@keyframes bs-scroll {
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .bs-track {
    animation: none;
  }
}

/* --- 06 experiences --- */
.experiences {
  background: #fff;
}
.exp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  /* the offset cards hang below the row, so make room for them */
  padding-bottom: 44px;
}
.exp-card {
  position: relative;
  display: block;
  height: 440px;
  border-radius: 14px;
  overflow: hidden;
  background-color: #101A24;
  text-decoration: none !important;
  transition: transform 460ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 460ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* staggered baseline: an editorial rhythm rather than a flat row of four */
.exp-card:nth-child(even) {
  transform: translateY(44px);
}
.exp-card:hover,
.exp-card:focus-visible {
  box-shadow: 0 30px 50px -28px rgba(13, 22, 32, 0.6);
  transform: translateY(-5px);
}
.exp-card:nth-child(even):hover,
.exp-card:nth-child(even):focus-visible {
  transform: translateY(39px);
}
.exp-card:focus-visible {
  outline: 3px solid #C9A971;
  outline-offset: 3px;
}
.exp-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.004);
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.exp-card:hover .exp-img {
  transform: scale(1.06);
}
.exp-veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background: linear-gradient(to top, rgba(11, 18, 26, 0.92) 0%, rgba(12, 20, 29, 0.6) 34%, rgba(13, 22, 32, 0.16) 66%, rgba(13, 22, 32, 0) 100%);
}
.exp-body {
  position: absolute;
  right: 24px;
  bottom: 26px;
  left: 24px;
  z-index: 2;
}
.exp-place {
  display: block;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A971;
}
.exp-title {
  margin: 0;
  font-size: 23px;
  line-height: 1.2;
  font-weight: 700;
  color: #fff;
}

/* --- 07 signature journeys --- */
.journeys {
  background: #F8F5F0;
}
.jr-note {
  margin-top: 6px;
  font-size: 12px;
  color: #9A9188;
}

/* --- 08 why us --- */
.why-travel {
  background: #fff;
}
.wt-intro {
  padding-right: 10px;
}
.wt-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #EFE9E0;
}
.wt-list li {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 24px 4px;
  border-bottom: 1px solid #EFE9E0;
  transition: padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.wt-list li:hover {
  padding-left: 12px;
}
.wt-num {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #C9A971;
}
.wt-body {
  flex: 1;
}
.wt-title {
  margin: 0 0 4px;
  font-size: 22px;
  line-height: 1.25;
  color: #16232F;
}
.wt-text {
  margin: 0;
  font-size: 14px;
  color: #7D746C;
}

/* --- 09 process --- */
.process {
  background: #F8F5F0;
}
.pr-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pr-step {
  position: relative;
  padding-top: 40px;
}
/* the connecting rail is drawn once, behind every marker */
.pr-step::before {
  content: "";
  position: absolute;
  top: 8px;
  right: -22px;
  left: 0;
  height: 1px;
  background: #dbe3ea;
}
.pr-step:last-child::before {
  right: 0;
}
.pr-marker {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border: 1px solid #cfdae3;
  border-radius: 50%;
  background: #F8F5F0;
}
.pr-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #cfdae3;
  transition: background 0.4s ease, transform 0.4s ease;
}
.pr-step.is-in .pr-marker {
  border-color: #C9A971;
}
.pr-step.is-in .pr-dot {
  background: #A8834E;
  transform: scale(1.15);
}
.pr-num {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #C9A971;
}
.pr-title {
  margin: 0 0 7px;
  font-size: 19px;
  color: #16232F;
}
.pr-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #7D746C;
}
/* revealed by js/home.js as the row scrolls in */
.pr-step {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.pr-step.is-in {
  opacity: 1;
  transform: none;
}
.no-js .pr-step,
.pr-steps.is-ready .pr-step {
  opacity: 1;
  transform: none;
}

/* --- 10 mice showcase --- */
.mice-show {
  padding: 0 0 10px;
  background: #fff;
}
.ms-inner {
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(140deg, #1B2A38 0%, #16232F 46%, #0D1620 100%);
}
.ms-content {
  padding: 54px 48px;
}
.ms-content h2 {
  color: #fff;
  font-size: 34px;
  line-height: 1.18;
}
.ms-accent {
  color: #C9A971;
}
.ms-content p {
  max-width: 52ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}
.ms-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 26px;
  padding: 0;
  list-style: none;
}
.ms-tags li {
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 30px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.ms-link {
  display: inline-flex;
  align-items: center;
  margin-left: 22px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
  text-decoration: none !important;
  transition: color 0.3s ease;
}
.ms-link i {
  margin-left: 8px;
  font-size: 10px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ms-link:hover {
  color: #C9A971 !important;
}
.ms-link:hover i {
  transform: translateX(4px);
}
.ms-media {
  height: 100%;
  min-height: 420px;
}
.ms-media img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

/* --- 11 stats --- */
.stats {
  background: #fff;
}
.st-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  border: 1px solid #EAE3D9;
  border-radius: 16px;
  overflow: hidden;
  background: #FCFAF6;
}
.st-item {
  padding: 32px 20px;
  text-align: center;
  border-right: 1px solid #EAE3D9;
}
.st-item:last-child {
  border-right: 0;
}
.st-num {
  display: block;
  margin-bottom: 5px;
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  color: #16232F;
  letter-spacing: -0.02em;
}
.st-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8B8179;
}

/* --- 12 testimonials --- */
.voices {
  background: #F8F5F0;
}
.vc-rail {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.vc-card {
  margin: 0;
  padding: 30px 28px;
  border: 1px solid #EAE3D9;
  border-radius: 16px;
  background: #fff;
}
.vc-stars {
  display: block;
  margin-bottom: 14px;
  font-size: 12px;
  color: #F5A623;
  letter-spacing: 2px;
}
.vc-quote {
  margin: 0 0 20px;
  font-size: 15px;
  line-height: 1.7;
  color: #4A443F;
}
.vc-by {
  padding-top: 16px;
  border-top: 1px solid #EFE9E0;
}
.vc-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #16232F;
}
.vc-meta {
  display: block;
  font-size: 12.5px;
  color: #9A9188;
}

/* --- 13 journal --- */
.journal {
  background: #fff;
}
.jn-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.jn-card {
  display: block;
  text-decoration: none !important;
}
.jn-media {
  display: block;
  height: 230px;
  margin-bottom: 16px;
  border-radius: 14px;
  overflow: hidden;
}
.jn-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.004);
  transition: transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.jn-card:hover .jn-media img {
  transform: scale(1.06);
}
.jn-body {
  display: block;
  position: relative;
  padding-right: 40px;
}
.jn-cat {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A8834E;
}
.jn-title {
  margin: 0;
  font-size: 19px;
  line-height: 1.35;
  color: #16232F;
  transition: color 0.3s ease;
}
.jn-card:hover .jn-title {
  color: #A8834E;
}
.jn-arrow {
  position: absolute;
  top: 20px;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid #dde4ea;
  border-radius: 50%;
  color: #16232F;
  font-size: 10px;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.jn-card:hover .jn-arrow {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff;
  transform: translateX(3px);
}

/* --- 14 final cta --- */
.final-cta {
  position: relative;
  padding: 110px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(11, 18, 26, 0.62) 0%, rgba(12, 20, 29, 0.55) 60%, rgba(12, 20, 29, 0.72) 100%);
}
.fc-inner {
  position: relative;
  z-index: 2;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.fc-title {
  margin-bottom: 16px;
  font-size: 40px;
  line-height: 1.2;
  color: #fff;
}
.fc-text {
  max-width: 60ch;
  margin: 0 auto 30px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.fc-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.fc-actions .nir-btn i {
  margin-left: 8px;
  font-size: 10px;
}

/* --- 15 footer --- */
.site-footer {
  padding: 70px 0 26px;
  background: linear-gradient(165deg, #1B2A38 0%, #16232F 40%, #0D1620 100%);
  color: rgba(255, 255, 255, 0.72);
}
.sf-logo {
  max-width: 170px;
  margin-bottom: 18px;
}
.sf-about {
  margin-bottom: 20px;
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
}
.sf-social {
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #fff;
  font-size: 13px;
  text-decoration: none !important;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.sf-social a:hover {
  border-color: #C9A971;
  background: #A8834E;
  color: #fff !important;
}
.sf-head {
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.sf-links,
.sf-contact {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-links li {
  margin-bottom: 10px;
}
.sf-links a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.68);
  text-decoration: none !important;
  transition: color 0.25s ease, padding-left 0.25s ease;
}
.sf-links a:hover {
  padding-left: 5px;
  color: #C9A971 !important;
}
.sf-contact li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
.sf-contact li i {
  flex: 0 0 16px;
  margin-top: 3px;
  color: #C9A971;
  font-size: 14px;
}
.sf-ctl {
  display: block;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
}
.sf-contact a,
.sf-contact span > span + a {
  font-size: 14px;
  color: #fff;
  text-decoration: none !important;
  transition: color 0.25s ease;
}
.sf-contact a:hover {
  color: #C9A971 !important;
}
.sf-contact li > span {
  font-size: 14px;
  color: #fff;
  line-height: 1.5;
}
.sf-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.sf-copy {
  margin: 0;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.sf-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.sf-legal a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none !important;
  transition: color 0.25s ease;
}
.sf-legal a:hover {
  color: #C9A971 !important;
}

/* --- responsive --- */
@media (max-width: 1199px) {
  .exp-card {
    height: 400px;
  }
  .exp-title {
    font-size: 21px;
  }
  .ms-content {
    padding: 44px 36px;
  }
  .ms-content h2 {
    font-size: 30px;
  }
  .st-num {
    font-size: 32px;
  }
  .fc-title {
    font-size: 34px;
  }
}

@media (max-width: 991px) {
  .exp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .wt-intro {
    margin-bottom: 26px;
  }
  .pr-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 22px;
  }
  /* the rail only makes sense as one unbroken row, so it goes away here */
  .pr-step::before {
    display: none;
  }
  .ms-media,
  .ms-media img {
    min-height: 300px;
  }
  .st-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .st-item:nth-child(3) {
    border-right: 0;
  }
  .st-item:nth-child(n + 4) {
    border-top: 1px solid #EAE3D9;
  }
  .vc-rail {
    /* swipe rail on the small side, matching the destinations carousel */
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 4px;
  }
  .vc-rail::-webkit-scrollbar {
    display: none;
  }
  .vc-card {
    flex: 0 0 78%;
    scroll-snap-align: start;
  }
  .jn-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .fc-title {
    font-size: 30px;
  }
  .final-cta {
    padding: 80px 0;
  }
}

@media (max-width: 767px) {
  .exp-grid {
    gap: 16px;
    padding-bottom: 0;
  }
  .exp-card,
  .exp-card:nth-child(even) {
    transform: none;
  }
  .exp-card:hover,
  .exp-card:nth-child(even):hover {
    transform: translateY(-4px);
  }
  .exp-card {
    height: 340px;
  }
  .ms-content {
    padding: 36px 26px;
  }
  .ms-content h2 {
    font-size: 26px;
  }
  .ms-link {
    display: block;
    margin: 16px 0 0;
  }
  .st-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .st-item {
    padding: 24px 14px;
    border-right: 1px solid #EAE3D9;
    border-top: 1px solid #EAE3D9;
  }
  .st-item:nth-child(2n) {
    border-right: 0;
  }
  .st-item:nth-child(-n + 2) {
    border-top: 0;
  }
  .st-item:last-child {
    grid-column: 1 / -1;
    border-right: 0;
  }
  .jn-grid {
    grid-template-columns: 1fr;
  }
  .wt-title {
    font-size: 19px;
  }
  .bs-item {
    padding: 0 18px;
    font-size: 11.5px;
  }
}

@media (max-width: 575px) {
  .exp-grid {
    grid-template-columns: 1fr;
  }
  .pr-steps {
    grid-template-columns: 1fr;
  }
  .vc-card {
    flex-basis: 86%;
    padding: 24px 22px;
  }
  .fc-title {
    font-size: 25px;
  }
  .fc-actions .nir-btn,
  .fc-actions .nir-btn-ghost {
    width: 100%;
    text-align: center;
  }
  .sf-bottom {
    justify-content: center;
    text-align: center;
  }
}

/* The template sets a global `ul li { display: inline-block }`, so every list
   in the new sections has to say plainly that it stacks. */
.sf-links li,

/* A reversed logo file (white wordmark, gold plane) is supplied for dark
   grounds, so the footer logo is used as drawn - no whitening filter. */
.sf-logo {
  filter: none;
}

/* --- footer link bullets --- */
.sf-links a {
  display: inline-flex;
  align-items: center;
}
.sf-links a::before {
  content: "\e606"; /* icon-arrow-right from line-icons */
  flex: 0 0 auto;
  margin-right: 9px;
  font-family: "simple-line-icons";
  font-size: 9px;
  line-height: 1;
  color: #C9A971;
  transition: transform 0.25s ease;
}
.sf-links a:hover::before {
  transform: translateX(2px);
}
/* the arrow already reads as the indent, so drop the hover shift */
.sf-links a:hover {
  padding-left: 0;
}

/* --- brand column --- */
/* Plannex_Logo.png is 216x50 but the artwork only starts at x=46, so the file
   carries a 21% transparent gutter down its left edge. Without pulling that
   back the wordmark sits indented from the copy underneath it. Replace the
   file with a tightly cropped one and these two offsets can go. */
.sf-logo {
  max-width: 215px;
  margin-top: 6px;
  margin-left: -46px;
  margin-bottom: 20px;
}
footer .footer-about img {
  margin-left: -46px;
}

/* The wordmark is navy and every footer is navy, so it disappears. Render it
   white in both the new footer and the old one still used on other pages. */
.sf-logo,
footer .footer-about img,
footer .footer-upper .footer-about img {
  filter: none;
}
footer .footer-about img {
  max-width: 215px;
}

/* ==========================================================
   About page
   ========================================================== */



/* --- story --- */
.ab-story {
  background: #fff;
}
/* single frame now - the overlapping inset was dropped with the page trim */
.ab-media {
  position: relative;
}
.ab-media-main {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
}
/* the smaller frame overlaps the main one, so the block reads as a spread */
.ab-media-tag {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 7px 15px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 30px;
  background: rgba(12, 20, 29, 0.72);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.ab-story p {
  font-size: 14.5px;
  line-height: 1.75;
  color: #6E665F;
}

/* --- numbers --- */
.ab-numbers {
  background: #fff;
}

/* --- four desks --- */
.ab-desks {
  background: #F8F5F0;
}
.dk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.dk-card {
  display: flex;
  flex-direction: column;
  padding: 30px 26px 26px;
  border: 1px solid #E5DDD2;
  border-radius: 16px;
  background: #fff;
  text-decoration: none !important;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.dk-card:hover {
  transform: translateY(-4px);
  border-color: #DFCFAF;
  box-shadow: 0 26px 44px -30px rgba(22, 35, 47, 0.5);
}
.dk-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: rgba(168, 131, 78, 0.1);
  color: #A8834E;
  font-size: 19px;
  transition: background 0.4s ease, color 0.4s ease;
}
.dk-card:hover .dk-icon {
  background: #A8834E;
  color: #fff;
}
.dk-title {
  margin: 0 0 2px;
  font-size: 20px;
  letter-spacing: 0.04em;
  color: #16232F;
}
.dk-sub {
  display: block;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9A9188;
}
.dk-text {
  flex: 1;
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #7D746C;
}
.dk-link {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A8834E;
}
.dk-link i {
  margin-left: 8px;
  font-size: 10px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.dk-card:hover .dk-link i {
  transform: translateX(4px);
}

/* --- values --- */
.ab-values {
  background: #fff;
}

/* --- reach --- */
.ab-reach {
  background: #fff;
}
.rc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: #EAE3D9;
  border: 1px solid #EAE3D9;
  border-radius: 16px;
  overflow: hidden;
}
.rc-item {
  padding: 24px 22px;
  background: #FCFAF6;
}
.rc-name {
  margin: 0 0 6px;
  font-size: 17px;
  color: #16232F;
}
.rc-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: #8B8179;
}

/* --- team --- */
.ab-team {
  background: #F8F5F0;
}
.ab-team-inner {
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(140deg, #1B2A38 0%, #16232F 46%, #0D1620 100%);
}
.at-media,
.at-media img {
  width: 100%;
  height: 100%;
  min-height: 400px;
  object-fit: cover;
}
.at-content {
  padding: 48px 44px;
}
.at-content h2 {
  font-size: 30px;
  line-height: 1.2;
  color: #fff;
}
.at-content p {
  max-width: 56ch;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
}
.at-desks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 22px;
}
.at-desk {
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.at-desk-name {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9A971;
}
.at-desk a {
  font-size: 13.5px;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none !important;
  word-break: break-all;
  transition: color 0.25s ease;
}
.at-desk a:hover {
  color: #fff !important;
}

/* --- responsive --- */
@media (max-width: 1199px) {
  .at-content {
    padding: 38px 32px;
  }
  .at-content h2 {
    font-size: 26px;
  }
  .dk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .ab-media-main {
    height: 340px;
  }
  .rc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .at-media,
  .at-media img {
    min-height: 280px;
  }
}

@media (max-width: 767px) {
  .ab-media {
    padding-bottom: 0;
  }
  .dk-grid {
    grid-template-columns: 1fr;
  }
  .at-desks {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .rc-grid {
    grid-template-columns: 1fr;
  }
  .at-content {
    padding: 30px 22px;
  }
}

/* ==========================================================
   Homepage v2 - tighter rhythm, rebuilt cards
   The page was running on 5rem top and bottom per section (160px between
   any two), which read as loose rather than generous. One shared scale now.
   ========================================================== */
.sec-pad {
  padding: 62px 0;
}
.sec-pad-sm {
  padding: 44px 0;
}
.sec-head {
  margin-bottom: 36px;
}
.sec-head h2 {
  font-size: 32px;
}
.sec-head p {
  font-size: 14px;
  line-height: 1.65;
}

/* --- about intro (replaces the old counters block) --- */
.about-intro {
  background: #fff;
}
.ai-media {
  position: relative;
}
.ai-media img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 16px;
}
.ai-tag {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 30px;
  background: rgba(12, 20, 29, 0.82);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.ai-tag i {
  margin-right: 8px;
  color: #C9A971;
  font-size: 14px;
}
.about-intro h2 {
  font-size: 31px;
  line-height: 1.22;
}
.about-intro p {
  font-size: 14.5px;
  line-height: 1.72;
  color: #6E665F;
}

/* --- experiences: shorter cards, real button --- */
.exp-grid {
  padding-bottom: 30px;
}
.exp-card {
  height: 310px;
}
.exp-card:nth-child(even) {
  transform: translateY(30px);
}
.exp-card:nth-child(even):hover,
.exp-card:nth-child(even):focus-visible {
  transform: translateY(25px);
}
.exp-title {
  font-size: 20px;
}
.experiences .nir-btn i {
  margin-left: 9px;
  font-size: 10px;
}

/* --- signature journeys: four to a row, image-led card --- */
/* the CTA is now a circular arrow, so the card foot stays on one line */
.jr-note {
  margin-top: 20px;
  font-size: 12px;
}

/* --- why us: five square cards --- */
.wu-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.wu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  padding: 22px 18px;
  border: 1px solid #E5DDD2;
  border-radius: 16px;
  background: #fff;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.wu-card:hover {
  transform: translateY(-5px);
  border-color: #DFCFAF;
  box-shadow: 0 26px 44px -30px rgba(22, 35, 47, 0.5);
}
.wu-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 16px;
  border: 1px solid rgba(168, 131, 78, 0.28);
  border-radius: 50%;
  background: rgba(168, 131, 78, 0.08);
  color: #A8834E;
  font-size: 22px;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.wu-card:hover .wu-ring {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff;
}
.wu-title {
  margin: 0 0 6px;
  font-size: 15.5px;
  line-height: 1.3;
  color: #16232F;
}
.wu-text {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8B8179;
}

/* --- process: waypoints on a route --- */
.pr-rail {
  position: relative;
}
/* The route the five waypoints sit on. A CSS dashed border rather than an
   SVG: preserveAspectRatio="none" squashed the stroke to a hairline. */
.pr-route {
  position: absolute;
  top: 26px;
  right: 10%;
  left: 10%;
  height: 0;
  border-top: 2px dashed #c8d5e0;
}
.pr-route::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  border-top: 2px dashed #C9A971;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.pr-rail.is-in .pr-route::after {
  transform: scaleX(1);
}
/* the live line draws itself across as the row comes into view */

.pr-steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pr-step {
  position: relative;
  padding-top: 74px;
  text-align: center;
}
.pr-step::before {
  display: none;
}
.pr-marker {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border: 1px solid #d3dde6;
  border-radius: 50%;
  background: #F8F5F0;
  color: #9A9188;
  font-size: 19px;
  transition: border-color 0.5s ease, background 0.5s ease, color 0.5s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pr-step.is-in .pr-marker {
  border-color: #A8834E;
  background: #fff;
  color: #A8834E;
  transform: translateX(-50%) scale(1.04);
}
.pr-num {
  position: relative;
  display: block;
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #C9A971;
}
.pr-title {
  position: relative;
  margin: 0 0 7px;
  font-size: 18px;
  color: #16232F;
}
.pr-text {
  position: relative;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: #7D746C;
}

/* --- testimonials --- */
.vc-card {
  position: relative;
  padding: 34px 26px 26px;
  border: 1px solid #E5DDD2;
  border-radius: 16px;
  background: #fff;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.4s ease;
}
.vc-card:hover {
  transform: translateY(-4px);
  border-color: #DFCFAF;
  box-shadow: 0 26px 44px -30px rgba(22, 35, 47, 0.5);
}
.vc-mark {
  position: absolute;
  top: 10px;
  right: 24px;
  font-size: 72px;
  line-height: 1;
  font-weight: 700;
  color: rgba(168, 131, 78, 0.12);
  pointer-events: none;
}
.vc-stars {
  margin-bottom: 13px;
  font-size: 11.5px;
}
.vc-quote {
  position: relative;
  margin: 0 0 22px;
  font-size: 14.5px;
  line-height: 1.72;
  color: #4A443F;
}
.vc-by {
  display: flex;
  align-items: center;
  gap: 13px;
  padding-top: 16px;
  border-top: 1px solid #EFE9E0;
}
.vc-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(140deg, #1B2A38, #16232F);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.vc-ident {
  display: block;
}
.vc-name {
  font-size: 14px;
}
.vc-meta {
  font-size: 12px;
}

/* --- journal: four to a row, header on one line --- */
.jn-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid #EAE3D9;
}
.jn-head h2 {
  font-size: 30px;
}
.jn-head-cta {
  flex: 0 0 auto;
}
.jn-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.jn-media {
  position: relative;
  height: 168px;
  margin-bottom: 14px;
}
.jn-cat {
  position: absolute;
  top: 12px;
  left: 12px;
  margin: 0;
  padding: 5px 11px;
  border-radius: 30px;
  background: rgba(12, 20, 29, 0.78);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: #fff;
}
.jn-title {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.35;
}
.jn-more {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #A8834E;
}
.jn-more i {
  margin-left: 7px;
  font-size: 9px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.jn-card:hover .jn-more i {
  transform: translateX(4px);
}

/* --- final cta: tighter --- */
.final-cta {
  padding: 74px 0;
}
.fc-title {
  font-size: 33px;
}
.fc-text {
  margin-bottom: 26px;
  font-size: 14.5px;
}

/* --- footer: give it room to breathe --- */
.site-footer {
  padding: 76px 0 30px;
}
.sf-main {
  padding-bottom: 12px;
}
.sf-head {
  margin-bottom: 22px;
}
.sf-links li {
  margin-bottom: 12px;
}
.sf-bottom {
  padding-top: 28px;
  margin-top: 8px;
}

/* --- responsive --- */
@media (max-width: 1199px) {
  .sec-head h2,
  .about-intro h2 {
    font-size: 28px;
  }
  .wu-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .jn-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .sec-pad {
    padding: 48px 0;
  }
  .sec-pad-sm {
    padding: 36px 0;
  }
  .sec-head {
    margin-bottom: 28px;
  }
  .ai-media img {
    height: 300px;
  }
  .pr-route {
    display: none;
  }
  .pr-steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px 18px;
  }
  .final-cta {
    padding: 58px 0;
  }
  .fc-title {
    font-size: 27px;
  }
  .site-footer {
    padding: 56px 0 26px;
  }
}

@media (max-width: 767px) {
  .exp-card {
    height: 280px;
  }
  .wu-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .jn-head {
    display: block;
  }
  .jn-head-cta {
    margin-top: 16px;
  }
}

@media (max-width: 575px) {
  .sec-pad {
    padding: 40px 0;
  }
  .sec-head h2,
  .about-intro h2 {
    font-size: 24px;
  }
  .wu-grid {
    grid-template-columns: 1fr;
  }
  .wu-card {
    aspect-ratio: auto;
    padding: 26px 20px;
  }
  .pr-steps {
    grid-template-columns: 1fr;
  }
  .fc-title {
    font-size: 22px;
  }
}

/* ==========================================================
   About page v2 - plain image banner, mission / vision / values
   ========================================================== */
/* Standard inner-page banner: artwork behind, copy centred over it. */
.page-banner {
  position: relative;
  padding: 96px 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.page-banner::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(11, 18, 26, 0.68) 0%, rgba(12, 20, 29, 0.6) 55%, rgba(12, 20, 29, 0.78) 100%);
}
.page-banner .container {
  position: relative;
  z-index: 2;
}
.pb-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.pb-title {
  margin-bottom: 14px;
  font-size: 40px;
  line-height: 1.18;
  color: #fff;
}
.page-banner .breadcrumb {
  margin: 0;
  padding: 0;
  justify-content: center;
  background: none;
}
.page-banner .breadcrumb li,
.page-banner .breadcrumb li a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.75);
}
.page-banner .breadcrumb li a:hover {
  color: #C9A971;
}

/* --- mission / vision / values --- */
.ab-mv {
  background: #F8F5F0;
}
.mv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.mv-card {
  padding: 30px 28px;
  border: 1px solid #E5DDD2;
  border-radius: 16px;
  background: #fff;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.mv-card:hover {
  transform: translateY(-4px);
  border-color: #DFCFAF;
  box-shadow: 0 26px 44px -30px rgba(22, 35, 47, 0.5);
}
.mv-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 18px;
  border: 1px solid rgba(168, 131, 78, 0.26);
  border-radius: 50%;
  background: rgba(168, 131, 78, 0.08);
  color: #A8834E;
  font-size: 20px;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.mv-card:hover .mv-icon {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff;
}
.mv-title {
  margin: 0 0 10px;
  font-size: 19px;
  color: #16232F;
}
.mv-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: #7D746C;
}
.mv-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mv-list li {
  display: block;
  position: relative;
  padding: 0 0 9px 18px;
  font-size: 13.5px;
  line-height: 1.55;
  color: #7D746C;
}
.mv-list li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #C9A971;
}
.mv-list li:last-child {
  padding-bottom: 0;
}

@media (max-width: 991px) {
  .page-banner {
    padding: 68px 0;
  }
  .pb-title {
    font-size: 30px;
  }
  .mv-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .page-banner {
    padding: 52px 0;
  }
  .pb-title {
    font-size: 25px;
  }
}

/* ==========================================================
   Package flip cards
   Front carries the picture, the name, the sub-category and the offer.
   Hover turns the card over to the full detail: duration, region, route,
   inclusions, price and the call to action.
   ========================================================== */
.pk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.pk-card {
  display: block;
  height: 350px;
  perspective: 1500px;
  text-decoration: none !important;
  transition: opacity 0.4s ease;
}
.pk-card:focus-visible {
  outline: 3px solid #C9A971;
  outline-offset: 4px;
  border-radius: 14px;
}

.pk-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.pk-card:hover .pk-inner,
.pk-card:focus-visible .pk-inner {
  transform: rotateY(180deg);
}

.pk-face {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  border-radius: 14px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* --- front --- */
.pk-front {
  background: #101A24;
  box-shadow: 0 14px 32px -22px rgba(22, 35, 47, 0.6);
}
.pk-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pk-veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(11, 18, 26, 0.92) 0%, rgba(12, 20, 29, 0.55) 34%, rgba(13, 22, 32, 0.12) 66%, rgba(13, 22, 32, 0.06) 100%);
}

/* trip sub-category */
.pk-cat {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 6px 13px;
  border-radius: 30px;
  background: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #16232F;
  box-shadow: 0 6px 14px -8px rgba(13, 22, 32, 0.6);
}
/* only rendered on packages that actually carry an offer */
.pk-save {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 30px;
  background: #E8573F;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}

.pk-front-body {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 2;
}
.pk-name {
  margin: 0 0 9px;
  font-size: 21px;
  line-height: 1.22;
  font-weight: 700;
  color: #fff;
}
.pk-hint {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9A971;
}
.pk-hint i {
  margin-right: 7px;
  font-size: 12px;
}

/* --- back --- */
.pk-back {
  display: flex;
  flex-direction: column;
  padding: 18px 17px 16px;
  border: 1px solid #e0e7ee;
  border-top: 3px solid #C9A971;
  background: #fff;
  transform: rotateY(180deg);
  box-shadow: 0 18px 40px -24px rgba(22, 35, 47, 0.55);
}
.pk-back-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.pk-cat-sm {
  padding: 4px 11px;
  border-radius: 30px;
  background: rgba(22, 35, 47, 0.07);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #16232F;
}
.pk-save-sm {
  padding: 4px 10px;
  border-radius: 30px;
  background: rgba(232, 87, 63, 0.1);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #E8573F;
}
.pk-back-name {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.24;
  color: #16232F;
}

.pk-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.pk-dur,
.pk-region {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6E665F;
}
.pk-dur i,
.pk-region i {
  margin-right: 5px;
  font-size: 12px;
  color: #A8834E;
}

.pk-route {
  margin-bottom: 13px;
  padding-bottom: 12px;
  border-bottom: 1px dashed #e4eaef;
  font-size: 12.5px;
  line-height: 1.45;
  color: #7D746C;
}
.pk-route em {
  margin: 0 4px;
  font-style: normal;
  color: #b6c0ca;
}

.pk-incl {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin-bottom: 14px;
}
.pk-inc {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 1px 7px;
  border: 1px solid #EFE9E0;
  border-radius: 9px;
  background: #FCFAF6;
}
.pk-inc i {
  font-size: 13px;
  color: #A8834E;
}
.pk-inc em {
  max-width: 100%;
  font-style: normal;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
  color: #8B8179;
  text-align: center;
  line-height: 1.2;
  /* labels stay on one line - "Transfers" was breaking in two */
  white-space: nowrap;
}

.pk-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #EFE9E0;
}
.pk-price {
  display: block;
  line-height: 1.15;
}
.pk-from {
  display: block;
  margin-bottom: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9A9188;
}
.pk-now {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #16232F;
}
.pk-was {
  margin-right: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #ABA298;
  text-decoration: line-through;
}
.pk-pp {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: #9A9188;
}
.pk-btn {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 9px 14px;
  border-radius: 8px;
  background: #16232F;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  transition: background 0.3s ease;
}
.pk-btn i {
  margin-left: 7px;
  font-size: 9px;
}
.pk-card:hover .pk-btn {
  background: #A8834E;
}

/* the card you are on stays lit, the others step back */
.pk-grid:hover .pk-card:not(:hover) {
  opacity: 0.62;
}

/* --- responsive --- */
@media (max-width: 1199px) {
  .pk-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .pk-card {
    height: 350px;
  }
}

/* No hover on touch: stop flipping and stack the picture over the detail,
   which is the same information without a gesture nobody can perform. */
@media (hover: none) {
  .pk-card {
    height: auto;
    perspective: none;
  }
  .pk-inner {
    height: auto;
    transform: none !important;
    transform-style: flat;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #e0e7ee;
    box-shadow: 0 18px 40px -28px rgba(22, 35, 47, 0.5);
  }
  .pk-face {
    position: relative;
    border-radius: 0;
    -webkit-backface-visibility: visible;
    backface-visibility: visible;
    transform: none;
  }
  .pk-front {
    height: 200px;
    box-shadow: none;
  }
  .pk-hint {
    display: none;
  }
  .pk-back {
    border: 0;
    border-top: 3px solid #C9A971;
    box-shadow: none;
  }
  .pk-grid:hover .pk-card:not(:hover) {
    opacity: 1;
  }
}

@media (max-width: 575px) {
  .pk-grid {
    grid-template-columns: 1fr;
  }
  .pk-card {
    height: 420px;
  }
  .pk-inc em {
    font-size: 9.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pk-inner {
    transition-duration: 0.01ms;
  }
}

/* nights / days on the front face, above the package name */
.pk-front-dur {
  display: inline-flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 5px 11px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 30px;
  background: rgba(12, 20, 29, 0.42);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}
.pk-front-dur i {
  margin-right: 7px;
  font-size: 12px;
  color: #C9A971;
}

/* ==========================================================
   About - philosophy and why choose us
   Deliberately icon-free: large type carrying the meaning reads
   more premium than a badge beside every line.
   ========================================================== */
.ab-philo {
  background: #fff;
}
.ph-head {
  max-width: 780px;
  margin: 0 auto 46px;
  text-align: center;
}
.ph-statement {
  margin: 0;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ph-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
}
.ph-item {
  padding-top: 22px;
  border-top: 2px solid #e4eaef;
  transition: border-color 0.4s ease;
}
.ph-item:hover {
  border-top-color: #C9A971;
}
.ph-word {
  margin: 0 0 10px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #16232F;
}
.ph-line {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: #7D746C;
}

/* --- why choose us: numbered list, no icons --- */
.ab-choose {
  background: #F8F5F0;
}
.ch-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 44px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ch-list li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 19px 4px;
  border-bottom: 1px solid #e4eaef;
  transition: padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ch-list li:hover {
  padding-left: 12px;
}
/* the last row of each column keeps the grid from ending on a stray rule */
.ch-list li:nth-last-child(-n + 2) {
  border-bottom: 0;
}
.ch-num {
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #C9A971;
}
.ch-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: #16232F;
}

@media (max-width: 1199px) {
  .ph-statement {
    font-size: 34px;
  }
  .ph-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 28px 30px;
  }
  .ph-word {
    font-size: 24px;
  }
}

@media (max-width: 991px) {
  .ph-head {
    margin-bottom: 34px;
  }
  .ph-statement {
    font-size: 28px;
  }
  .ch-list {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .ch-list li:nth-last-child(-n + 2) {
    border-bottom: 1px solid #e4eaef;
  }
  .ch-list li:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 575px) {
  .ph-statement {
    font-size: 24px;
  }
  .ph-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .ph-word {
    font-size: 22px;
  }
  .ch-name {
    font-size: 16px;
  }
}

/* About page banding: alternate the section grounds so no two tinted
   sections sit against each other and the page reads as distinct blocks. */
.ab-philo {
  background: #F8F5F0;
}
.ab-mv,
.ab-choose,
.ab-team {
  background: #fff;
}

/* MICE showcase, tightened: the band was running ~450px tall. Smaller type
   and a lighter tag pill let the five tags sit on one row, which is what was
   forcing most of the extra height. */
.ms-content {
  padding: 34px 34px;
}
.ms-content h2 {
  font-size: 26px;
  line-height: 1.2;
}
.ms-content p {
  max-width: 54ch;
  margin-bottom: 18px !important;
  font-size: 13.5px;
  line-height: 1.62;
}
.ms-tags {
  gap: 7px;
  margin-bottom: 20px;
}
.ms-tags li {
  padding: 6px 12px;
  font-size: 10.5px;
  letter-spacing: 0.08em;
}
.ms-content .nir-btn {
  padding: 11px 20px;
  font-size: 13px;
}
.ms-link {
  margin-left: 18px;
  font-size: 12.5px;
}
.ms-media,
.ms-media img {
  min-height: 300px;
}

@media (max-width: 1199px) {
  .ms-content {
    padding: 30px 26px;
  }
  .ms-content h2 {
    font-size: 23px;
  }
}

@media (max-width: 991px) {
  .ms-media,
  .ms-media img {
    min-height: 240px;
  }
}

/* The media column was sized with height:100% against an auto-height parent,
   so it resolved to auto and the photo rendered at its full natural height -
   which is what pushed this band to ~1000px. A definite height fixes it and
   lets object-fit crop instead. */
.ms-media {
  height: 320px;
  min-height: 0;
}
.ms-media img {
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

@media (max-width: 991px) {
  .ms-media {
    height: 240px;
  }
}

/* One more pass down. The five tags were still wrapping between 992 and
   1199px, where the column narrows to ~428px but the pills needed ~470px. */
.ms-content {
  padding: 30px 30px;
}
.ms-content h2 {
  font-size: 24px;
}
.ms-content p {
  margin-bottom: 16px !important;
  font-size: 13px;
  line-height: 1.6;
}
.ms-tags {
  gap: 6px;
  margin-bottom: 18px;
}
.ms-tags li {
  padding: 5px 10px;
  font-size: 9.5px;
  letter-spacing: 0.06em;
}
.ms-content .nir-btn {
  padding: 10px 18px;
  font-size: 12.5px;
}
.ms-link {
  margin-left: 16px;
  font-size: 12px;
}
.ms-media {
  height: 290px;
}

@media (max-width: 1199px) {
  .ms-content {
    padding: 26px 22px;
  }
  .ms-content h2 {
    font-size: 22px;
  }
  .ms-tags li {
    padding: 5px 9px;
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .ms-media {
    height: 270px;
  }
}

/* Pills carry ~20px of chrome each; five of them could not hold one line in
   the 992-1199px column. A dot-separated list drops that chrome entirely. */
.ms-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin-bottom: 18px;
}
.ms-tags li {
  position: relative;
  margin-right: 19px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.ms-tags li::after {
  content: "";
  position: absolute;
  top: 50%;
  right: -12px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #C9A971;
  transform: translateY(-50%);
}
.ms-tags li:last-child {
  margin-right: 0;
}
.ms-tags li:last-child::after {
  display: none;
}

@media (max-width: 1199px) {
  .ms-tags li {
    margin-right: 16px;
    font-size: 9.5px;
    letter-spacing: 0.06em;
  }
  .ms-tags li::after {
    right: -10px;
  }
}

/* Back to transparent rounded pills, sized so all five still hold one line
   in the 992-1199px column (~436px) where they were wrapping before. */
.ms-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-bottom: 18px;
}
.ms-tags li {
  position: relative;
  margin-right: 0;
  padding: 5px 10px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 30px;
  background: transparent;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
}
.ms-tags li::after {
  display: none;
}

@media (max-width: 1199px) {
  .ms-tags {
    gap: 4px;
  }
  .ms-tags li {
    padding: 5px 8px;
    font-size: 9px;
    letter-spacing: 0.04em;
  }
}

/* ==========================================================
   FIT page
   ========================================================== */
.fit-hero {
  position: relative;
  padding: 104px 0 92px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.fit-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(105deg, rgba(1, 18, 34, 0.9) 0%, rgba(12, 20, 29, 0.7) 42%, rgba(13, 22, 32, 0.2) 76%, rgba(13, 22, 32, 0) 100%);
}
.fit-hero .container {
  position: relative;
  z-index: 2;
}
.fh-inner {
  max-width: 640px;
}
.fh-title {
  margin-bottom: 16px;
  font-size: 54px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}
.fh-text {
  max-width: 52ch;
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.85);
}
.fh-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}
.fh-actions .nir-btn i {
  margin-left: 8px;
  font-size: 10px;
}
.fit-hero .breadcrumb {
  margin: 0;
  padding: 0;
  background: none;
}
.fit-hero .breadcrumb li,
.fit-hero .breadcrumb li a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.fit-hero .breadcrumb li a:hover {
  color: #C9A971;
}

/* --- intro --- */
.fit-intro {
  background: #fff;
}
.fi-media {
  position: relative;
}
.fi-media img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 16px;
}
.fi-tag {
  position: absolute;
  bottom: 18px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  padding: 9px 16px;
  border-radius: 30px;
  background: rgba(12, 20, 29, 0.82);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.fi-tag i {
  margin-right: 8px;
  font-size: 14px;
  color: #C9A971;
}
.fit-intro h2 {
  font-size: 31px;
  line-height: 1.22;
}
.fit-intro p {
  font-size: 14.5px;
  line-height: 1.72;
  color: #6E665F;
}
.fi-points {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fi-points li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  border-top: 1px solid #EFE9E0;
  font-size: 14px;
  color: #4A443F;
}
.fi-points li i {
  margin-top: 3px;
  font-size: 13px;
  color: #A8834E;
}

/* --- travel styles: asymmetric grid --- */
.fit-styles {
  background: #F8F5F0;
}
.fs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 190px;
  gap: 18px;
}
/* two tiles run double height, which is what breaks the grid out of a plain row */
.fs-tall {
  grid-row: span 2;
}
.fs-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 14px;
  background: #101A24;
  text-decoration: none !important;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s ease;
}
.fs-card:hover,
.fs-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 28px 46px -28px rgba(13, 22, 32, 0.6);
}
.fs-card:focus-visible {
  outline: 3px solid #C9A971;
  outline-offset: 3px;
}
.fs-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.004);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.fs-card:hover .fs-img {
  transform: scale(1.07);
}
.fs-veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(11, 18, 26, 0.92) 0%, rgba(12, 20, 29, 0.55) 38%, rgba(13, 22, 32, 0.08) 74%, rgba(13, 22, 32, 0) 100%);
}
.fs-body {
  position: absolute;
  right: 20px;
  bottom: 18px;
  left: 20px;
  z-index: 2;
  padding-right: 44px;
}
.fs-title {
  margin: 0 0 5px;
  font-size: 21px;
  line-height: 1.2;
  color: #fff;
}
.fs-line {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.78);
}
.fs-arrow {
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 10px;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.fs-card:hover .fs-arrow {
  border-color: #A8834E;
  background: #A8834E;
  transform: translateX(3px);
}
.fs-custom .fs-veil {
  background: linear-gradient(to top, rgba(11, 18, 26, 0.94) 0%, rgba(22, 35, 47, 0.72) 45%, rgba(168, 131, 78, 0.32) 100%);
}

/* --- destination stories: horizontal editorial rail --- */
.fit-stories {
  background: #fff;
}
.st-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
  padding-bottom: 18px;
  border-bottom: 1px solid #EAE3D9;
}
.st-head h2 {
  font-size: 30px;
}
.st-nav {
  padding-bottom: 2px;
}
.story-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* the rail bleeds past the container so cards run off the edge of the page */
  padding: 4px calc((100vw - 1320px) / 2) 12px;
}
.story-rail::-webkit-scrollbar {
  display: none;
}
.story-card {
  flex: 0 0 420px;
  scroll-snap-align: start;
  text-decoration: none !important;
}
.story-media {
  display: block;
  height: 260px;
  margin-bottom: 18px;
  overflow: hidden;
  border-radius: 14px;
}
.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.004);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.story-card:hover .story-media img {
  transform: scale(1.06);
}
.story-place {
  display: block;
  margin-bottom: 7px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A8834E;
}
.story-title {
  margin: 0 0 9px;
  font-size: 21px;
  line-height: 1.25;
  color: #16232F;
}
.story-text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.65;
  color: #7D746C;
}
.story-cta {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #16232F;
}
.story-cta i {
  margin-left: 8px;
  font-size: 10px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.story-card:hover .story-cta {
  color: #A8834E;
}
.story-card:hover .story-cta i {
  transform: translateX(4px);
}

/* --- featured packages + filters --- */
.fit-packages {
  background: #F8F5F0;
}
.fp-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 9px;
  margin-bottom: 32px;
}
.fp-filter {
  padding: 9px 19px;
  border: 1px solid #d7e0e8;
  border-radius: 30px;
  background: transparent;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6E665F;
  cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.fp-filter:hover {
  border-color: #C9A971;
  background: rgba(201, 169, 113, 0.09);
  color: #16232F;
}
.fp-filter.is-active {
  border-color: #16232F;
  background: #16232F;
  color: #fff;
}
.fp-filter:focus-visible {
  outline: 2px solid #C9A971;
  outline-offset: 2px;
}
.fp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.fp-item[hidden] {
  display: none;
}
.fp-empty {
  margin: 10px 0 0;
  text-align: center;
  font-size: 14px;
  color: #8B8179;
}

/* --- trip builder --- */
.trip-builder {
  background: #fff;
}
.tb-shell {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 34px 28px;
  border: 1px solid #E5DDD2;
  border-radius: 18px;
  background: #FCFAF6;
  box-shadow: 0 24px 50px -36px rgba(22, 35, 47, 0.55);
}
.tb-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}
.tb-bar {
  flex: 1;
  height: 4px;
  border-radius: 4px;
  background: #e4eaef;
  overflow: hidden;
}
.tb-bar-fill {
  display: block;
  width: 20%;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #A8834E, #C9A971);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.tb-count {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8B8179;
}
.tb-count b {
  color: #16232F;
}

.tb-step {
  display: none;
}
.tb-step.is-active {
  display: block;
  animation: tb-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes tb-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.tb-q {
  margin: 0 0 5px;
  font-size: 23px;
  line-height: 1.24;
  color: #16232F;
}
.tb-help {
  margin: 0 0 20px;
  font-size: 13.5px;
  color: #8B8179;
}
.tb-shell .form-control,
.tb-shell .form-select {
  height: auto;
  padding: 11px 14px;
  border: 1px solid #E2D9CD;
  border-radius: 10px;
  background-color: #fff;
  font-size: 14px;
  color: #333;
  box-shadow: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tb-shell .form-control:focus,
.tb-shell .form-select:focus {
  border-color: #A8834E;
  box-shadow: 0 0 0 3px rgba(168, 131, 78, 0.12);
}
.tb-checks .chk span {
  background: #fff;
}
.tb-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid #EFE9E0;
}
.tb-nav .nir-btn i {
  margin-left: 8px;
  font-size: 10px;
}
.tb-back {
  border-color: #d7e0e8;
  color: #6E665F;
}
.tb-back:hover {
  border-color: #16232F;
  background: transparent;
  color: #16232F !important;
}
.tb-next,
.tb-submit {
  margin-left: auto;
  border: none;
  cursor: pointer;
}

/* --- responsive --- */
@media (max-width: 1399px) {
  .story-rail {
    padding-left: calc((100vw - 1140px) / 2);
    padding-right: calc((100vw - 1140px) / 2);
  }
}

@media (max-width: 1199px) {
  .fh-title {
    font-size: 44px;
  }
  .fit-intro h2 {
    font-size: 27px;
  }
  .fp-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .story-card {
    flex-basis: 380px;
  }
  .story-rail {
    padding-left: calc((100vw - 960px) / 2);
    padding-right: calc((100vw - 960px) / 2);
  }
}

@media (max-width: 991px) {
  .fit-hero {
    padding: 74px 0 64px;
  }
  .fh-title {
    font-size: 36px;
  }
  .fi-media img {
    height: 300px;
  }
  /* the masonry spans collapse: every tile becomes the same height */
  .fs-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 220px;
  }
  .fs-tall {
    grid-row: span 1;
  }
  .st-head {
    display: block;
  }
  .st-nav {
    display: none;
  }
  .story-rail {
    padding-left: 24px;
    padding-right: 24px;
  }
  .story-card {
    flex-basis: 78%;
  }
  .tb-shell {
    padding: 26px 22px 22px;
  }
  .tb-q {
    font-size: 20px;
  }
}

@media (max-width: 767px) {
  .fp-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575px) {
  .fit-hero {
    padding: 58px 0 50px;
  }
  .fh-title {
    font-size: 30px;
  }
  .fh-actions .nir-btn,
  .fh-actions .nir-btn-ghost {
    width: 100%;
    text-align: center;
  }
  .fs-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 230px;
  }
  .story-card {
    flex-basis: 84%;
  }
  .story-media {
    height: 210px;
  }
  .tb-nav {
    flex-wrap: wrap;
  }
  .tb-next,
  .tb-submit {
    width: 100%;
    margin-left: 0;
    text-align: center;
  }
}

/* Auto-placement left a hole: 4 single tiles + 2 double ones is 8 row-units,
   which does not divide across 3 columns. Three doubles and three singles is
   exactly 9, placed explicitly so every cell is filled. */
.fs-grid {
  grid-template-rows: repeat(3, 190px);
  grid-auto-rows: 190px;
}
.fs-grid > :nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
}
.fs-grid > :nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}
.fs-grid > :nth-child(3) {
  grid-column: 3;
  grid-row: 1 / span 2;
}
.fs-grid > :nth-child(4) {
  grid-column: 2;
  grid-row: 2 / span 2;
}
.fs-grid > :nth-child(5) {
  grid-column: 1;
  grid-row: 3;
}
.fs-grid > :nth-child(6) {
  grid-column: 3;
  grid-row: 3;
}

@media (max-width: 991px) {
  /* two even columns: drop the explicit placement entirely */
  .fs-grid {
    grid-template-rows: none;
    grid-auto-rows: 220px;
  }
  .fs-grid > :nth-child(1),
  .fs-grid > :nth-child(2),
  .fs-grid > :nth-child(3),
  .fs-grid > :nth-child(4),
  .fs-grid > :nth-child(5),
  .fs-grid > :nth-child(6) {
    grid-column: auto;
    grid-row: auto;
  }
}

/* Mandatory snapping aligns a card to the scrollport edge, which ignored the
   rail's side padding and pulled the first card flush to the window edge.
   scroll-padding tells the snap where the content really starts. */
.story-rail {
  scroll-padding-left: calc((100vw - 1320px) / 2);
}

@media (max-width: 1399px) {
  .story-rail {
    scroll-padding-left: calc((100vw - 1140px) / 2);
  }
}

@media (max-width: 1199px) {
  .story-rail {
    scroll-padding-left: calc((100vw - 960px) / 2);
  }
}

@media (max-width: 991px) {
  .story-rail {
    scroll-padding-left: 24px;
  }
}

/* +12px is the Bootstrap container's own gutter, so the first story card lines
   up with the section heading above it rather than with the container edge. */
.story-rail {
  padding-left: calc((100vw - 1320px) / 2 + 12px);
  padding-right: calc((100vw - 1320px) / 2 + 12px);
  scroll-padding-left: calc((100vw - 1320px) / 2 + 12px);
}

@media (max-width: 1399px) {
  .story-rail {
    padding-left: calc((100vw - 1140px) / 2 + 12px);
    padding-right: calc((100vw - 1140px) / 2 + 12px);
    scroll-padding-left: calc((100vw - 1140px) / 2 + 12px);
  }
}

@media (max-width: 1199px) {
  .story-rail {
    padding-left: calc((100vw - 960px) / 2 + 12px);
    padding-right: calc((100vw - 960px) / 2 + 12px);
    scroll-padding-left: calc((100vw - 960px) / 2 + 12px);
  }
}

@media (max-width: 991px) {
  .story-rail {
    padding-left: 24px;
    padding-right: 24px;
    scroll-padding-left: 24px;
  }
}

/* The FIT timeline has four steps, not five - without this the last column
   sat empty and the dashed route ran on past the final marker. */
.pr-steps-4 {
  grid-template-columns: repeat(4, 1fr);
}
.pr-steps-4 + .pr-route,
.pr-rail:has(.pr-steps-4) .pr-route {
  right: 12.5%;
  left: 12.5%;
}

/* FIT hero v2. The first pass ran 545px tall with the right 55% empty and the
   breadcrumb stranded under the buttons. Breadcrumb goes back on top, the
   padding comes in, and a three-column fact row gives the block a base. */
.fit-hero {
  padding: 30px 0 46px;
}
.fit-hero .breadcrumb {
  margin: 0 0 34px;
  padding: 0;
  background: none;
}
.fh-inner {
  max-width: 660px;
  margin-bottom: 46px;
}
.fh-title {
  margin-bottom: 14px;
  font-size: 48px;
  line-height: 1.1;
}
.fh-text {
  margin-bottom: 24px;
}
.fh-actions {
  margin-bottom: 0;
}

.fh-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: 26px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
}
.fh-facts li {
  display: block;
  padding-right: 34px;
}
.fh-fact-k {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9A971;
}
.fh-fact-v {
  display: block;
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

/* intro tick list: spacing instead of rules, which read as a table */
.fi-points li {
  border-top: 0;
  padding: 6px 0;
}

@media (max-width: 991px) {
  .fit-hero {
    padding: 24px 0 38px;
  }
  .fit-hero .breadcrumb {
    margin-bottom: 24px;
  }
  .fh-inner {
    margin-bottom: 34px;
  }
  .fh-facts {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .fh-facts li {
    padding-right: 0;
  }
}

/* ==========================================================
   Site header - premium, minimal, sticky
   Pages carrying it put .has-pj-header on <body> so the fixed bar
   does not sit over the first section.
   ========================================================== */
.has-pj-header {
  padding-top: 80px;
}

.pj-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  height: 80px;
  background: #fffdfb;
  border-bottom: 1px solid #ecebe8;
  transition: box-shadow 0.3s ease, height 0.3s ease, background 0.3s ease;
}
/* scrolled state: nothing changes but the depth */
.pj-header.is-stuck {
  height: 72px;
  box-shadow: 0 6px 24px -18px rgba(13, 22, 32, 0.55);
  border-bottom-color: #e6e5e1;
}

.pj-inner {
  display: flex;
  align-items: center;
  height: 80px;
  gap: 26px;
  transition: height 0.3s ease;
}
.pj-header.is-stuck .pj-inner {
  height: 72px;
}

.pj-logo {
  flex: 0 0 auto;
  display: block;
  margin-right: 12px;
}
.pj-logo img {
  display: block;
  height: 46px;
  width: auto;
  transition: height 0.3s ease;
}
.pj-header.is-stuck .pj-logo img {
  height: 40px;
}

/* --- primary nav --- */
.pj-mainnav {
  flex: 1 1 auto;
}
.pj-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pj-item {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}
.pj-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 13px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #16232F;
  text-decoration: none !important;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.25s ease;
}
.pj-link:hover,
.pj-item:hover > .pj-link,
.pj-item.is-open > .pj-link {
  color: #A8834E;
}
.pj-link:focus-visible {
  outline: 2px solid #C9A971;
  outline-offset: 2px;
  border-radius: 6px;
}

/* chevron drawn in CSS so it stays crisp and matches the type weight */
.pj-chev {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
}
.pj-item:hover > .pj-link .pj-chev,
.pj-item.is-open > .pj-link .pj-chev {
  transform: rotate(-135deg);
  margin-top: 2px;
}

/* --- dropdowns --- */
.pj-drop {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 20;
  min-width: 300px;
  padding: 18px;
  border: 1px solid #eceae6;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 26px 50px -28px rgba(13, 22, 32, 0.42);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.28s;
}
/* a hit area across the gap, so the pointer can travel down without closing it */
.pj-has-menu::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  height: 14px;
}
.pj-item:hover > .pj-drop,
.pj-item.is-open > .pj-drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.pj-drop-row {
  display: block;
  padding: 12px 14px;
  border-radius: 10px;
  text-decoration: none !important;
  transition: background 0.25s ease;
}
.pj-drop-row:hover {
  background: #f6f9f9;
}
.pj-drop-code {
  display: block;
  margin-bottom: 3px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #16232F;
}
.pj-drop-desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: #8B8179;
}
.pj-drop-row:hover .pj-drop-code {
  color: #A8834E;
}

.pj-drop-plain {
  min-width: 258px;
}
.pj-drop-link {
  display: block;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: #4A443F;
  text-decoration: none !important;
  transition: background 0.25s ease, color 0.25s ease;
}
.pj-drop-link:hover {
  background: #f6f9f9;
  color: #A8834E !important;
}

.pj-drop-rule {
  display: block;
  height: 1px;
  margin: 12px 14px;
  background: #eceae6;
}
.pj-drop-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px 2px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #16232F;
  text-decoration: none !important;
  transition: color 0.25s ease;
}
.pj-drop-more:hover {
  color: #A8834E !important;
}

/* small CSS arrow used on the CTA and the "explore" links */
.pj-arrow {
  position: relative;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pj-arrow::after {
  content: "";
  position: absolute;
  top: -2.5px;
  right: 0;
  width: 6px;
  height: 6px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}
.pj-drop-more:hover .pj-arrow,
.pj-cta:hover .pj-arrow {
  transform: translateX(4px);
}

/* --- destinations mega menu --- */
.pj-has-mega {
  position: static;
}
.pj-mega {
  left: 50%;
  width: 620px;
  transform: translate(-50%, -6px);
  padding: 24px 22px 18px;
}
.pj-item:hover > .pj-mega,
.pj-item.is-open > .pj-mega {
  transform: translate(-50%, 0);
}
.pj-mega-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 26px;
}
.pj-mega-head {
  display: block;
  margin: 0 0 8px 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eceae6;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A8834E;
}

/* --- primary CTA --- */
.pj-cta {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-left: 6px;
  padding: 12px 18px;
  border-radius: 9px;
  background: #16232F;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.pj-cta:hover {
  background: #12395F;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 12px 22px -14px rgba(22, 35, 47, 0.8);
}

/* --- burger (hidden on desktop) --- */
.pj-burger {
  display: none;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid #e6e5e1;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
}
.pj-burger span {
  display: block;
  width: 17px;
  height: 1.6px;
  margin: 3.6px auto;
  background: #16232F;
  transition: transform 0.3s ease, opacity 0.2s ease;
}
.pj-burger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(5.2px) rotate(45deg);
}
.pj-burger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.pj-burger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-5.2px) rotate(-45deg);
}

/* --- mobile panel --- */
.pj-scrim {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1035;
  background: rgba(12, 20, 29, 0.45);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.pj-scrim.is-open {
  opacity: 1;
}
.pj-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1040;
  width: min(400px, 88vw);
  padding: 84px 22px 32px;
  overflow-y: auto;
  background: #fffdfb;
  box-shadow: -20px 0 46px -30px rgba(13, 22, 32, 0.6);
  transform: translateX(100%);
  transition: transform 0.36s cubic-bezier(0.22, 1, 0.36, 1);
}
.pj-panel.is-open {
  transform: none;
}
.pj-panel-menu {
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.pj-panel-menu > li {
  display: block;
  border-bottom: 1px solid #ecebe8;
}
.pj-acc-head,
.pj-panel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 15px 2px;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #16232F;
  text-align: left;
  text-decoration: none !important;
  cursor: pointer;
}
.pj-plus {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
}
.pj-plus::before,
.pj-plus::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 1.6px;
  background: #16232F;
  transition: transform 0.3s ease;
}
.pj-plus::after {
  transform: rotate(90deg);
}
.pj-acc-head[aria-expanded="true"] .pj-plus::after {
  transform: rotate(0deg);
}
.pj-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.pj-acc.is-open .pj-acc-body {
  grid-template-rows: 1fr;
}
.pj-acc-body > * {
  min-height: 0;
}
.pj-acc-body a {
  display: block;
  padding: 9px 2px 9px 14px;
  font-size: 13.5px;
  color: #55504B;
  text-decoration: none !important;
}
.pj-acc-body a:first-of-type {
  padding-top: 2px;
}
.pj-acc-body a:last-child {
  padding-bottom: 16px;
}
.pj-acc-body a:hover {
  color: #A8834E !important;
}
.pj-acc-sub {
  display: block;
  padding: 12px 2px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #A8834E;
}
.pj-panel-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #16232F;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
  text-decoration: none !important;
}
.pj-panel-call {
  display: block;
  margin-top: 14px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #16232F;
  text-decoration: none !important;
}

/* --- mobile sticky action bar --- */
.pj-actions {
  display: none;
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1025;
  border-top: 1px solid #ecebe8;
  background: #fffdfb;
}
.pj-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  padding: 13px 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none !important;
}
.pj-actions .pj-wa {
  color: #16232F;
  border-right: 1px solid #ecebe8;
}
.pj-actions .pj-wa i {
  font-size: 16px;
  color: #25D366;
}
.pj-actions .pj-enq {
  background: #16232F;
  color: #fff;
}

/* --- responsive --- */
@media (max-width: 1399px) {
  .pj-link {
    padding: 10px 10px;
    font-size: 13px;
  }
  .pj-inner {
    gap: 18px;
  }
}

@media (max-width: 1199px) {
  .pj-link {
    padding: 10px 8px;
    font-size: 12px;
    letter-spacing: 0.04em;
  }
  .pj-cta {
    padding: 11px 14px;
    font-size: 13px;
  }
  .pj-logo img {
    height: 40px;
  }
}

/* Below this the row would be squeezed, so the whole desktop nav is
   replaced rather than compressed. */
@media (max-width: 991px) {
  .has-pj-header {
    padding-top: 68px;
    padding-bottom: 52px;
  }
  .pj-header,
  .pj-inner,
  .pj-header.is-stuck,
  .pj-header.is-stuck .pj-inner {
    height: 68px;
  }
  .pj-mainnav,
  .pj-cta {
    display: none;
  }
  .pj-inner {
    justify-content: space-between;
    gap: 12px;
  }
  .pj-burger {
    display: block;
  }
  .pj-logo img,
  .pj-header.is-stuck .pj-logo img {
    height: 38px;
  }
  .pj-actions {
    display: flex;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pj-header,
  .pj-inner,
  .pj-drop,
  .pj-panel,
  .pj-scrim,
  .pj-acc-body {
    transition-duration: 0.01ms;
  }
}

/* grid-template-rows: 0fr only collapses the FIRST implicit row, so with the
   links as direct children every item after the first stayed visible. One
   inner wrapper gives the grid a single row to collapse. */
.pj-acc-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.pj-acc.is-open .pj-acc-body {
  grid-template-rows: 1fr;
}
.pj-acc-inner {
  min-height: 0;
  overflow: hidden;
}

/* --- topbar marquee back inside the sticky header --- */
.pj-header {
  height: auto;
}
.pj-header .header-content {
  overflow: hidden;
  max-height: 40px;
  transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;
}
/* on scroll the strip folds away so the sticky bar stays compact */
.pj-header.is-stuck .header-content {
  max-height: 0;
  opacity: 0;
}
.pj-header.is-stuck {
  height: auto;
}
.has-pj-header {
  padding-top: 120px;
}

/* nav sits closer to the logo instead of floating in the middle */
.pj-menu {
  justify-content: flex-start;
}
.pj-mainnav {
  flex: 1 1 auto;
  padding-left: 6px;
}

@media (max-width: 991px) {
  .pj-header .header-content {
    display: none;
  }
  .has-pj-header {
    padding-top: 68px;
    padding-bottom: 52px;
  }
}

/* The marquee rules were all scoped to .main_header_area .header-content,
   which the new header does not use, so nothing applied. Re-scoped here and
   toned to navy so the strip sits under a warm-white nav without shouting. */
.pj-header .header-content {
  background: #16232F !important;
}
.pj-header .header-content .container {
  min-height: 38px;
}
.pj-header .topbar-marquee {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.pj-header .topbar-marquee-track {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  will-change: transform;
  animation: topbar-marquee-scroll 52s linear infinite;
}
.pj-header .topbar-marquee:hover .topbar-marquee-track {
  animation-play-state: paused;
}
.pj-header .tm-item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  line-height: 38px;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
}
.pj-header .tm-item i {
  margin-right: 8px;
  font-size: 13px;
  color: #C9A971;
}
.pj-header .tm-sep {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  margin: 0 22px;
  border-radius: 50%;
  background: rgba(201, 169, 113, 0.6);
}

/* ==========================================================
   India destinations page
   ========================================================== */
.in-hero {
  position: relative;
  padding: 34px 0 62px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.in-hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(102deg, rgba(1, 18, 34, 0.9) 0%, rgba(12, 20, 29, 0.72) 44%, rgba(13, 22, 32, 0.3) 78%, rgba(13, 22, 32, 0.14) 100%);
}
.in-hero .container {
  position: relative;
  z-index: 2;
}
.in-hero .breadcrumb {
  margin: 0 0 34px;
  padding: 0;
  background: none;
}
.in-hero .breadcrumb li,
.in-hero .breadcrumb li a {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.in-hero .breadcrumb li a:hover {
  color: #C9A971;
}
.in-hero-inner {
  max-width: 660px;
}
.in-hero-title {
  margin-bottom: 14px;
  font-size: 46px;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
}
.in-hero-text {
  max-width: 56ch;
  margin-bottom: 26px;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.85);
}
.in-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}
.in-hero-actions .nir-btn i {
  margin-left: 8px;
  font-size: 10px;
}
.in-hero-link {
  display: inline-flex;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none !important;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.in-hero-link i {
  margin-left: 9px;
  font-size: 10px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.in-hero-link:hover {
  border-bottom-color: #C9A971;
  color: #C9A971 !important;
}
.in-hero-link:hover i {
  transform: translateX(4px);
}

/* --- intro --- */
.in-intro {
  background: #fff;
}
.in-intro h2 {
  font-size: 31px;
  line-height: 1.2;
}
.in-intro-text {
  font-size: 15px;
  line-height: 1.78;
  color: #6E665F;
}

/* --- destination discovery --- */
.in-dest {
  background: #f8f8f6;
}
.in-dest-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.in-dest-head h2 {
  font-size: 30px;
}
.in-search {
  position: relative;
  flex: 0 0 300px;
}
.in-search i {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  font-size: 14px;
  color: #9A9188;
}
.in-search input {
  width: 100%;
  height: 46px;
  padding: 0 16px 0 40px;
  border: 1px solid #e3e2de;
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  color: #333;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.in-search input:focus {
  outline: none;
  border-color: #A8834E;
  box-shadow: 0 0 0 3px rgba(168, 131, 78, 0.12);
}
.in-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 28px;
}

.id-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.id-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ecebe8;
  text-decoration: none !important;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s ease, border-color 0.42s ease;
}
.id-card[hidden] {
  display: none;
}
.id-card:hover,
.id-card:focus-visible {
  transform: translateY(-4px);
  border-color: #dce9e8;
  box-shadow: 0 26px 44px -28px rgba(13, 22, 32, 0.45);
}
.id-media {
  position: relative;
  display: block;
  height: 186px;
  overflow: hidden;
}
.id-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.004);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.id-card:hover .id-media img {
  transform: scale(1.07);
}
.id-veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(11, 18, 26, 0.5) 0%, rgba(12, 20, 29, 0.12) 45%, rgba(13, 22, 32, 0) 75%);
  transition: opacity 0.42s ease;
}
.id-card:hover .id-veil {
  opacity: 1.35;
}
.id-region {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 11px;
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #16232F;
}
.id-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 16px 14px;
}
.id-name {
  margin: 0 0 5px;
  font-size: 18px;
  line-height: 1.24;
  color: #16232F;
}
.id-desc {
  display: block;
  flex: 1;
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #8B8179;
}
.id-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #f0efec;
}
.id-count {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A8834E;
}
.id-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border: 1px solid #e3e2de;
  border-radius: 50%;
  color: #16232F;
  font-size: 9px;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.id-card:hover .id-arrow {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff;
  transform: translateX(3px);
}
.in-more {
  margin-top: 28px;
  text-align: center;
}
.in-more .nir-btn i {
  margin-left: 8px;
  font-size: 10px;
}

/* --- featured journeys --- */
.in-journeys {
  background: #fff;
}
.ij-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.ij-card {
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #ecebe8;
  text-decoration: none !important;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.42s ease, border-color 0.42s ease;
}
.ij-card:hover {
  transform: translateY(-4px);
  border-color: #dce9e8;
  box-shadow: 0 26px 44px -28px rgba(13, 22, 32, 0.45);
}
.ij-media {
  position: relative;
  display: block;
  height: 180px;
  overflow: hidden;
}
.ij-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.004);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ij-card:hover .ij-media img {
  transform: scale(1.06);
}
.ij-veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to top, rgba(11, 18, 26, 0.78) 0%, rgba(12, 20, 29, 0.2) 46%, rgba(13, 22, 32, 0) 78%);
}
.ij-dur {
  position: absolute;
  bottom: 12px;
  left: 13px;
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
}
.ij-dur i {
  margin-right: 6px;
  font-size: 12px;
  color: #C9A971;
}
.ij-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 17px 17px 15px;
}
.ij-name {
  margin: 0 0 5px;
  font-size: 18px;
  line-height: 1.24;
  color: #16232F;
}
.ij-route {
  display: block;
  margin-bottom: 9px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #A8834E;
}
.ij-note {
  display: block;
  flex: 1;
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: #8B8179;
}
.ij-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid #f0efec;
}
.ij-price {
  display: block;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  color: #16232F;
}
.ij-price em {
  font-style: normal;
  font-size: 11px;
  font-weight: 500;
  color: #9A9188;
}
.ij-from {
  display: block;
  margin-bottom: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9A9188;
}
.ij-cta {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #A8834E;
  white-space: nowrap;
}
.ij-cta i {
  margin-left: 6px;
  font-size: 9px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ij-card:hover .ij-cta i {
  transform: translateX(4px);
}
.in-journeys .jr-note {
  margin: 22px 0 24px;
}

/* --- by experience --- */
.in-exp {
  background: #f8f8f6;
}
.ie-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.ie-chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 17px 18px;
  border: 1px solid #e6e5e1;
  border-radius: 12px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #16232F;
  text-decoration: none !important;
  transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.ie-chip i {
  font-size: 10px;
  color: #A8834E;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.ie-chip:hover {
  border-color: #A8834E;
  background: #fff;
  color: #16232F !important;
  transform: translateY(-3px);
}
.ie-chip:hover i {
  transform: translateX(4px);
}

/* --- why us --- */
.in-why {
  background: #fff;
}
.iw-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.iw-card {
  padding: 26px 24px 24px;
  border: 1px solid #ecebe8;
  border-radius: 14px;
  background: #fdfdfc;
  transition: border-color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.iw-card:hover {
  border-color: #dce9e8;
  transform: translateY(-3px);
}
.iw-num {
  display: block;
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #C9A971;
}
.iw-title {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.25;
  color: #16232F;
}
.iw-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #8B8179;
}

/* --- responsive --- */
@media (max-width: 1199px) {
  .in-hero-title {
    font-size: 38px;
  }
  .id-grid,
  .ij-grid,
  .iw-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .ie-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  .in-intro h2 {
    font-size: 27px;
  }
}

@media (max-width: 991px) {
  .in-hero {
    padding: 26px 0 46px;
  }
  .in-hero-title {
    font-size: 31px;
  }
  .in-dest-head {
    display: block;
  }
  .in-search {
    margin-top: 18px;
    max-width: 100%;
  }
  .id-grid,
  .ij-grid,
  .iw-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ie-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 575px) {
  .in-hero-title {
    font-size: 26px;
  }
  .in-hero-actions .nir-btn {
    width: 100%;
    text-align: center;
  }
  .ij-grid,
  .iw-grid {
    grid-template-columns: 1fr;
  }
  /* two destination cards still fit on a phone and keep the list scannable */
  .id-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .id-media {
    height: 130px;
  }
  .id-name {
    font-size: 15px;
  }
  .id-desc {
    font-size: 11.5px;
  }
  .ie-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================
   GIT departures table + shared bits for the vertical pages
   ========================================================== */
.git-dep {
  background: #f8f8f6;
}
.gd-table {
  border: 1px solid #e6e5e1;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.gd-head,
.gd-row {
  display: grid;
  grid-template-columns: 2.4fr 1.1fr 0.9fr 0.9fr 1fr 46px;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
}
.gd-head {
  background: #fbfbf9;
  border-bottom: 1px solid #e6e5e1;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9A9188;
}
.gd-row {
  border-bottom: 1px solid #f0efec;
  font-size: 13.5px;
  color: #6E665F;
  text-decoration: none !important;
  transition: background 0.25s ease;
}
.gd-row:last-child {
  border-bottom: 0;
}
.gd-row:hover {
  background: #f7fbfb;
}
.gd-journey b {
  display: block;
  font-size: 15px;
  color: #16232F;
}
.gd-journey em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #A8834E;
}
.gd-row b {
  color: #16232F;
}
.gd-seats {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 30px;
  background: rgba(232, 87, 63, 0.1);
  font-size: 11.5px;
  font-weight: 700;
  color: #E8573F;
}
/* labels only surface once the table becomes a stack on small screens */
.gd-lbl {
  display: none;
}
.gd-go {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e3e2de;
  border-radius: 50%;
  color: #16232F;
  font-size: 9px;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease;
}
.gd-row:hover .gd-go {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff;
}

/* included / capability chips that are statements, not links */
.ie-chip.ie-static {
  cursor: default;
}
.ie-chip.ie-static:hover {
  border-color: #e6e5e1;
  transform: none;
}
.ie-chip.ie-static i {
  color: #A8834E;
}
.ie-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}
.git-inc {
  background: #fff;
}

@media (max-width: 1199px) {
  .ie-grid-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 991px) {
  .gd-head {
    display: none;
  }
  /* each departure becomes its own card, with the column labels restored */
  .gd-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
    padding: 18px 18px 16px;
  }
  .gd-journey {
    grid-column: 1 / -1;
  }
  .gd-lbl {
    display: block;
    margin-bottom: 2px;
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #9A9188;
  }
  .gd-go {
    grid-column: 1 / -1;
    justify-self: start;
  }
  .ie-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .ie-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* The vertical pages now use the same centred page banner as About, with a
   short supporting line and the page's primary action kept underneath. */
.pb-text {
  max-width: 62ch;
  margin: 0 auto 18px;
  font-size: 14.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.82);
}
.pb-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 24px;
  margin-top: 22px;
}
.pb-actions .nir-btn i {
  margin-left: 8px;
  font-size: 10px;
}
.pb-link {
  display: inline-flex;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.34);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none !important;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.pb-link i {
  margin-left: 9px;
  font-size: 10px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pb-link:hover {
  border-bottom-color: #C9A971;
  color: #C9A971 !important;
}
.pb-link:hover i {
  transform: translateX(4px);
}
.page-banner .pb-inner .breadcrumb {
  justify-content: center;
}

@media (max-width: 575px) {
  .pb-actions .nir-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* breadcrumb sits above the eyebrow now, so it needs its own spacing */
.pb-inner .breadcrumb {
  margin: 0 0 20px;
}

/* ==========================================================
   Header v3 - simplified nav plus a WhatsApp / call / CTA cluster
   ========================================================== */
.pj-utils {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
}

.pj-wa-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border: 1px solid #e2e5e3;
  border-radius: 50%;
  background: #fff;
  color: #25D366;
  font-size: 18px;
  text-decoration: none !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pj-wa-btn:hover {
  border-color: #25D366;
  background: #25D366;
  color: #fff !important;
  transform: translateY(-2px);
}

.pj-call {
  display: block;
  padding: 2px 0;
  line-height: 1.25;
  text-decoration: none !important;
  white-space: nowrap;
}
.pj-call-lbl {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9A9188;
}
.pj-call-no {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #16232F;
  transition: color 0.25s ease;
}
.pj-call:hover .pj-call-no {
  color: #A8834E;
}

/* the simplified menu has fewer, longer labels - give them room */
.pj-menu {
  gap: 2px;
}
.pj-link {
  padding: 10px 12px;
}

/* mobile panel extras */
.pj-panel-call,
.pj-panel-wa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 12px;
  padding: 12px 16px;
  border: 1px solid #e6e5e1;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #16232F;
  text-decoration: none !important;
}
.pj-panel-call i {
  font-size: 15px;
  color: #A8834E;
}
.pj-panel-wa i {
  font-size: 17px;
  color: #25D366;
}

@media (max-width: 1499px) {
  .pj-link {
    padding: 10px 9px;
    font-size: 12.5px;
  }
  .pj-utils {
    gap: 10px;
  }
}

/* the number is the first thing to fold away when the row tightens */
@media (max-width: 1299px) {
  .pj-call {
    display: none;
  }
}

@media (max-width: 1199px) {
  .pj-link {
    padding: 10px 7px;
    font-size: 11.5px;
    letter-spacing: 0.03em;
  }
  .pj-cta {
    padding: 11px 14px;
    font-size: 12.5px;
  }
}

@media (max-width: 991px) {
  .pj-utils {
    display: none;
  }
}

/* mobile action bar: WhatsApp and a tap-to-call, the two things a phone
   visitor actually wants first */
.pj-actions .pj-enq i {
  margin-right: 2px;
  font-size: 14px;
}

/* Contact is gone from the row, so the nav sits closer to the wordmark and
   the whole bar reads left-anchored rather than logo-then-gap-then-nav. */
.pj-inner {
  gap: 16px;
}
.pj-logo {
  margin-right: 0;
}
.pj-mainnav {
  padding-left: 0;
}


/* Both logo files are now cropped to their artwork (258x100 @2x, no transparent
   border), so every negative-margin compensation can be dropped. The rendered
   wordmark is the same size as before - only the empty pixels are gone. */
.pj-logo,
.pj-header.is-stuck .pj-logo,
.pj-logo img,
.pj-header.is-stuck .pj-logo img,
.sf-logo,
footer .footer-about img {
  margin-left: 0;
}
.sf-logo {
  margin-top: 0;
}

/* Cropping the logo removed 42px of dead width, which pulled the nav in with
   it. This restores proper breathing room between the wordmark and the menu. */
.pj-mainnav {
  padding-left: 40px;
}

@media (max-width: 1399px) {
  .pj-mainnav {
    padding-left: 26px;
  }
}

@media (max-width: 1199px) {
  .pj-mainnav {
    padding-left: 16px;
  }
}

/* ==========================================================
   MICE enquiry popup (mice.html)
   Every "Send Us Your Brief" opens this instead of leaving the page.
   Two short steps, a branded side panel and a success state.
   ========================================================== */
/* Lock lives on <html>; --mm-sb is the scrollbar width the script measured,
   so the body and the fixed header keep their width when the bar goes. */
html.mm-lock,
html.mm-lock body {
  overflow: hidden;
}
html.mm-lock body,
html.mm-lock .pj-header {
  padding-right: var(--mm-sb, 0px);
}

.mm-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(12, 20, 29, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.mm-overlay[hidden] {
  display: none !important;
}
.mm-overlay.is-open {
  opacity: 1;
}

.mm-dialog {
  position: relative;
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  width: 100%;
  max-width: 920px;
  margin: auto;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 40px 80px -30px rgba(12, 20, 29, 0.65);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mm-overlay.is-open .mm-dialog {
  transform: none;
}

/* --- close --- */
.mm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #E2D9CD;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.mm-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background: #16232F;
  transform: translate(-50%, -50%) rotate(45deg);
}
.mm-close span + span {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.mm-close:hover {
  background: #f3f6f9;
  border-color: #D5CABA;
  transform: rotate(90deg);
}
.mm-close:focus-visible {
  outline: 3px solid #C9A971;
  outline-offset: 2px;
}

/* --- brand side panel --- */
.mm-side {
  position: relative;
  overflow: hidden;
  border-radius: 20px 0 0 20px;
  padding: 40px 34px 34px;
  background-color: #16232F;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.mm-side::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(22, 35, 47, 0.4) 0%, rgba(12, 20, 29, 0.88) 100%);
}
.mm-side-in {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mm-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C9A971;
}
.mm-title {
  margin: 12px 0 10px;
  font-size: 27px;
  line-height: 1.2;
  color: #fff;
}
.mm-sub {
  margin-bottom: 22px;
  font-size: 14px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
}
.mm-points {
  list-style: none;
  margin: 0 0 auto;
  padding: 0;
}
.mm-points li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 11px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.mm-points i {
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: rgba(201, 169, 113, 0.18);
  color: #C9A971;
  font-size: 10px;
}
.mm-alt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.65);
}
.mm-alt a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  transition: color 0.2s ease;
}
.mm-alt a:hover {
  color: #C9A971;
}

/* --- form panel --- */
.mm-main {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 580px;
  padding: 34px 36px 30px;
}
#mm-form {
  display: flex;
  flex: 1;
  flex-direction: column;
}
#mm-form[hidden] {
  display: none;
}

.mm-steps {
  display: flex;
  align-items: center;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}
.mm-steps li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  font-weight: 600;
  color: #9A9188;
  transition: color 0.25s ease;
}
.mm-steps li + li::before {
  content: "";
  width: 44px;
  height: 1px;
  margin: 0 14px;
  background: #E2D9CD;
}
.mm-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid #dfe5eb;
  border-radius: 50%;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  color: #9A9188;
  transition: all 0.25s ease;
}
.mm-steps li.is-current {
  color: #16232F;
}
.mm-steps li.is-current .mm-step-n {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(168, 131, 78, 0.14);
}
.mm-steps li.is-done .mm-step-n {
  border-color: #A8834E;
  color: #A8834E;
  font-size: 0;
}
.mm-steps li.is-done .mm-step-n::before {
  content: "\2713";
  font-size: 12px;
}

.mm-step {
  display: none;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.mm-step.is-active {
  display: flex;
}
.mm-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.mm-field {
  position: relative;
  min-width: 0;
}
.mm-span2 {
  grid-column: 1 / -1;
}

.mm-main .form-control,
.mm-main .form-select {
  height: auto;
  padding: 11px 14px;
  border: 1px solid #E2D9CD;
  border-radius: 10px;
  background-color: #FCFAF6;
  font-size: 14px;
  color: #333;
  box-shadow: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.mm-main textarea.form-control {
  min-height: 92px;
  resize: vertical;
}
.mm-main .form-control::placeholder {
  color: #ABA298;
}
.mm-main .form-control:focus,
.mm-main .form-select:focus {
  border-color: #A8834E;
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(168, 131, 78, 0.12);
}
.mm-main .form-control.is-invalid,
.mm-main .form-select.is-invalid {
  border-color: #d9534f;
  background-color: #fff;
  background-image: none;
}
.mm-main .form-control.is-invalid:focus,
.mm-main .form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(217, 83, 79, 0.14);
}
.mm-field.has-error .chk-consent span {
  color: #b3382f;
}
.mm-err {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.4;
  color: #d9534f;
}
.mm-err:empty {
  display: none;
}

.mm-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 24px;
}
.mm-hint {
  font-size: 12.5px;
  color: #9A9188;
}
.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 0;
  border-radius: 10px;
  background: #A8834E;
  font-size: 14px;
  font-weight: 600;
  color: #fff !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.mm-btn i {
  font-size: 11px;
}
.mm-btn .fa-whatsapp {
  font-size: 15px;
}
.mm-btn:hover {
  background: #8A6A3D;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(168, 131, 78, 0.9);
}
.mm-btn:focus-visible {
  outline: 3px solid #C9A971;
  outline-offset: 2px;
}
.mm-btn[disabled] {
  opacity: 0.65;
  cursor: progress;
  transform: none;
  box-shadow: none;
}
.mm-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 6px;
  border: 0;
  background: none;
  font-size: 13.5px;
  font-weight: 600;
  color: #4A443F;
  cursor: pointer;
  transition: color 0.2s ease;
}
.mm-back i {
  font-size: 11px;
}
.mm-back:hover {
  color: #16232F;
}
.mm-back:focus-visible {
  outline: 3px solid #C9A971;
  outline-offset: 2px;
  border-radius: 6px;
}

.mm-msg:empty {
  display: none;
}
.mm-msg .alert-error {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(217, 83, 79, 0.3);
  border-radius: 10px;
  background: rgba(217, 83, 79, 0.07);
  font-size: 13.5px;
  color: #b3382f;
}

/* --- success state --- */
.mm-done {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
  text-align: center;
}
.mm-done[hidden] {
  display: none;
}
.mm-done-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: rgba(168, 131, 78, 0.12);
  color: #A8834E;
  font-size: 24px;
  animation: mm-pop 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.mm-done h3 {
  margin-bottom: 8px;
  font-size: 24px;
  color: #16232F;
}
.mm-done p {
  max-width: 380px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #55504B;
}
.mm-actions-center {
  justify-content: center;
  margin-top: 8px;
}
@keyframes mm-pop {
  from {
    transform: scale(0.6);
    opacity: 0;
  }
}

/* --- responsive --- */
@media (max-width: 991px) {
  .mm-dialog {
    grid-template-columns: 290px minmax(0, 1fr);
  }
  .mm-side {
    padding: 34px 26px 28px;
  }
  .mm-main {
    padding: 30px 26px 26px;
  }
}
@media (max-width: 767px) {
  .mm-overlay {
    padding: 0;
    align-items: stretch;
  }
  .mm-dialog {
    display: flex;
    flex-direction: column;
    max-width: none;
    min-height: 100%;
    border-radius: 0;
    transform: translateY(24px);
  }
  .mm-side {
    flex: 0 0 auto;
    border-radius: 0;
    padding: 24px 20px 20px;
  }
  .mm-sub,
  .mm-points,
  .mm-alt {
    display: none;
  }
  .mm-title {
    margin: 8px 40px 0 0;
    font-size: 22px;
  }
  .mm-close {
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
  }
  .mm-main {
    flex: 1;
    min-height: 0;
    padding: 22px 20px 28px;
  }
  .mm-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .mm-steps {
    margin-bottom: 20px;
  }
  .mm-steps li + li::before {
    width: 28px;
  }
}
@media (max-width: 575px) {
  .mm-actions {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 10px;
  }
  .mm-hint {
    text-align: center;
  }
  .mm-back {
    justify-content: center;
  }
  .mm-actions-center {
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mm-overlay,
  .mm-dialog,
  .mm-close,
  .mm-btn {
    transition: none;
  }
  .mm-done-icon {
    animation: none;
  }
}

/* ==========================================================
   Visual rhythm pass
   Breaks up text-only runs with colour panels, imagery and
   heavier icon work. Components are shared across pages.
   ========================================================== */

/* --- trust strip: factual pillars in place of invented numbers --- */
.trust-strip {
  background: #fff;
}
.tr-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  overflow: hidden;
  border: 1px solid #EAE3D9;
  border-radius: 16px;
  background: #FCFAF6;
}
.tr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 18px 26px;
  border-right: 1px solid #EAE3D9;
  text-align: center;
  transition: background 0.3s ease;
}
.tr-item:last-child {
  border-right: 0;
}
.tr-item:hover {
  background: #fff;
}
.tr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 4px;
  border-radius: 14px;
  background: rgba(168, 131, 78, 0.1);
  color: #A8834E;
  font-size: 20px;
}
.tr-label {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #16232F;
}
.tr-sub {
  font-size: 12.5px;
  line-height: 1.45;
  color: #7d8790;
}
@media (max-width: 991px) {
  .tr-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .tr-item {
    border-bottom: 1px solid #EAE3D9;
  }
  .tr-item:nth-child(3n) {
    border-right: 0;
  }
}
@media (max-width: 575px) {
  .tr-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tr-item:nth-child(3n) {
    border-right: 1px solid #EAE3D9;
  }
  .tr-item:nth-child(2n) {
    border-right: 0;
  }
  .tr-item {
    padding: 22px 12px 20px;
  }
}

/* --- proof panel: dark section with glass tiles --- */
.proof-panel {
  position: relative;
  overflow: hidden;
  padding: 84px 0;
  background-color: #16232F;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.proof-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(22, 35, 47, 0.55) 0%, rgba(12, 20, 29, 0.92) 100%);
}
.proof-panel .container {
  position: relative;
}
.proof-panel .section-eyebrow {
  color: #C9A971;
}
.proof-panel h2 {
  color: #fff;
}
.proof-panel .theme {
  color: #C9A971 !important;
}
.proof-panel .section-title p {
  color: rgba(255, 255, 255, 0.72);
}
.pp-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.pp-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}
.pp-grid-5 {
  grid-template-columns: repeat(5, 1fr);
}
.pp-tile {
  position: relative;
  padding: 26px 22px 24px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.4s ease, border-color 0.4s ease;
}
.pp-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 113, 0.55);
  background: rgba(255, 255, 255, 0.1);
}
.pp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: rgba(201, 169, 113, 0.16);
  color: #C9A971;
  font-size: 19px;
}
.pp-num {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.35);
}
.pp-title {
  margin: 0 0 6px;
  font-size: 16px;
  line-height: 1.3;
  color: #fff;
}
.pp-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 1199px) {
  .pp-grid,
  .pp-grid-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 767px) {
  .proof-panel {
    padding: 64px 0;
  }
  .pp-grid,
  .pp-grid-3,
  .pp-grid-5 {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .pp-grid,
  .pp-grid-3,
  .pp-grid-5 {
    grid-template-columns: 1fr;
  }
}

/* --- split list: image beside a numbered list --- */
.split-list {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.split-list.is-flip .sl-media {
  order: 2;
}
.sl-media {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  aspect-ratio: 4 / 5;
  max-height: 540px;
}
.sl-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.sl-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 20, 29, 0) 50%, rgba(12, 20, 29, 0.55) 100%);
}
.sl-cap {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  color: #16232F;
}
.sl-cap i {
  flex: 0 0 auto;
  font-size: 15px;
  color: #A8834E;
}
.sl-head {
  margin-bottom: 22px;
}
.sl-head p {
  color: #6E665F;
}
.sl-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sl-item {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid #E5DDD2;
}
.sl-item:first-child {
  padding-top: 0;
  border-top: 0;
}
.sl-item:last-child {
  padding-bottom: 0;
}
.sl-num {
  padding-top: 2px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #A8834E;
}
.sl-title {
  margin: 0 0 4px;
  font-size: 17px;
  line-height: 1.3;
  color: #16232F;
}
.sl-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #55504B;
}
.sl-cta {
  margin-top: 26px;
}
@media (max-width: 991px) {
  .split-list {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .split-list.is-flip .sl-media {
    order: 0;
  }
  .sl-media {
    aspect-ratio: 16 / 10;
    max-height: none;
  }
}

/* --- bento: mission / vision / values --- */
.bento-mv {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 18px;
}
.bt-tile {
  position: relative;
  overflow: hidden;
  padding: 34px 32px;
  border-radius: 18px;
}
.bt-mission {
  grid-row: 1 / span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 460px;
  background-color: #16232F;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.bt-mission::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 35, 47, 0.15) 0%, rgba(12, 20, 29, 0.92) 100%);
}
.bt-mission > * {
  position: relative;
}
.bt-vision {
  background: #A8834E;
  color: #fff;
}
.bt-values {
  border: 1px solid #E5DDD2;
  background: #fff;
}
.bt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin-bottom: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 20px;
}
.bt-values .bt-icon {
  background: rgba(168, 131, 78, 0.1);
  color: #A8834E;
}
.bt-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C9A971;
}
.bt-vision .bt-kicker {
  color: rgba(255, 255, 255, 0.8);
}
.bt-values .bt-kicker {
  color: #A8834E;
}
.bt-title {
  margin: 0 0 12px;
  font-size: 23px;
  line-height: 1.25;
  color: inherit;
}
.bt-mission .bt-title {
  font-size: 30px;
}
.bt-values .bt-title {
  color: #16232F;
}
.bt-text {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.84);
}
.bt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.bt-chips li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border: 1px solid rgba(168, 131, 78, 0.22);
  border-radius: 30px;
  background: rgba(168, 131, 78, 0.07);
  font-size: 13px;
  font-weight: 600;
  color: #16232F;
}
.bt-chips i {
  font-size: 11px;
  color: #A8834E;
}
@media (max-width: 991px) {
  .bento-mv {
    grid-template-columns: 1fr;
  }
  .bt-mission {
    grid-row: auto;
    min-height: 380px;
  }
}
@media (max-width: 575px) {
  .bt-tile {
    padding: 26px 22px;
  }
  .bt-mission .bt-title {
    font-size: 26px;
  }
}

/* --- desk cards with imagery --- */
.dk-card.has-media {
  padding: 0;
  overflow: hidden;
}
.dk-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.dk-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.dk-card:hover .dk-media img {
  transform: scale(1.05);
}
/* The badge sits in the body and pulls up over the image edge, so the media
   box can keep overflow hidden for the hover zoom without clipping it. */
.dk-card.has-media .dk-icon {
  position: relative;
  z-index: 1;
  width: 46px;
  height: 46px;
  margin: -23px 0 14px;
  border: 1px solid #E5DDD2;
  background: #fff;
  color: #A8834E;
  box-shadow: 0 10px 22px -12px rgba(12, 20, 29, 0.55);
}
.dk-card.has-media .dk-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 22px 22px;
}

/* --- capability chips: icon bubble on the left --- */
.ie-chip {
  justify-content: flex-start;
  padding: 13px 16px 13px 13px;
}
.ie-chip i {
  order: -1;
  display: inline-flex;
  flex: 0 0 38px;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: rgba(168, 131, 78, 0.1);
  font-size: 15px;
  transition: background 0.3s ease, color 0.3s ease;
}
.ie-chip:hover i {
  transform: none;
  background: #A8834E;
  color: #fff;
}

/* --- intro fact tiles (were a plain tick list) --- */
.fi-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.fi-points li {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 14px;
  border: 1px solid #E5DDD2;
  border-radius: 12px;
  background: #F8F5F0;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.45;
  color: #2e3a46;
}
.fi-points li i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(168, 131, 78, 0.25);
  border-radius: 9px;
  background: #fff;
  color: #A8834E;
  font-size: 13px;
}
@media (max-width: 575px) {
  .fi-points {
    grid-template-columns: 1fr;
  }
  .fi-points li {
    flex-direction: row;
    align-items: center;
  }
}

/* --- process markers: heavier, with a soft ring --- */
.pr-step {
  padding-top: 82px;
}
.pr-marker {
  width: 62px;
  height: 62px;
  border-color: rgba(168, 131, 78, 0.25);
  background: #fff;
  color: #A8834E;
  font-size: 22px;
  box-shadow: 0 12px 26px -16px rgba(12, 20, 29, 0.5), 0 0 0 6px rgba(168, 131, 78, 0.06);
}
.pr-step.is-in .pr-marker {
  border-color: #A8834E;
  box-shadow: 0 12px 26px -16px rgba(12, 20, 29, 0.5), 0 0 0 6px rgba(168, 131, 78, 0.12);
}

/* --- philosophy icons --- */
.ph-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: rgba(168, 131, 78, 0.1);
  color: #A8834E;
  font-size: 18px;
}

/* Anchor targets clear the fixed header. */
section[id] {
  scroll-margin-top: 96px;
}

/* Any icon FontAwesome swaps for an SVG gets the same bubble as the font icons. */
.ie-chip svg {
  order: -1;
  flex: 0 0 38px;
  box-sizing: border-box;
  width: 38px;
  height: 38px;
  padding: 11px;
  border-radius: 11px;
  background: rgba(168, 131, 78, 0.1);
  color: #A8834E;
}

/* Photo banners need a touch more shade than the SVG art for the headline. */
.page-banner-photo::before {
  background: linear-gradient(180deg, rgba(11, 18, 26, 0.74) 0%, rgba(12, 20, 29, 0.68) 55%, rgba(12, 20, 29, 0.86) 100%);
}
.page-banner-photo .pb-title,
.page-banner-photo .pb-text {
  text-shadow: 0 2px 14px rgba(11, 18, 26, 0.55);
}

/* ==========================================================
   MICE closing CTA (mice.html)
   Photo-backed split: copy and buttons on the left, a glass
   "what you get back" card with direct contact on the right.
   ========================================================== */
.mice-cta {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #0B121A;
  background-size: cover;
  background-position: center 40%;
  color: #fff;
}
.mice-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(11, 18, 26, 0.97) 0%, rgba(12, 20, 29, 0.9) 42%, rgba(12, 20, 29, 0.6) 100%);
}
.mice-cta .container {
  position: relative;
  z-index: 1;
}
.mc-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
}
.mc-title {
  margin: 0 0 16px;
  font-size: 38px;
  line-height: 1.18;
  color: #fff;
}
.mc-title .theme {
  color: #C9A971 !important;
}
.mc-text {
  max-width: 52ch;
  margin: 0 0 28px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}
.mc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-bottom: 30px;
}
.mc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 12px;
  background: #A8834E;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 18px 36px -18px rgba(168, 131, 78, 0.95);
  transition: background 0.25s ease, transform 0.25s ease;
}
.mc-btn i {
  font-size: 11px;
}
.mc-btn:hover {
  background: #8A6A3D;
  transform: translateY(-2px);
}
.mc-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.mc-ghost i {
  font-size: 10px;
}
.mc-ghost:hover {
  border-color: #C9A971;
  color: #C9A971 !important;
}
.mc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mc-facts li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.mc-facts i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: rgba(201, 169, 113, 0.14);
  color: #C9A971;
  font-size: 12px;
}

.mc-card {
  position: relative;
  padding: 30px 30px 26px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.65);
}
.mc-card-kicker {
  display: block;
  margin-bottom: 18px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C9A971;
}
.mc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.mc-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.mc-list li:first-child {
  padding-top: 0;
  border-top: 0;
}
.mc-n {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #C9A971;
}
.mc-list b {
  display: block;
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.mc-list div > span {
  display: block;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}
.mc-talk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.mc-talk a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: #fff !important;
  text-decoration: none !important;
  transition: color 0.2s ease;
}
.mc-talk a:hover {
  color: #C9A971 !important;
}
.mc-talk i {
  color: #C9A971;
}

@media (max-width: 991px) {
  .mice-cta {
    padding: 72px 0;
  }
  .mice-cta::before {
    background: linear-gradient(180deg, rgba(11, 18, 26, 0.93) 0%, rgba(12, 20, 29, 0.9) 100%);
  }
  .mc-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .mc-title {
    font-size: 32px;
  }
}
@media (max-width: 575px) {
  .mice-cta {
    padding: 60px 0;
  }
  .mc-title {
    font-size: 27px;
  }
  .mc-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .mc-btn {
    justify-content: center;
  }
  .mc-ghost {
    justify-content: center;
    border-bottom: 0;
  }
  .mc-card {
    padding: 24px 20px 20px;
  }
}

/* ==========================================================
   MICE page pass 2
   Format cards as media objects (photos at natural size), the
   brief photo in a narrower frame, MICE destinations, FAQ,
   scroll reveals, hero entrance and the footer list fix.
   ========================================================== */

/* --- footer: links were running together because of the template's
       inline-block list items --- */
.sf-links li,
.sf-contact li,
.sf-legal li {
  display: block;
}
.sf-contact li {
  display: flex;
}
.sf-legal li {
  display: inline-block;
}

/* --- brief: narrower frame so the 432px photo is never upscaled --- */
.mice-brief .split-list {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
}
.mice-brief .sl-media {
  max-height: 560px;
}
@media (max-width: 991px) {
  .mice-brief .split-list {
    grid-template-columns: 1fr;
  }
  .mice-brief .sl-media {
    max-width: 432px;
    margin: 0 auto;
    aspect-ratio: 4 / 5;
  }
}

/* --- MICE destinations: chips that open the popup prefilled --- */
.mice-dest {
  background: #fff;
}
.md-group + .md-group {
  margin-top: 26px;
}
.md-label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A6A3D;
}
.md-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #E5DDD2;
}
.md-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.md-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 16px 11px 13px;
  border: 1px solid #E2D9CD;
  border-radius: 30px;
  background: #FCFAF6;
  font-size: 13.5px;
  font-weight: 600;
  color: #16232F;
  text-decoration: none !important;
  cursor: pointer;
  transition: border-color 0.3s ease, background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.md-chip i {
  font-size: 12px;
  color: #A8834E;
  transition: color 0.3s ease;
}
.md-chip:hover {
  transform: translateY(-2px);
  border-color: #A8834E;
  background: #A8834E;
  color: #fff;
}
.md-chip:hover i {
  color: #fff;
}
.md-note {
  margin: 22px 0 0;
  font-size: 13px;
  color: #9A9188;
}

/* --- FAQ accordion --- */
.mice-faq {
  background: #F8F5F0;
}
.faq-list {
  max-width: 860px;
  margin: 0 auto;
}
.faq-item {
  border: 1px solid #E5DDD2;
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq-item + .faq-item {
  margin-top: 10px;
}
.faq-item.is-open {
  border-color: #DFCFAF;
  box-shadow: 0 20px 40px -30px rgba(22, 35, 47, 0.4);
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: none;
  text-align: left;
  font-size: 15.5px;
  font-weight: 600;
  color: #16232F;
  cursor: pointer;
}
.faq-q:focus-visible {
  outline: 3px solid #C9A971;
  outline-offset: 2px;
  border-radius: 14px;
}
.faq-ico {
  position: relative;
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(168, 131, 78, 0.1);
  transition: background 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-ico::before,
.faq-ico::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: #A8834E;
  transform: translate(-50%, -50%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.faq-ico::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.faq-item.is-open .faq-ico {
  background: #A8834E;
}
.faq-item.is-open .faq-ico::before,
.faq-item.is-open .faq-ico::after {
  background: #fff;
}
.faq-item.is-open .faq-ico::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-item.is-open .faq-a {
  grid-template-rows: 1fr;
}
.faq-a-inner {
  overflow: hidden;
}
.faq-a p {
  margin: 0;
  padding: 0 20px 20px 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: #55504B;
}

/* --- scroll reveals (generic; opt in with data-reveal) --- */
/* Stagger children are hidden by CSS from first paint, not only once the
   script tags them, so they never flash visible and then fade out. */
html.js-reveal [data-reveal],
html.js-reveal [data-reveal-stagger] > * {
  transition: opacity 0.75s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
html.js-reveal [data-reveal]:not(.is-in),
html.js-reveal [data-reveal-stagger] > :not(.is-in) {
  opacity: 0;
  transform: translateY(26px);
}
html.js-reveal [data-reveal="left"]:not(.is-in) {
  transform: translateX(-24px);
}
html.js-reveal [data-reveal="right"]:not(.is-in) {
  transform: translateX(24px);
}
html.js-reveal [data-reveal="zoom"]:not(.is-in) {
  transform: scale(0.94);
}
/* Once revealed only opacity is pinned. The transform is left to the
   component, so hover lifts and tilts keep working. The transition list
   covers what cards animate on hover; js/reveal.js clears the stagger
   delay once the entrance has played. */
html.js-reveal [data-reveal].is-in,
[data-reveal].is-in {
  opacity: 1;
  transition: opacity 0.75s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, background-color 0.4s ease, color 0.3s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
html.js-reveal.no-reveal [data-reveal],
html.no-reveal [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* --- hero entrance --- */
@keyframes pb-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.page-banner .pb-inner > * {
  animation: pb-rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.page-banner .pb-inner > :nth-child(1) { animation-delay: 0.05s; }
.page-banner .pb-inner > :nth-child(2) { animation-delay: 0.15s; }
.page-banner .pb-inner > :nth-child(3) { animation-delay: 0.25s; }
.page-banner .pb-inner > :nth-child(4) { animation-delay: 0.35s; }
.page-banner .pb-inner > :nth-child(5) { animation-delay: 0.45s; }

@media (prefers-reduced-motion: reduce) {
  html.js-reveal [data-reveal],
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .page-banner .pb-inner > * {
    animation: none;
  }
  .faq-a,
  .faq-ico,
  .faq-ico::before,
  .faq-ico::after {
    transition: none;
  }
}

/* ==========================================================
   Header: seven menu items (Holidays restored) must sit on one row
   at every desktop width. The phone number folds away first.
   ========================================================== */
@media (min-width: 1400px) {
  .pj-mainnav {
    padding-left: 28px;
  }
  .pj-menu {
    gap: 2px;
  }
}
@media (max-width: 1399px) {
  .pj-call {
    display: none;
  }
}
@media (max-width: 1199px) {
  .pj-mainnav {
    padding-left: 12px;
  }
  .pj-link {
    padding: 10px 6px;
  }
  .pj-utils {
    gap: 8px;
  }
}

/* ==========================================================
   MICE destinations - small square flip cards, six across.
   Front: tile and name. Back: why it works for groups + CTA.
   ========================================================== */
.mfc-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}
.mfc {
  display: block;
  aspect-ratio: 1 / 1;
  perspective: 1200px;
  color: #fff;
  text-decoration: none !important;
}
.mfc:focus-visible {
  outline: 3px solid #C9A971;
  outline-offset: 4px;
  border-radius: 16px;
}
.mfc-in {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.mfc:hover .mfc-in,
.mfc:focus-visible .mfc-in,
.mfc.is-flipped .mfc-in {
  transform: rotateY(180deg);
}
.mfc-face {
  position: absolute;
  inset: 0;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.mfc-front {
  background: #16232F;
  box-shadow: 0 16px 30px -22px rgba(12, 20, 29, 0.6);
}
.mfc-front img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mfc-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 18, 26, 0) 45%, rgba(11, 18, 26, 0.85) 100%);
}
.mfc-name {
  position: absolute;
  right: 14px;
  bottom: 12px;
  left: 14px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.mfc-hint {
  position: absolute;
  top: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  font-size: 11px;
  color: #fff;
}
.mfc-back {
  display: flex;
  flex-direction: column;
  padding: 16px 15px 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(160deg, #16232F 0%, #0B121A 100%);
  transform: rotateY(180deg);
  box-shadow: 0 16px 30px -22px rgba(12, 20, 29, 0.6);
}
.mfc-tag {
  margin-bottom: 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #C9A971;
}
.mfc-back-name {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}
.mfc-why {
  flex: 1;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
}
.mfc-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #C9A971;
}
.mfc-cta i {
  font-size: 9px;
}
.md-more {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.md-more-lbl {
  margin-right: 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9A9188;
}
.md-group-intl {
  margin-top: 36px;
}
@media (max-width: 1399px) {
  .mfc-back {
    padding: 13px 12px 11px;
  }
  .mfc-why {
    font-size: 11.5px;
  }
  .mfc-tag {
    margin-bottom: 6px;
  }
}
@media (max-width: 1199px) {
  .mfc-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .mfc-back {
    padding: 18px 18px 16px;
  }
  .mfc-why {
    font-size: 13px;
  }
}
@media (max-width: 575px) {
  .mfc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .mfc-name {
    right: 11px;
    bottom: 10px;
    left: 11px;
    font-size: 13.5px;
  }
  .md-group-intl {
    margin-top: 28px;
  }
}
/* Touch: no hover to flip, so the front is the card and a tap opens the popup. */
@media (hover: none) {
  .mfc-in {
    transform: none !important;
  }
  .mfc-hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mfc-in {
    transition: none;
  }
}

/* ==========================================================
   MICE closing CTA - photo backdrop with a slow drift, shaded
   left-to-right so the copy sits on near-solid navy and the
   room shows through behind the glass card.
   ========================================================== */
.mice-cta {
  position: relative;
  overflow: hidden;
  padding: 104px 0;
  background: #0B121A;
  color: #fff;
}
.mice-cta::before {
  display: none;
}
.mc-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mc-bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  transform: scale(1.04);
  animation: mc-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes mc-drift {
  from {
    transform: scale(1.04) translateX(0);
  }
  to {
    transform: scale(1.12) translateX(-2%);
  }
}
.mc-shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(100deg, rgba(11, 18, 26, 0.97) 0%, rgba(12, 20, 29, 0.92) 36%, rgba(12, 20, 29, 0.5) 70%, rgba(12, 20, 29, 0.72) 100%),
    linear-gradient(180deg, rgba(11, 18, 26, 0.25) 0%, rgba(11, 18, 26, 0) 30%, rgba(11, 18, 26, 0.4) 100%);
}
.mice-cta .container {
  position: relative;
  z-index: 1;
}
.mc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A971;
}
.mc-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C9A971;
}
.mc-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 113, 0.6);
  animation: mc-pulse 2.2s ease-out infinite;
}
@keyframes mc-pulse {
  from {
    transform: scale(0.6);
    opacity: 1;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}
.mc-title {
  text-shadow: 0 2px 24px rgba(11, 18, 26, 0.6);
}
.mc-card {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(12, 20, 29, 0.42);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
@media (max-width: 991px) {
  .mice-cta {
    padding: 76px 0;
  }
  .mc-shade {
    background:
      linear-gradient(180deg, rgba(11, 18, 26, 0.94) 0%, rgba(12, 20, 29, 0.9) 55%, rgba(12, 20, 29, 0.82) 100%);
  }
}
@media (max-width: 575px) {
  .mice-cta {
    padding: 60px 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mc-bg img,
  .mc-dot::after {
    animation: none;
  }
}

/* Small screens have no side margin to slide into, so left/right reveals
   rise instead. Keeps the page from ever scrolling sideways on a phone. */
@media (max-width: 991px) {
  html.js-reveal [data-reveal="left"]:not(.is-in),
  html.js-reveal [data-reveal="right"]:not(.is-in) {
    transform: translateY(26px);
  }
}

/* ==========================================================
   MICE FAQ - split layout: heading and help card on the left
   (sticky on desktop), numbered accordion on the right.
   ========================================================== */
.mice-faq {
  position: relative;
  background: #F8F5F0;
  background-image: radial-gradient(rgba(22, 35, 47, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.faq-split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  grid-template-rows: auto 1fr;
  column-gap: 60px;
  row-gap: 26px;
  align-items: start;
}
.faq-head {
  grid-column: 1;
  grid-row: 1;
}
.faq-head h2 {
  font-size: 34px;
  line-height: 1.18;
}
.faq-intro {
  max-width: 40ch;
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #6E665F;
}
.faq-list {
  grid-column: 2;
  grid-row: 1 / 3;
  max-width: none;
  margin: 0;
}
.faq-item {
  position: relative;
  border: 1px solid #E5DDD2;
  border-radius: 14px;
  background: #fff;
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.faq-item::before {
  content: "";
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #A8834E;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.faq-item.is-open {
  border-color: #DFCFAF;
  box-shadow: 0 24px 44px -32px rgba(22, 35, 47, 0.45);
}
.faq-item.is-open::before {
  opacity: 1;
}
.faq-item:not(.is-open):hover {
  border-color: #D9C79F;
  transform: translateY(-1px);
}
.faq-q {
  gap: 14px;
  padding: 19px 20px 19px 22px;
}
.faq-n {
  flex: 0 0 auto;
  min-width: 26px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #A8834E;
  transition: color 0.3s ease;
}
.faq-item:not(.is-open) .faq-n {
  color: #9A9188;
}
.faq-qt {
  flex: 1 1 auto;
  min-width: 0;
}
.faq-a p {
  padding: 0 56px 20px 62px;
}

/* help card */
.faq-help {
  grid-column: 1;
  grid-row: 2;
  position: sticky;
  top: 104px;
  padding: 24px 22px 14px;
  border: 1px solid #E5DDD2;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 30px 50px -36px rgba(22, 35, 47, 0.45);
}
.faq-help-kicker {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8A6A3D;
}
.faq-help-text {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6E665F;
}
.faq-help-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 4px;
  border-top: 1px solid #EFE9E0;
  color: inherit;
  text-decoration: none !important;
  transition: padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.faq-help-row:hover {
  padding-left: 8px;
}
.faq-help-row > i:first-child {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(168, 131, 78, 0.1);
  color: #A8834E;
  font-size: 16px;
  transition: background 0.3s ease, color 0.3s ease;
}
.faq-help-row:hover > i:first-child {
  background: #A8834E;
  color: #fff;
}
.faq-help-row > span {
  flex: 1 1 auto;
  min-width: 0;
}
.faq-help-row b {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: #16232F;
}
.faq-help-row em {
  display: block;
  font-size: 12.5px;
  font-style: normal;
  color: #8B8179;
}
.faq-help-go {
  flex: 0 0 auto;
  font-size: 11px;
  color: #B4ACA2;
  transition: color 0.3s ease, transform 0.3s ease;
}
.faq-help-row:hover .faq-help-go {
  color: #A8834E;
  transform: translateX(3px);
}

@media (max-width: 1199px) {
  .faq-split {
    column-gap: 40px;
  }
  .faq-head h2 {
    font-size: 30px;
  }
}
@media (max-width: 991px) {
  .faq-split {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: 22px;
  }
  .faq-head,
  .faq-list,
  .faq-help {
    grid-column: 1;
    grid-row: auto;
  }
  .faq-help {
    position: static;
  }
  .faq-a p {
    padding: 0 20px 20px 62px;
  }
}
@media (max-width: 575px) {
  .faq-head h2 {
    font-size: 26px;
  }
  .faq-q {
    gap: 12px;
    padding: 16px 16px 16px 18px;
    font-size: 14.5px;
  }
  .faq-n {
    min-width: 22px;
  }
  .faq-a p {
    padding: 0 16px 18px 52px;
    font-size: 14px;
  }
}

/* FAQ help rows: the icon sits in a wrapper so the bubble survives
   FontAwesome swapping the <i> for an inline SVG. */
.faq-help-row > .faq-help-ico {
  display: inline-flex;
  flex: 0 0 40px;
  min-width: 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(168, 131, 78, 0.1);
  color: #A8834E;
  font-size: 16px;
  transition: background 0.3s ease, color 0.3s ease;
}
.faq-help-ico svg {
  width: 1em;
  height: 1em;
}
.faq-help-row:hover .faq-help-ico {
  background: #A8834E;
  color: #fff;
}

/* Enquiry popup: brand mark at the top of the side panel (white on navy),
   and in the slim header the panel becomes on phones. */
.mm-logo {
  display: block;
  width: 150px;
  height: 35px;
  margin-bottom: 26px;
}
.mm-logo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
  filter: none;
  opacity: 0.95;
}
@media (max-width: 767px) {
  .mm-logo {
    width: 118px;
    height: 28px;
    margin-bottom: 10px;
  }
  .mm-title {
    margin-top: 2px;
  }
}

/* ==========================================================
   Hero: the colour field is now translucent so each slide's backdrop
   shows through. The MICE slide carries a real photo, so it gets a
   deeper veil behind the headline for contrast.
   ========================================================== */
.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .slide-motion {
  background: linear-gradient(135deg, rgba(1, 30, 56, 0.9) 0%, rgba(22, 35, 47, 0.7) 48%, rgba(4, 82, 127, 0.55) 100%);
}
.banner.hero-main .slider .swiper-container .swiper-slide .slide-inner .slide-motion.mo-mice {
  background:
    radial-gradient(ellipse 46% 40% at 50% 46%, rgba(12, 20, 29, 0.55) 0%, rgba(12, 20, 29, 0) 100%),
    linear-gradient(135deg, rgba(1, 30, 56, 0.86) 0%, rgba(16, 26, 36, 0.72) 48%, rgba(13, 22, 32, 0.66) 100%);
}
.banner .slider .swiper-container .swiper-slide .slide-inner .slide-image {
  transform: scale(1.04);
  transition: transform 9s ease-out;
}
.banner .swiper-slide-active .slide-image {
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .banner .slider .swiper-container .swiper-slide .slide-inner .slide-image {
    transform: none;
    transition: none;
  }
}

/* ==========================================================
   Signature Journeys - price line reads honestly until real
   fares are in. No invented discount pills.
   ========================================================== */
.pk-now-text {
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: 0;
  color: #16232F;
}
.pk-note {
  margin-top: 18px;
  font-size: 12.5px;
  color: #9A9188;
  text-align: center;
}

/* ==========================================================
   Homepage closing band - a router, not a slogan.
   Copy and a direct line on the left, four ways in on the right.
   `.final-cta` is left alone; the other pages still use it.
   ========================================================== */
.home-cta {
  position: relative;
  overflow: hidden;
  padding: 96px 0;
  background-color: #0B121A;
  background-size: cover;
  background-position: center;
  color: #fff;
}
.home-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, rgba(11, 18, 26, 0.94) 0%, rgba(12, 20, 29, 0.88) 44%, rgba(13, 22, 32, 0.7) 100%);
}
.home-cta .container {
  position: relative;
  z-index: 1;
}
.hc-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 58px;
  align-items: center;
}
.hc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #C9A971;
}
.hc-dot {
  position: relative;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #C9A971;
}
.hc-dot::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(201, 169, 113, 0.6);
  animation: hc-pulse 2.2s ease-out infinite;
}
@keyframes hc-pulse {
  from { transform: scale(0.6); opacity: 1; }
  to { transform: scale(2); opacity: 0; }
}
.hc-title {
  margin: 0 0 16px;
  font-size: 38px;
  line-height: 1.18;
  color: #fff;
}
.hc-title .theme {
  color: #C9A971 !important;
}
.hc-text {
  max-width: 52ch;
  margin: 0 0 28px;
  font-size: 15.5px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.8);
}
.hc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-bottom: 28px;
}
.hc-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 26px;
  border-radius: 12px;
  background: #A8834E;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff !important;
  text-decoration: none !important;
  box-shadow: 0 18px 36px -18px rgba(168, 131, 78, 0.95);
  transition: background 0.25s ease, transform 0.25s ease;
}
.hc-btn i {
  font-size: 11px;
}
.hc-btn:hover {
  background: #8A6A3D;
  transform: translateY(-2px);
}
.hc-call {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff !important;
  text-decoration: none !important;
}
.hc-call > i {
  display: inline-flex;
  flex: 0 0 42px;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: #C9A971;
  font-size: 15px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.hc-call:hover > i {
  border-color: #C9A971;
  background: rgba(201, 169, 113, 0.14);
}
.hc-call em {
  display: block;
  font-size: 11.5px;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.hc-call b {
  display: block;
  font-size: 16px;
  font-weight: 600;
}
.hc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hc-facts li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
}
.hc-facts i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: rgba(201, 169, 113, 0.14);
  color: #C9A971;
  font-size: 11px;
}

/* --- the router card --- */
.hc-card {
  padding: 24px 24px 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.hc-card-kicker {
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #C9A971;
}
.hc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: inherit;
  text-decoration: none !important;
  transition: padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hc-row:hover {
  padding-left: 8px;
}
.hc-ico {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(201, 169, 113, 0.13);
  color: #C9A971;
  font-size: 16px;
  transition: background 0.3s ease, color 0.3s ease;
}
.hc-row:hover .hc-ico {
  background: #A8834E;
  color: #fff;
}
.hc-rt {
  flex: 1 1 auto;
  min-width: 0;
}
.hc-rt b {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}
.hc-rt em {
  display: block;
  font-size: 12.5px;
  font-style: normal;
  color: rgba(255, 255, 255, 0.62);
}
.hc-go {
  flex: 0 0 auto;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.3s ease, transform 0.3s ease;
}
.hc-row:hover .hc-go {
  color: #C9A971;
  transform: translateX(3px);
}
.hc-wa {
  margin-top: 4px;
  padding: 14px 2px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.hc-wa a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
}
.hc-wa a:hover {
  color: #C9A971 !important;
}
.hc-wa i {
  font-size: 16px;
  color: #C9A971;
}

@media (max-width: 1199px) {
  .hc-grid {
    gap: 40px;
  }
  .hc-title {
    font-size: 33px;
  }
}
@media (max-width: 991px) {
  .home-cta {
    padding: 74px 0;
  }
  .home-cta::before {
    background: linear-gradient(180deg, rgba(11, 18, 26, 0.94) 0%, rgba(12, 20, 29, 0.9) 100%);
  }
  .hc-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}
@media (max-width: 575px) {
  .home-cta {
    padding: 60px 0;
  }
  .hc-title {
    font-size: 27px;
  }
  .hc-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }
  .hc-btn {
    justify-content: center;
  }
  .hc-card {
    padding: 20px 18px 6px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hc-dot::after {
    animation: none;
  }
  .hc-btn,
  .hc-row,
  .hc-ico,
  .hc-go {
    transition: none;
  }
}

/* ==========================================================
   Destination cards: shorter, with a lighter veil so the brand
   artwork reads instead of a flat navy panel. The bottom third
   stays dark enough to carry the name and the line.
   ========================================================== */
.dest-card {
  height: 300px;
}
.dest-veil {
  background: linear-gradient(to top, rgba(11, 18, 26, 0.93) 0%, rgba(12, 20, 29, 0.74) 26%, rgba(13, 22, 32, 0.2) 56%, rgba(13, 22, 32, 0.02) 80%, rgba(13, 22, 32, 0) 100%);
}
@media (max-width: 1199px) {
  .dest-card {
    height: 292px;
  }
}
@media (max-width: 991px) {
  .dest-card {
    height: 300px;
  }
}
@media (max-width: 767px) {
  .dest-card {
    height: 320px;
  }
}

/* The About intro row carried Bootstrap's gutter on top of a full-width
   container, which pushed the right column past the viewport between about
   985px and 1010px and clipped its last few pixels. The lg padding on the
   second column already provides the gap, so the gutter is not needed. */
.about-intro .row {
  --bs-gutter-x: 0;
  margin-left: 0;
  margin-right: 0;
}


/* ==========================================================
   Travel Styles - 12 editorial photo cards
   Core Expertise says what we do; this says how you want to travel.
   ========================================================== */
.travel-styles {
  background: #fff;
}

.ts-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ts-card {
  position: relative;
  display: block;
  /* square at every breakpoint - the column width sets the height */
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background-color: #101A24;
  text-decoration: none !important;
  transition: box-shadow 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ts-card:hover,
.ts-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 26px 44px -26px rgba(13, 22, 32, 0.55);
}
.ts-card:focus-visible {
  outline: 3px solid #C9A971;
  outline-offset: 3px;
}

/* hairline ring so the cards keep an edge against the white section */
.ts-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.11);
  pointer-events: none;
}

.ts-img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.97);
  transform: scale(1.004);
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), filter 520ms ease;
}
.ts-card:hover .ts-img,
.ts-card:focus-visible .ts-img {
  filter: saturate(1.06) brightness(1.03);
  transform: scale(1.05);
}

/* Resting veil, tuned for the square crop: dense under the type, and clear
   enough through the upper half that the photograph still carries the card. */
.ts-veil {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  background: linear-gradient(to top, rgba(11, 18, 26, 0.94) 0%, rgba(12, 20, 29, 0.82) 26%, rgba(13, 22, 32, 0.42) 52%, rgba(13, 22, 32, 0.12) 78%, rgba(13, 22, 32, 0) 100%);
}
/* second veil fades in on hover rather than animating a gradient, which browsers cannot interpolate */
.ts-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  background: linear-gradient(to top, rgba(11, 18, 26, 0.96) 0%, rgba(12, 20, 29, 0.9) 36%, rgba(13, 22, 32, 0.62) 66%, rgba(13, 22, 32, 0.28) 100%);
  transition: opacity 420ms ease;
}
.ts-card:hover::after,
.ts-card:focus-visible::after {
  opacity: 1;
}

.ts-meta {
  position: absolute;
  top: 18px;
  right: 20px;
  left: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ts-num {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.5);
  transition: color 420ms ease;
}
.ts-icon {
  font-size: 17px;
  color: rgba(255, 255, 255, 0.55);
  transition: color 420ms ease;
}
.ts-card:hover .ts-num,
.ts-card:hover .ts-icon {
  color: #C9A971;
}

.ts-body {
  position: absolute;
  right: 20px;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  padding-right: 46px;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ts-card:hover .ts-body,
.ts-card:focus-visible .ts-body {
  transform: translateY(-5px);
}

.ts-title {
  /* Two title lines reserved (2.5em) plus the rule above it (2px + 11px), so a
     wrapping title does not drop its card out of line with the rest of the row. */
  min-height: calc(2.5em + 13px);
  margin: 0 0 5px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  color: #fff;
}
/* editorial rule above the title - present at rest, drawn out in brand teal on hover */
.ts-title::before {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  margin-bottom: 11px;
  background: rgba(255, 255, 255, 0.38);
  transition: width 420ms cubic-bezier(0.22, 1, 0.36, 1), background 420ms ease;
}
.ts-card:hover .ts-title::before,
.ts-card:focus-visible .ts-title::before {
  width: 34px;
  background: #C9A971;
}

.ts-line {
  display: block;
  /* two lines reserved, so every title in a row lands on the same baseline
     whether its tagline wraps or not */
  min-height: 36px;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
/* the long line is held back so the resting card stays editorial */
.ts-desc {
  display: block;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.68);
  transition: max-height 440ms cubic-bezier(0.22, 1, 0.36, 1), margin-top 440ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}
.ts-card:hover .ts-desc,
.ts-card:focus-visible .ts-desc {
  max-height: 72px;
  margin-top: 6px;
  opacity: 1;
}

.ts-cta {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 11px;
  transition: background 420ms ease, border-color 420ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ts-cta i {
  display: block;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ts-card:hover .ts-cta,
.ts-card:focus-visible .ts-cta {
  border-color: #A8834E;
  background: #A8834E;
  transform: translateY(-5px);
}
.ts-card:hover .ts-cta i {
  transform: translateX(3px);
}

/* --- responsive --- */
@media (max-width: 1199px) {
  .ts-title {
    font-size: 17px;
  }
}

@media (max-width: 991px) {
  .ts-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

@media (max-width: 575px) {
  .ts-grid {
    grid-template-columns: 1fr;
  }
  .ts-title {
    font-size: 19px;
  }
  /* One wide column: nothing sits beside a card to line up with, and every
     tagline fits on a line, so the reserved space would only open a gap. */
  .ts-title,
  .ts-line {
    min-height: 0;
  }
}

/* No hover on touch: show the full copy and the deeper veil permanently. */
@media (hover: none) {
  .ts-card::after {
    opacity: 1;
  }
  .ts-desc {
    max-height: 72px;
    margin-top: 8px;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ts-card,
  .ts-card::after,
  .ts-img,
  .ts-body,
  .ts-cta,
  .ts-cta i,
  .ts-desc {
    transition-duration: 0.01ms;
  }
  .ts-card:hover,
  .ts-card:hover .ts-img,
  .ts-card:focus-visible .ts-img {
    transform: none;
  }
}


/* Travel Styles: lighter veil so the tile colour shows through; the bottom
   third stays dark enough for the title and line. */
.ts-veil {
  background: linear-gradient(to top, rgba(11, 18, 26, 0.9) 0%, rgba(12, 20, 29, 0.66) 28%, rgba(13, 22, 32, 0.22) 52%, rgba(13, 22, 32, 0.04) 76%, rgba(13, 22, 32, 0) 100%);
}




/* ==========================================================
   HOLIDAY PACKAGES (holidays.html) - luxury editorial system
   Charcoal navy, warm ivory, muted sand, muted gold.
   One font, rounded buttons, thin borders, restrained motion.
   Scoped to .hl-page.
   ========================================================== */
.hl-page {
  --ink: #16232F;
  --ink-2: #0D1620;
  --ivory: #F8F5F0;
  --sand: #EDE6DC;
  --line: #E2D9CD;
  --line-soft: #EFE9E0;
  --taupe: #8B8179;
  --body: #55504B;
  --gold: #A8834E;
  --gold-soft: #C9A971;
  font-family: "Inter", sans-serif;
}

/* --- atoms --- */
.hl-sec {
  padding: 72px 0;
  background: #fff;
}
.hl-sec-ivory {
  background: var(--ivory);
}
.hl-sec-ink {
  background: var(--ink);
}
.hl-label {
  display: block;
  margin-bottom: 11px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.hl-label-light {
  color: var(--gold-soft);
}
.hl-h2 {
  margin: 0 0 11px;
  font-size: 25px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--ink);
}
.hl-h2-light {
  color: #fff;
}
.hl-sub {
  max-width: 62ch;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--body);
}
.hl-sub-light {
  color: rgba(255, 255, 255, 0.72);
}
.hl-head {
  max-width: 660px;
  margin: 0 auto 38px;
  text-align: center;
}
.hl-head .hl-sub {
  margin: 0 auto;
}
.hl-head-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 44px;
  max-width: none;
  margin-bottom: 34px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  text-align: left;
}
.hl-head-row .hl-h2 {
  margin-bottom: 0;
}
.hl-head-row .hl-sub {
  max-width: 44ch;
  margin: 0;
  padding-bottom: 2px;
}
.hl-sec-ink .hl-head-row {
  border-bottom-color: rgba(255, 255, 255, 0.16);
}
.hl-more {
  margin-top: 38px;
  text-align: center;
}

/* --- buttons: rounded --- */
.hl-btn,
.hl-btn-line,
.hl-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 32px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.hl-btn i,
.hl-btn-line i,
.hl-btn-ghost i {
  font-size: 10px;
}
.hl-btn {
  border: 1px solid var(--gold);
  background: var(--gold);
  color: #fff !important;
}
.hl-btn:hover {
  background: #8A6A3D;
  border-color: #8A6A3D;
  color: #fff !important;
  transform: translateY(-2px);
}
.hl-btn-line {
  border: 1px solid rgba(255, 255, 255, 0.45);
  background: transparent;
  color: #fff !important;
}
.hl-btn-line:hover {
  border-color: var(--gold-soft);
  background: rgba(201, 169, 113, 0.14);
  color: #fff !important;
}
/* light-ground outline button */
.hl-btn-ghost {
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink) !important;
}
.hl-btn-ghost:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff !important;
  transform: translateY(-2px);
}
.hl-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink) !important;
  text-decoration: none !important;
  transition: color 0.3s ease, border-color 0.3s ease, gap 0.3s ease;
}
.hl-link i {
  font-size: 9px;
}
.hl-link:hover {
  gap: 15px;
  border-color: var(--gold);
  color: var(--gold) !important;
}

/* --- 01 hero --- */
.hl-hero {
  position: relative;
  overflow: hidden;
  padding: 130px 0 92px;
  background: var(--ink-2);
}
.hl-hero-media,
.hl-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hl-hero-media img {
  object-fit: cover;
  object-position: center 42%;
}
.hl-hero-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(9, 17, 24, 0.88) 0%, rgba(11, 20, 28, 0.68) 46%, rgba(13, 24, 33, 0.34) 100%);
}
.hl-hero .container {
  position: relative;
  z-index: 1;
}
.hl-hero .breadcrumb {
  margin-bottom: 22px;
}
.hl-hero-inner {
  max-width: 640px;
}
.hl-hero-title {
  margin: 0 0 15px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #fff;
}
.hl-hero-text {
  max-width: 52ch;
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.82);
}
.hl-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 26px;
}
.hl-hero-note {
  display: block;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* --- 02 intro --- */
.hl-intro {
  padding: 58px 0;
  background: var(--ivory);
  border-bottom: 1px solid var(--line);
}
.hl-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  align-items: center;
}
.hl-intro .hl-h2 {
  margin-bottom: 0;
}
.hl-intro-links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin-top: 20px;
}

/* --- grids --- */
.hl-grid-4c {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.hl-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

/* --- 03 package card --- */
.hl-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-decoration: none !important;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.hl-card:hover,
.hl-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--gold-soft);
  box-shadow: 0 18px 40px -28px rgba(22, 35, 47, 0.45);
}
.hl-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.hl-card-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--sand);
}
.hl-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-card:hover .hl-card-media img {
  transform: scale(1.05);
}
.hl-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 17px 18px 17px;
}
.hl-card-region {
  display: block;
  margin-bottom: 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--taupe);
}
.hl-card-title {
  margin: 0 0 7px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.hl-card-text {
  display: block;
  flex: 1;
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.58;
  color: var(--body);
}
.hl-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}
.hl-card-meta {
  display: block;
  min-width: 0;
}
.hl-meta {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink);
}
.hl-price {
  display: block;
  margin-top: 1px;
  font-size: 10.5px;
  color: var(--taupe);
}
.hl-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
  white-space: nowrap;
  transition: color 0.3s ease;
}
.hl-card-cta i {
  font-size: 9px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-card:hover .hl-card-cta {
  color: var(--gold);
}
.hl-card:hover .hl-card-cta i {
  transform: translateX(4px);
}

/* --- 04 trending destinations --- */
.hl-trend {
  padding: 64px 0;
  background: var(--ivory);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hl-trend-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
}
.hl-trend-item {
  display: block;
  text-align: center;
  text-decoration: none !important;
}
.hl-trend-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  margin-bottom: 12px;
  border-radius: 100px;
  background: var(--sand);
  box-shadow: 0 0 0 1px var(--line), 0 0 0 5px #fff;
  transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.hl-trend-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-trend-item:hover .hl-trend-media {
  transform: translateY(-3px);
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 5px #fff;
}
.hl-trend-item:hover .hl-trend-media img {
  transform: scale(1.07);
}
.hl-trend-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.hl-trend-note {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--taupe);
}

/* --- 05 india regions, four across --- */
.hl-region {
  display: block;
  text-decoration: none !important;
}
.hl-region-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  margin-bottom: 15px;
  border-radius: 8px;
  background: var(--sand);
}
.hl-region-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-region:hover .hl-region-media img {
  transform: scale(1.05);
}
.hl-region-name {
  margin: 0 0 5px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
.hl-region-text {
  display: block;
  margin-bottom: 11px;
  font-size: 13px;
  line-height: 1.58;
  color: var(--body);
}
.hl-region-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.hl-region-cta i {
  font-size: 9px;
}
.hl-region:hover .hl-region-cta {
  border-color: var(--gold);
  color: var(--gold);
}

/* --- 06 international: framed image with caption below --- */
.hl-dest {
  display: block;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  text-decoration: none !important;
  transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
}
.hl-dest:hover,
.hl-dest:focus-visible {
  transform: translateY(-3px);
  border-color: rgba(201, 169, 113, 0.5);
  background: rgba(255, 255, 255, 0.06);
}
.hl-dest:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 3px;
}
.hl-dest-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  margin-bottom: 15px;
  border-radius: 6px;
  background: var(--ink-2);
}
.hl-dest-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-dest:hover .hl-dest-media img {
  transform: scale(1.05);
}
.hl-dest-body {
  display: block;
  padding: 0 4px 4px;
}
.hl-dest-name {
  position: relative;
  margin: 0 0 12px;
  padding-bottom: 10px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}
.hl-dest-name::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 28px;
  height: 1px;
  background: var(--gold-soft);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-dest:hover .hl-dest-name::after {
  width: 54px;
}
.hl-dest-text {
  display: block;
  margin-bottom: 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}
.hl-dest-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.hl-dest-cta i {
  font-size: 9px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-dest:hover .hl-dest-cta i {
  transform: translateX(4px);
}

/* --- 07 travel styles: compact, image above a small caption --- */
.hl-style-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 22px;
}
.hl-style {
  display: block;
  text-decoration: none !important;
}
.hl-style-media {
  display: block;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  margin-bottom: 12px;
  border-radius: 8px;
  background: var(--sand);
}
.hl-style-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-style:hover .hl-style-media img {
  transform: scale(1.06);
}
.hl-style-name {
  display: block;
  margin-bottom: 3px;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--ink);
  transition: color 0.3s ease;
}
.hl-style:hover .hl-style-name {
  color: var(--gold);
}
.hl-style-text {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--taupe);
}

/* --- 08 customised, split on ink --- */
.hl-custom {
  padding: 72px 0;
  background: var(--ink);
}
.hl-custom-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
}
.hl-custom-media {
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background: var(--ink-2);
}
.hl-custom-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hl-custom-copy .hl-h2 {
  color: #fff;
}
.hl-custom-copy .hl-sub {
  margin-bottom: 24px;
  color: rgba(255, 255, 255, 0.72);
}
.hl-custom-list {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.hl-custom-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 13.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.82);
}
.hl-custom-list span {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold-soft);
}

/* --- 09 why --- */
.hl-why {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
}
.hl-why li {
  margin: 0;
  padding: 0 30px;
  border-left: 1px solid var(--line);
  list-style: none;
}
.hl-why li:first-child {
  padding-left: 0;
  border-left: 0;
}
.hl-why li:last-child {
  padding-right: 0;
}
.hl-why-num {
  display: block;
  margin-bottom: 16px;
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--gold);
}
.hl-why-title {
  position: relative;
  margin: 0 0 9px;
  padding-top: 14px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.hl-why-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 1px;
  background: var(--gold);
}
.hl-why-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
  color: var(--body);
}

/* --- 10 final cta --- */
.hl-cta {
  position: relative;
  overflow: hidden;
  padding: 94px 0;
  background: var(--ink-2);
}
.hl-cta-media,
.hl-cta-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hl-cta-media img {
  object-fit: cover;
  object-position: center 55%;
}
.hl-cta-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 16, 23, 0.78) 0%, rgba(11, 20, 28, 0.9) 100%);
}
.hl-cta .container {
  position: relative;
  z-index: 1;
}
.hl-cta-inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}
.hl-cta-title {
  margin: 0 0 13px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
}
.hl-cta-text {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.78);
}
.hl-cta .hl-hero-actions {
  justify-content: center;
  margin-bottom: 30px;
}
.hl-cta-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 30px;
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  list-style: none;
}
.hl-cta-facts li {
  margin: 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* --- responsive --- */
@media (max-width: 1199px) {
  .hl-grid-4c,
  .hl-style-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hl-trend-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .hl-hero-title {
    font-size: 34px;
  }
  .hl-custom-inner {
    gap: 36px;
  }
  .hl-why li {
    padding: 0 20px;
  }
}
@media (max-width: 991px) {
  .hl-sec,
  .hl-custom {
    padding: 54px 0;
  }
  .hl-hero {
    padding: 114px 0 64px;
  }
  .hl-intro,
  .hl-trend {
    padding: 46px 0;
  }
  .hl-intro-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hl-grid-3,
  .hl-grid-4c,
  .hl-style-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .hl-head-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
  }
  .hl-custom-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hl-custom-media {
    aspect-ratio: 16 / 10;
  }
  .hl-why {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 0;
  }
  .hl-why li:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
  .hl-cta {
    padding: 68px 0;
  }
}
@media (max-width: 767px) {
  .hl-grid-3,
  .hl-grid-4c {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hl-style-row,
  .hl-trend-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .hl-hero-title {
    font-size: 26px;
  }
  .hl-h2 {
    font-size: 20px;
  }
  .hl-cta-title {
    font-size: 23px;
  }
  .hl-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hl-why {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .hl-why li {
    padding: 0;
    border-left: 0;
  }
  .hl-cta-facts {
    flex-direction: column;
    gap: 8px;
  }
}
@media (max-width: 575px) {
  .hl-card-foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hl-btn,
  .hl-btn-line,
  .hl-btn-ghost,
  .hl-link,
  .hl-card,
  .hl-card-media img,
  .hl-card-cta,
  .hl-card-cta i,
  .hl-trend-media,
  .hl-trend-media img,
  .hl-region-media img,
  .hl-region-cta,
  .hl-dest,
  .hl-dest-media img,
  .hl-dest-name::after,
  .hl-dest-cta i,
  .hl-style-media img,
  .hl-style-name {
    transition: none;
  }
}

/* ==========================================================
   Package card, second pass. Duration moves onto the image so
   the body carries only region, title and one line, and the
   footer becomes a single clean row: price left, action right.
   ========================================================== */
.hl-card {
  position: relative;
  border-radius: 10px;
}
/* a gold hairline draws across the top edge on hover */
.hl-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-card:hover::before,
.hl-card:focus-visible::before {
  transform: scaleX(1);
}
.hl-card:hover,
.hl-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold-soft);
  box-shadow: 0 22px 44px -26px rgba(22, 35, 47, 0.42);
}
.hl-card-media {
  position: relative;
  aspect-ratio: 3 / 2;
}
.hl-card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 18, 26, 0.6) 0%, rgba(11, 18, 26, 0.12) 32%, rgba(11, 18, 26, 0) 58%);
}
.hl-card-dur {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
  background: rgba(11, 18, 26, 0.46);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  color: #fff;
}
.hl-card-dur i {
  font-size: 11px;
  color: var(--gold-soft);
}
.hl-card-body {
  padding: 18px 20px 18px;
}
.hl-card-region {
  margin-bottom: 8px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.hl-card-title {
  margin: 0 0 9px;
  font-size: 16.5px;
  line-height: 1.32;
  letter-spacing: -0.005em;
}
.hl-card-text {
  margin-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--taupe);
}
.hl-card-foot {
  align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.hl-price {
  margin-top: 0;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--body);
}
.hl-card-cta {
  gap: 7px;
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--ink);
}
.hl-card:hover .hl-card-cta {
  color: var(--gold);
}
@media (max-width: 767px) {
  .hl-card-media {
    aspect-ratio: 16 / 10;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hl-card::before {
    transition: none;
  }
}

/* The footer is now two short items, so it stays on one row on phones too. */
@media (max-width: 575px) {
  .hl-card-foot {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }
}

/* ==========================================================
   India regions, second pass: tall photo cards with the copy
   set over the image. Distinct from the light package cards
   above and the dark destination cards below.
   ========================================================== */
.hl-region {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: 10px;
  background: var(--ink);
  text-decoration: none !important;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.hl-region:hover,
.hl-region:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 26px 48px -26px rgba(22, 35, 47, 0.6);
}
.hl-region:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.hl-region > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-region:hover > img {
  transform: scale(1.05);
}
.hl-region-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(9, 15, 22, 0.93) 0%, rgba(11, 18, 26, 0.62) 34%, rgba(13, 22, 32, 0.1) 66%, rgba(13, 22, 32, 0) 100%);
}
.hl-region-index {
  position: absolute;
  top: 16px;
  left: 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--gold-soft);
}
.hl-region-body {
  position: absolute;
  right: 18px;
  bottom: 18px;
  left: 18px;
}
.hl-region-name {
  position: relative;
  margin: 0 0 11px;
  padding-bottom: 11px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
}
.hl-region-name::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 26px;
  height: 1px;
  background: var(--gold-soft);
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-region:hover .hl-region-name::after {
  width: 56px;
}
.hl-region-text {
  display: block;
  margin-bottom: 12px;
  border-bottom: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.74);
}
.hl-region-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 0;
  border-bottom: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.hl-region-cta i {
  font-size: 9px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-region:hover .hl-region-cta {
  color: var(--gold-soft);
}
.hl-region:hover .hl-region-cta i {
  transform: translateX(4px);
}

/* ==========================================================
   International, second pass: four across, image above an ink
   body. Same anatomy as the package card, dark treatment.
   ========================================================== */
.hl-dest {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
}
.hl-dest:hover,
.hl-dest:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(201, 169, 113, 0.55);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 24px 44px -26px rgba(0, 0, 0, 0.66);
}
.hl-dest-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  margin-bottom: 0;
  border-radius: 0;
  background: var(--ink-2);
}
.hl-dest-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 18, 26, 0.5) 0%, rgba(11, 18, 26, 0) 46%);
}
.hl-dest-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 17px 18px 18px;
}
.hl-dest-region {
  display: block;
  margin-bottom: 7px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.hl-dest-name {
  position: relative;
  margin: 0 0 10px;
  padding-bottom: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
}
.hl-dest-name::after {
  display: none;
}
.hl-dest-text {
  display: block;
  flex: 1;
  margin-bottom: 14px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.62);
}
.hl-dest-cta {
  padding-top: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
}

@media (max-width: 767px) {
  .hl-region {
    aspect-ratio: 4 / 3;
  }
  .hl-dest-media {
    aspect-ratio: 16 / 10;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hl-region,
  .hl-region > img,
  .hl-region-name::after,
  .hl-region-cta i {
    transition: none;
  }
}

/* ==========================================================
   Trending destinations, second pass. A ranked editorial row
   rather than circular thumbnails: numeral, square crop, name
   and note. Two rows of three, divided by hairlines. This is
   the one horizontal pattern on the page, so it stays distinct.
   ========================================================== */
.hl-trend-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 40px;
}
.hl-trend-item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 6px 18px 0;
  border-top: 1px solid var(--line);
  text-decoration: none !important;
  transition: padding-left 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
/* the last row of three needs a closing rule */
.hl-trend-item:nth-last-child(-n + 3) {
  border-bottom: 1px solid var(--line);
}
.hl-trend-item:hover {
  padding-left: 8px;
}
.hl-trend-rank {
  flex: 0 0 auto;
  width: 26px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--gold);
  transition: color 0.3s ease;
}
.hl-trend-media {
  flex: 0 0 72px;
  display: block;
  overflow: hidden;
  width: 72px;
  height: 72px;
  margin: 0;
  border-radius: 6px;
  background: var(--sand);
  box-shadow: none;
}
.hl-trend-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-trend-item:hover .hl-trend-media {
  transform: none;
  box-shadow: none;
}
.hl-trend-item:hover .hl-trend-media img {
  transform: scale(1.08);
}
.hl-trend-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.hl-trend-name {
  display: block;
  margin-bottom: 3px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: color 0.3s ease;
}
.hl-trend-item:hover .hl-trend-name {
  color: var(--gold);
}
.hl-trend-note {
  display: block;
  margin-top: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--taupe);
}
.hl-trend-go {
  flex: 0 0 auto;
  font-size: 10px;
  color: #C6BCAF;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}
.hl-trend-item:hover .hl-trend-go {
  opacity: 1;
  transform: none;
  color: var(--gold);
}

@media (max-width: 991px) {
  .hl-trend-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 30px;
  }
  .hl-trend-item:nth-last-child(-n + 3) {
    border-bottom: 0;
  }
  .hl-trend-item:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 575px) {
  .hl-trend-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .hl-trend-item {
    gap: 14px;
    padding: 15px 4px 15px 0;
  }
  .hl-trend-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
  .hl-trend-item:last-child {
    border-bottom: 1px solid var(--line);
  }
  .hl-trend-media {
    flex-basis: 60px;
    width: 60px;
    height: 60px;
  }
  .hl-trend-go {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hl-trend-item,
  .hl-trend-media img,
  .hl-trend-name,
  .hl-trend-go {
    transition: none;
  }
}

/* the first version of this strip centred its text; a row needs left align */
.hl-trend-item,
.hl-trend-copy {
  text-align: left;
}

/* ==========================================================
   Trending destinations, third pass: proper cards. Square
   photo with a gold rank badge, name and note in a white body.
   Six across, dropping to three then two.
   ========================================================== */
.hl-trend-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
}
.hl-trend-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-decoration: none !important;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.hl-trend-card:hover,
.hl-trend-card:focus-visible {
  transform: translateY(-4px);
  border-color: var(--gold-soft);
  box-shadow: 0 20px 38px -26px rgba(22, 35, 47, 0.42);
}
.hl-trend-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.hl-trend-card .hl-trend-media {
  position: relative;
  flex: none;
  display: block;
  overflow: hidden;
  width: auto;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-radius: 0;
  background: var(--sand);
  box-shadow: none;
}
.hl-trend-card .hl-trend-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-trend-card:hover .hl-trend-media img {
  transform: scale(1.07);
}
.hl-trend-card .hl-trend-rank {
  position: absolute;
  top: 10px;
  left: 10px;
  width: auto;
  padding: 4px 10px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
  background: rgba(11, 18, 26, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold-soft);
}
.hl-trend-body {
  display: block;
  padding: 14px 14px 15px;
  text-align: left;
}
.hl-trend-card .hl-trend-name {
  display: block;
  margin-bottom: 3px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: color 0.3s ease;
}
.hl-trend-card:hover .hl-trend-name {
  color: var(--gold);
}
.hl-trend-card .hl-trend-note {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: var(--taupe);
}

@media (max-width: 1199px) {
  .hl-trend-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}
@media (max-width: 575px) {
  .hl-trend-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .hl-trend-body {
    padding: 12px 12px 13px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hl-trend-card,
  .hl-trend-card .hl-trend-media img,
  .hl-trend-card .hl-trend-name {
    transition: none;
  }
}

/* ==========================================================
   Tailor-made, second pass. A cinematic band with three raised
   step cards: gold numeral, icon, title, line. The cards carry
   a top highlight and a deep shadow so they read as lifted
   panels, and rise further on hover.
   ========================================================== */
.hl-custom {
  position: relative;
  overflow: hidden;
  padding: 86px 0;
  background: var(--ink-2);
}
.hl-custom-media,
.hl-custom-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hl-custom-media img {
  display: block;
  object-fit: cover;
  object-position: center 45%;
}
.hl-custom-veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(9, 15, 22, 0.9) 0%, rgba(11, 18, 26, 0.93) 100%);
}
.hl-custom .container {
  position: relative;
  z-index: 1;
}
.hl-custom-head {
  max-width: 640px;
  margin: 0 auto 44px;
  text-align: center;
}
.hl-custom-title {
  margin: 0 0 13px;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: #fff;
}
.hl-custom-sub {
  max-width: 56ch;
  margin: 0 auto;
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.74);
}

.hl-step-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  perspective: 1200px;
}
.hl-step {
  position: relative;
  display: block;
  padding: 30px 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.075) 0%, rgba(255, 255, 255, 0.03) 100%);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  /* a top highlight plus a deep shadow reads as a raised panel */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 26px 48px -28px rgba(0, 0, 0, 0.85);
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.45s ease;
}
.hl-step:hover {
  transform: translateY(-8px);
  border-color: rgba(201, 169, 113, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 40px 64px -30px rgba(0, 0, 0, 0.9);
}
/* a gold hairline along the top edge, drawn in on hover */
.hl-step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  width: 46px;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-step:hover::before {
  transform: scaleX(1);
}
.hl-step-num {
  position: absolute;
  top: 24px;
  right: 26px;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(201, 169, 113, 0.32);
  transition: color 0.4s ease;
}
.hl-step:hover .hl-step-num {
  color: rgba(201, 169, 113, 0.7);
}
.hl-step-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border: 1px solid rgba(201, 169, 113, 0.34);
  border-radius: 12px;
  background: rgba(201, 169, 113, 0.12);
  color: var(--gold-soft);
  font-size: 18px;
  transition: background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}
.hl-step:hover .hl-step-ico {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff;
}
.hl-step-title {
  display: block;
  margin-bottom: 9px;
  padding-right: 44px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.32;
  letter-spacing: 0.04em;
  color: #fff;
}
.hl-step-text {
  display: block;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.64);
}

.hl-custom-foot {
  margin-top: 44px;
  text-align: center;
}
.hl-custom-note {
  display: block;
  margin-top: 16px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 991px) {
  .hl-custom {
    padding: 62px 0;
  }
  .hl-step-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .hl-custom-head {
    margin-bottom: 32px;
  }
  .hl-step {
    padding: 26px 22px 24px;
  }
}
@media (max-width: 767px) {
  .hl-custom-title {
    font-size: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hl-step,
  .hl-step::before,
  .hl-step-num,
  .hl-step-ico {
    transition: none;
  }
}

/* ==========================================================
   Why us, second pass: four light cards on the ivory ground.
   Outlined gold icon, faint numeral, title and one line, with
   a gold hairline that draws along the top edge on hover.
   ========================================================== */
.hl-why-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.hl-why-card {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 28px 24px 26px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.hl-why-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-why-card:hover {
  transform: translateY(-4px);
  border-color: var(--gold-soft);
  box-shadow: 0 22px 42px -28px rgba(22, 35, 47, 0.4);
}
.hl-why-card:hover::before {
  transform: scaleX(1);
}
.hl-why-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.hl-why-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  color: var(--gold);
  font-size: 18px;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.hl-why-card:hover .hl-why-ico {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff;
}
.hl-why-num {
  font-size: 26px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #DCD2C4;
  transition: color 0.35s ease;
}
.hl-why-card:hover .hl-why-num {
  color: var(--gold-soft);
}
.hl-why-title {
  display: block;
  margin-bottom: 9px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.hl-why-text {
  display: block;
  font-size: 13px;
  line-height: 1.65;
  color: var(--body);
}

/* ==========================================================
   Final call to action, second pass. The copy sits in a framed
   panel over the photograph, and the three ways to reach us sit
   under a divider so the section is usable, not just a slogan.
   ========================================================== */
.hl-cta {
  padding: 96px 0;
}
.hl-cta-veil {
  background: linear-gradient(180deg, rgba(9, 15, 22, 0.8) 0%, rgba(11, 18, 26, 0.92) 100%);
}
.hl-cta-panel {
  max-width: 820px;
  margin: 0 auto;
  padding: 46px 44px 40px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(13, 22, 32, 0.42);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 34px 64px -34px rgba(0, 0, 0, 0.85);
  text-align: center;
}
.hl-cta-panel .hl-hero-actions {
  justify-content: center;
  margin-bottom: 0;
}
.hl-cta-reach {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.hl-reach {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: inherit;
  text-decoration: none !important;
  transition: transform 0.3s ease;
}
.hl-reach:hover {
  transform: translateY(-2px);
}
.hl-reach > i {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(201, 169, 113, 0.4);
  border-radius: 100px;
  color: var(--gold-soft);
  font-size: 15px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.hl-reach:hover > i {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff;
}
.hl-reach span {
  text-align: left;
}
.hl-reach em {
  display: block;
  font-size: 10px;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.hl-reach b {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: #fff;
}

@media (max-width: 1199px) {
  .hl-why-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .hl-cta {
    padding: 68px 0;
  }
  .hl-cta-panel {
    padding: 36px 26px 32px;
  }
  .hl-cta-reach {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 28px;
    padding-top: 24px;
  }
  .hl-reach {
    justify-content: flex-start;
  }
}
@media (max-width: 767px) {
  .hl-why-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .hl-why-card {
    padding: 24px 20px 22px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hl-why-card,
  .hl-why-card::before,
  .hl-why-ico,
  .hl-why-num,
  .hl-reach,
  .hl-reach > i {
    transition: none;
  }
}

/* The short rule above the title belonged to the old borderless
   layout; inside a card it reads as a stray dash. */
.hl-why-card .hl-why-title {
  padding-top: 0;
}
.hl-why-card .hl-why-title::before {
  display: none;
}

/* The icon sits in a wrapper so the circle survives FontAwesome
   swapping the <i> for an inline SVG (the WhatsApp mark does). */
.hl-reach > .hl-reach-ico {
  display: inline-flex;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(201, 169, 113, 0.4);
  border-radius: 100px;
  color: var(--gold-soft);
  font-size: 15px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.hl-reach-ico svg {
  width: 1em;
  height: 1em;
}
.hl-reach:hover > .hl-reach-ico {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff;
}

/* ==========================================================
   Final call to action, third pass. Asymmetric: the statement
   and buttons sit left over a visible photograph, the ways to
   reach us sit in a glass card on the right.
   ========================================================== */
.hl-cta {
  padding: 104px 0;
}
.hl-cta-media img {
  object-position: center 48%;
}
/* darker on the left so the copy holds, open on the right so the
   mountains are actually visible */
.hl-cta-veil {
  background: linear-gradient(92deg, rgba(9, 15, 22, 0.94) 0%, rgba(10, 17, 25, 0.86) 42%, rgba(12, 21, 30, 0.58) 72%, rgba(13, 23, 33, 0.42) 100%);
}
.hl-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 60px;
  align-items: center;
}
.hl-cta-copy {
  text-align: left;
}
.hl-cta-kicker {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.hl-cta-dash {
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--gold);
}
.hl-cta-title {
  max-width: 15ch;
  margin: 0 0 16px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
}
.hl-cta-text {
  max-width: 46ch;
  margin: 0 0 28px;
  font-size: 15.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.8);
}
.hl-cta-copy .hl-hero-actions {
  justify-content: flex-start;
  margin-bottom: 26px;
}
.hl-cta-points {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.hl-cta-points li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.68);
}
.hl-cta-points i {
  font-size: 10px;
  color: var(--gold-soft);
}

/* the contact card */
.hl-cta-card {
  padding: 28px 26px 24px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  background: rgba(12, 20, 29, 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 34px 64px -34px rgba(0, 0, 0, 0.86);
}
.hl-cta-card-kicker {
  display: block;
  margin-bottom: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.hl-cta-card-note {
  margin: 0 0 12px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
}
/* rows inside the card, divided by hairlines */
.hl-cta-card .hl-reach {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px 2px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  transition: padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-cta-card .hl-reach:hover {
  transform: none;
  padding-left: 7px;
}
.hl-cta-card .hl-reach > span:not(.hl-reach-ico) {
  flex: 1 1 auto;
  min-width: 0;
}
.hl-reach-go {
  flex: 0 0 auto;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.32);
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}
.hl-cta-card .hl-reach:hover .hl-reach-go {
  opacity: 1;
  transform: none;
  color: var(--gold-soft);
}
.hl-cta-card-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 4px;
  padding-top: 15px;
  border-top: 1px solid rgba(255, 255, 255, 0.13);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.52);
}
.hl-cta-card-foot i {
  font-size: 13px;
  color: var(--gold-soft);
}

@media (max-width: 1199px) {
  .hl-cta-grid {
    gap: 40px;
  }
  .hl-cta-title {
    font-size: 31px;
  }
}
@media (max-width: 991px) {
  .hl-cta {
    padding: 70px 0;
  }
  .hl-cta-veil {
    background: linear-gradient(180deg, rgba(9, 15, 22, 0.9) 0%, rgba(11, 19, 27, 0.93) 100%);
  }
  .hl-cta-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hl-cta-title {
    max-width: none;
  }
}
@media (max-width: 767px) {
  .hl-cta-title {
    font-size: 25px;
  }
  .hl-cta-copy .hl-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .hl-cta-card {
    padding: 24px 20px 20px;
  }
  .hl-reach-go {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hl-cta-card .hl-reach,
  .hl-reach-go {
    transition: none;
  }
}

/* =========================================================================
   SITEWIDE TYPE SYSTEM
   Ports the Holiday Packages page (holidays.html) type treatment to every other
   page: one family, one weight scale, one tracking scale, one body colour.
   The holiday page itself is excluded via body:not(.hl-page) so it stays
   exactly as designed. Icon fonts are deliberately never touched.
   ========================================================================= */

:root {
  --pj-font: "Inter", sans-serif;
  --pj-ink: #16232F;
  --pj-body: #55504B;
  --pj-taupe: #8B8179;
  --pj-gold: #A8834E;
  --pj-gold-soft: #C9A971;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* --- family: close the two gaps where a system stack could leak in --- */
input,
select,
textarea,
button,
optgroup {
  font-family: var(--pj-font);
}
/* plugin.css loads after this file and sets Arial on the datepicker -
   one extra element in the selector is enough to win it back */
html .date-picker,
html .date-picker-wrapper,
html .date-picker-wrapper * {
  font-family: var(--pj-font);
}

/* --- body copy: the warm ink the holiday page uses, not the cool grey --- */
body {
  color: var(--pj-body);
}

/* --- weight + tracking scale --- */
body:not(.hl-page) h1,
body:not(.hl-page) h2,
body:not(.hl-page) h3,
body:not(.hl-page) h4,
body:not(.hl-page) h5,
body:not(.hl-page) h6 {
  font-weight: 600;
}
body:not(.hl-page) h1,
body:not(.hl-page) h2,
body:not(.hl-page) h3 {
  letter-spacing: -0.018em;
}

/* --- section heads read exactly like .hl-h2 --- */
body:not(.hl-page) .section-title h2,
body:not(.hl-page) .section-title-w h2,
body:not(.hl-page) .section-title-l h2,
body:not(.hl-page) .sec-head h2 {
  font-size: 25px;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: 0.055em;
  text-transform: uppercase;
}

/* --- eyebrows read exactly like .hl-label --- */
body:not(.hl-page) .section-eyebrow,
body:not(.hl-page) .section-eyebrow-light {
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.26em;
  margin-bottom: 11px;
}

/* --- buttons lettered like .hl-btn --- */
body:not(.hl-page) .nir-btn,
body:not(.hl-page) .nir-btn-black,
body:not(.hl-page) .nir-btn-white {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body:not(.hl-page) .nir-btn-sm {
  font-size: 11px;
  letter-spacing: 0.12em;
}

@media (max-width: 575px) {
  body:not(.hl-page) .section-title h2,
  body:not(.hl-page) .section-title-w h2,
  body:not(.hl-page) .section-title-l h2,
  body:not(.hl-page) .sec-head h2 {
    font-size: 21px;
    letter-spacing: 0.045em;
  }
  body:not(.hl-page) .section-eyebrow,
  body:not(.hl-page) .section-eyebrow-light {
    font-size: 10px;
    letter-spacing: 0.22em;
  }
}
/* ===================== end sitewide type system ===================== */

/* ==========================================================
   About page v3 - real photography in place of the placeholder
   frames, a credentials bar tucked under the banner, the
   philosophy as a split layout, and scroll reveals to match the
   home, holiday and MICE pages.
   ========================================================== */

/* --- banner: a supporting line, plus room for the bar below --- */
.page-banner-about {
  padding-bottom: 128px;
}
.page-banner-about .pb-text {
  margin-bottom: 0;
}

/* --- credentials bar: pulls up over the banner edge --- */
.ab-trust {
  position: relative;
  z-index: 3;
  margin-top: -66px;
  padding: 0;
  background: transparent;
}
.ab-trust .tr-grid {
  background: #fff;
  box-shadow: 0 34px 60px -36px rgba(12, 20, 29, 0.55);
}
.ab-trust .tr-item {
  padding: 30px 18px 28px;
}
.ab-trust .tr-item:hover {
  background: #FCFAF6;
}

/* --- story: main frame, a hanging inset and an outline behind --- */
.ab-story {
  padding-top: 58px;
}
.ab-media {
  padding: 18px 54px 54px 0;
}
.ab-media::before {
  content: "";
  position: absolute;
  top: 0;
  right: 36px;
  bottom: 36px;
  left: 18px;
  border: 1px solid rgba(168, 131, 78, 0.4);
  border-radius: 20px;
  pointer-events: none;
}
.ab-media-main {
  position: relative;
  display: block;
  height: 470px;
  border-radius: 18px;
}
.ab-media-tag {
  top: 36px;
  left: 18px;
}
.ab-media-inset {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: 46%;
  padding: 6px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 50px -30px rgba(12, 20, 29, 0.6);
}
.ab-media-inset img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 12px;
}

/* --- philosophy: statement beside a two-by-two grid --- */
.ph-layout {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px 64px;
  align-items: start;
}
.ph-side {
  position: sticky;
  top: 112px;
}
.ph-layout .ph-head {
  max-width: none;
  margin: 0;
  text-align: left;
}
.ph-layout .ph-statement {
  font-size: 36px;
}
.ph-lead {
  max-width: 40ch;
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.72;
  color: #6E665F;
}
.ph-layout .ph-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.ph-layout .ph-item {
  position: relative;
  padding: 26px 24px 24px;
  border: 1px solid #E5DDD2;
  border-top: 2px solid #E5DDD2;
  border-radius: 16px;
  background: #fff;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}
.ph-layout .ph-item:hover {
  transform: translateY(-4px);
  border-color: #DFCFAF;
  border-top-color: #C9A971;
  box-shadow: 0 26px 44px -30px rgba(22, 35, 47, 0.5);
}
.ph-num {
  position: absolute;
  top: 22px;
  right: 22px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #C9A971;
}
.ph-layout .ph-word {
  font-size: 22px;
}

/* --- mission tile: a real photo now, so shade it a little more --- */
.bt-mission::before {
  background: linear-gradient(180deg, rgba(22, 35, 47, 0.1) 0%, rgba(22, 35, 47, 0.4) 42%, rgba(12, 20, 29, 0.94) 100%);
}

/* --- section heads: the w-75 utility is not responsive --- */
@media (max-width: 767px) {
  .sec-head.w-75 {
    width: 100% !important;
  }
}

@media (max-width: 1199px) {
  .ph-layout {
    gap: 36px 44px;
  }
  .ph-layout .ph-statement {
    font-size: 31px;
  }
}

@media (max-width: 991px) {
  .page-banner-about {
    padding-bottom: 104px;
  }
  .ab-trust {
    margin-top: -52px;
  }
  .ab-media {
    padding: 14px 40px 40px 0;
  }
  .ab-media::before {
    right: 26px;
    bottom: 26px;
    left: 14px;
  }
  .ab-media-main {
    height: 380px;
  }
  .ab-media-tag {
    top: 30px;
  }
  .ph-layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .ph-side {
    position: static;
  }
  .ph-layout .ph-statement {
    font-size: 28px;
  }
}

@media (max-width: 575px) {
  .page-banner-about {
    padding-bottom: 88px;
  }
  .ab-trust {
    margin-top: -44px;
  }
  .ab-trust .tr-grid {
    grid-template-columns: 1fr;
  }
  .ab-trust .tr-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    row-gap: 2px;
    align-items: center;
    padding: 15px 18px;
    border-right: 0;
    border-bottom: 1px solid #EAE3D9;
    text-align: left;
  }
  .ab-trust .tr-item:last-child {
    border-bottom: 0;
  }
  .ab-trust .tr-icon {
    grid-row: 1 / span 2;
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 18px;
  }
  .ab-trust .tr-label {
    font-size: 14px;
  }
  .ab-trust .tr-sub {
    font-size: 12px;
  }
  .ab-media {
    padding: 12px 30px 30px 0;
  }
  .ab-media::before {
    right: 18px;
    bottom: 18px;
    left: 12px;
  }
  .ab-media-main {
    height: 300px;
  }
  .ab-media-tag {
    top: 26px;
    left: 14px;
  }
  .ab-media-inset {
    width: 52%;
    padding: 4px;
    border-radius: 12px;
  }
  .ab-media-inset img {
    border-radius: 9px;
  }
  .ph-layout .ph-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .ph-layout .ph-item {
    padding: 22px 20px 20px;
  }
  .ph-layout .ph-word {
    font-size: 20px;
  }
}
/* ===================== end about page v3 ===================== */


/* ==========================================================================
   BRAND LOGO — sizing and alignment
   --------------------------------------------------------------------------
   The supplied logo files were 216x50 with the artwork occupying only
   x=43..171 — a 43px transparent gutter down the left edge and 44px down the
   right. That gutter was doing two bad things: it pushed the wordmark ~40px
   inward so it read as centred rather than left-aligned, and it meant only
   60% of the box was actual logo, so the mark looked small for its footprint.

   The files are now cropped to the artwork and stored at 2x (258x100) so the
   browser downscales rather than upscales. Display sizes below are kept at or
   near half the intrinsic size, which is where a 2x asset is sharpest.
   Aspect ratio is 2.58:1 — set height (or width) only, never both.
   ========================================================================== */

/* --- header --- */
.pj-logo img {
  height: 54px;          /* 139x54 rendered; 108px of the 100px source at 2x */
  width: auto;
}
.pj-header.is-stuck .pj-logo img {
  height: 46px;
}

@media (max-width: 1199px) {
  .pj-logo img {
    height: 46px;
  }
}

@media (max-width: 991px) {
  .pj-logo img,
  .pj-header.is-stuck .pj-logo img {
    height: 42px;
  }
}

/* Left-anchor the wordmark against the container edge. With the gutter gone
   the artwork itself is now flush, so no negative margin is needed. */
.pj-logo {
  margin-left: 0;
  margin-right: 0;
}

/* --- footer brand column --- */
/* The logo is the first thing in the column and sits directly above the
   "Customised holidays..." copy, flush with its left edge. */
.sf-brand {
  text-align: left;
}
.sf-logo {
  display: block;
  width: 170px;          /* 170x66 rendered from a 258x100 source */
  max-width: 100%;
  height: auto;
  margin: 0 0 18px 0;
}

/* Older footer markup still used on some pages. */
footer .footer-about img,
footer .footer-upper .footer-about img {
  display: block;
  width: 170px;
  max-width: 100%;
  height: auto;
  margin: 0 0 18px 0;
}

/* ==========================================================
   About page v3, second pass - mission / vision / values as a
   photographic panel with the two cards pulled up over its lower
   edge, and the holiday page closing CTA reused on this page.
   ========================================================== */

/* --- mission panel --- */
.mvv {
  position: relative;
}
.mvv-hero {
  position: relative;
  overflow: hidden;
  padding: 58px 56px 150px;
  border-radius: 22px;
  background-color: #16232F;
  background-size: cover;
  background-position: center 40%;
  color: #fff;
}
/* darker on the left so the copy holds, open on the right so the lake shows */
.mvv-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(92deg, rgba(9, 15, 22, 0.94) 0%, rgba(10, 17, 25, 0.84) 40%, rgba(12, 21, 30, 0.46) 72%, rgba(13, 23, 33, 0.28) 100%);
}
/* bottom shade under the overlapping cards */
.mvv-hero::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 220px;
  background: linear-gradient(180deg, rgba(12, 20, 29, 0) 0%, rgba(12, 20, 29, 0.72) 100%);
}
.mvv-hero > * {
  position: relative;
  z-index: 1;
}
.mvv-loc {
  position: absolute;
  top: 24px;
  right: 26px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 30px;
  background: rgba(12, 20, 29, 0.45);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
}
.mvv-loc i {
  font-size: 12px;
  color: #C9A971;
}
.mvv-hero-copy {
  max-width: 580px;
}
.mvv-kicker {
  display: inline-flex;
  align-items: center;
  margin-bottom: 16px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #C9A971;
}
.mvv-kicker b {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #C9A971;
}
/* the short rule between the numeral and the words */
.mvv-kicker b::after {
  content: "";
  display: inline-block;
  width: 26px;
  height: 1px;
  margin: 0 12px;
  background: #A8834E;
}
.mvv-hero-title {
  max-width: 14ch;
  margin: 0 0 14px;
  font-size: 38px;
  line-height: 1.14;
  color: #fff;
}
.mvv-hero-text {
  max-width: 50ch;
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.82);
}
.mvv-pillars {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mvv-pillars li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px 7px 7px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}
.mvv-pillars i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(201, 169, 113, 0.22);
  color: #C9A971;
  font-size: 13px;
}

/* --- vision and values cards, pulled up over the panel --- */
.mvv-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: -96px 44px 0;
}
.mvv-card {
  position: relative;
  padding: 32px 30px 30px;
  border-radius: 18px;
  box-shadow: 0 30px 60px -34px rgba(12, 20, 29, 0.6);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.mvv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 36px 64px -34px rgba(12, 20, 29, 0.7);
}
.mvv-card-vision {
  background: linear-gradient(135deg, #B48F5B 0%, #A8834E 55%, #8F6E3F 100%);
  color: #fff;
}
.mvv-card-values {
  border: 1px solid #E5DDD2;
  background: #fff;
}
.mvv-card .mvv-kicker {
  margin-bottom: 12px;
}
.mvv-card-vision .mvv-kicker,
.mvv-card-vision .mvv-kicker b {
  color: rgba(255, 255, 255, 0.88);
}
.mvv-card-vision .mvv-kicker b::after {
  background: rgba(255, 255, 255, 0.5);
}
.mvv-card-values .mvv-kicker,
.mvv-card-values .mvv-kicker b {
  color: #A8834E;
}
.mvv-icon {
  position: absolute;
  top: 26px;
  right: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 19px;
}
.mvv-card-values .mvv-icon {
  background: rgba(168, 131, 78, 0.1);
  color: #A8834E;
}
.mvv-title {
  max-width: calc(100% - 64px);
  margin: 0 0 12px;
  font-size: 23px;
  line-height: 1.25;
  color: inherit;
}
.mvv-card-values .mvv-title {
  color: #16232F;
}
.mvv-text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.68;
  color: rgba(255, 255, 255, 0.88);
}
.mvv-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.mvv-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.4;
  color: #2E3A46;
}
.mvv-list i {
  display: inline-flex;
  flex: 0 0 22px;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(168, 131, 78, 0.12);
  color: #A8834E;
  font-size: 10px;
}

/* --- closing CTA: the holiday page CTA, reused. Its rules read the
   .hl-page custom properties, so the section carries the values itself
   and this page keeps its own body class. --- */
.hl-cta {
  --ink: #16232F;
  --ink-2: #0D1620;
  --ivory: #F8F5F0;
  --sand: #EDE6DC;
  --line: #E2D9CD;
  --line-soft: #EFE9E0;
  --taupe: #8B8179;
  --body: #55504B;
  --gold: #A8834E;
  --gold-soft: #C9A971;
}
/* the sitewide h2 tracking must not undo the CTA title lettering */
body:not(.hl-page) .hl-cta-title {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

@media (max-width: 1199px) {
  .mvv-hero {
    padding: 48px 44px 140px;
  }
  .mvv-hero-title {
    font-size: 34px;
  }
  .mvv-cards {
    margin: -90px 28px 0;
  }
}

@media (max-width: 991px) {
  .mvv-hero {
    padding: 40px 32px 128px;
  }
  .mvv-hero::before {
    background: linear-gradient(180deg, rgba(9, 15, 22, 0.86) 0%, rgba(11, 19, 27, 0.9) 100%);
  }
  .mvv-hero-copy {
    max-width: none;
  }
  .mvv-hero-title {
    max-width: none;
    font-size: 30px;
  }
  .mvv-loc {
    top: 18px;
    right: 18px;
  }
  .mvv-cards {
    gap: 16px;
    grid-template-columns: 1fr;
    margin: -84px 20px 0;
  }
}

@media (max-width: 767px) {
  .mvv-cards {
    grid-template-columns: 1fr;
    margin: -72px 12px 0;
  }
}

@media (max-width: 575px) {
  .mvv-hero {
    padding: 72px 22px 104px;
    border-radius: 18px;
  }
  .mvv-hero-title {
    font-size: 26px;
  }
  .mvv-hero-text {
    font-size: 14px;
  }
  .mvv-pillars li {
    font-size: 12px;
  }
  .mvv-cards {
    margin: -64px 0 0;
  }
  .mvv-list {
    grid-template-columns: 1fr;
  }
  .mvv-card {
    padding: 26px 22px 24px;
  }
  .mvv-icon {
    top: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
    font-size: 17px;
  }
  .mvv-title {
    font-size: 20px;
  }
}
/* ===================== end about page v3, second pass ===================== */

/* ==========================================================
   About page - credentials as five individual 3D cards
   Replaces the joined white bar. Each item is now its own
   card with real thickness: three stacked solid shadows form
   the card edge, and on hover the card tips on a shared
   vanishing point while the icon plate, title and caption sit
   at different Z depths so they part in parallax.
   ========================================================== */

.ab-trust {
  position: relative;
  z-index: 3;
  margin-top: -80px;
  padding: 0;
  background: transparent;
}

.ab-trust .tr-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
  /* one shared vanishing point, so all five read as the same set of objects */
  perspective: 1200px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.ab-trust .tr-item,
.ab-trust .tr-item:last-child {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 26px 22px 24px;
  border: 1px solid #EBE3D7;
  border-radius: 16px;
  background: linear-gradient(168deg, #ffffff 0%, #fdfbf7 52%, #f6f0e6 100%);
  text-align: left;
  transform-style: preserve-3d;
  /* three solid offsets are the thickness of the card, then a cast shadow */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 2px 0 #f0e8db, 0 4px 0 #e8ded0, 0 7px 0 #dfd3c2,
    0 20px 34px -16px rgba(12, 20, 29, 0.28);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.4s ease, background 0.4s ease;
}

.ab-trust .tr-item:hover {
  border-color: rgba(168, 131, 78, 0.45);
  background: linear-gradient(168deg, #ffffff 0%, #fdfbf8 52%, #f8f3eb 100%);
  /* lifts off the page and leans back, so the edge stack becomes visible */
  transform: translateY(-12px) rotateX(9deg) scale(1.015);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 3px 0 #efe6d7, 0 6px 0 #e6daca, 0 10px 0 #dacdb8,
    0 40px 56px -22px rgba(12, 20, 29, 0.42);
}

/* --- the three depth layers --- */
.ab-trust .tr-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: 0 0 16px;
  border-radius: 15px;
  background: linear-gradient(150deg, #c9a971 0%, #a8834e 100%);
  color: #fff;
  font-size: 19px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 18px -8px rgba(140, 105, 58, 0.6);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease;
}
/* FontAwesome swaps the <i> for an inline <svg> at runtime */
.ab-trust .tr-icon svg {
  width: 1em;
  height: 1em;
}
.ab-trust .tr-label {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.28;
  color: #16232f;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.ab-trust .tr-sub {
  font-size: 12.5px;
  line-height: 1.5;
  color: #6e665f;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.ab-trust .tr-item:hover .tr-icon {
  transform: translateZ(34px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 18px 26px -10px rgba(140, 105, 58, 0.65);
}
.ab-trust .tr-item:hover .tr-label {
  transform: translateZ(20px);
}
.ab-trust .tr-item:hover .tr-sub {
  transform: translateZ(12px);
}

@media (max-width: 1199px) {
  /* once the grid wraps to two rows the banner edge would cut through the
     middle of a card, so below this width the set sits clear of the banner */
  .page-banner-about {
    padding-bottom: 60px;
  }
  .ab-trust {
    margin-top: 0;
    padding: 38px 0 0;
  }
  .ab-trust .tr-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}
@media (max-width: 767px) {
  .ab-trust {
    margin-top: 0;
    padding: 30px 0 0;
  }
  .ab-trust .tr-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .ab-trust .tr-item,
  .ab-trust .tr-item:last-child {
    padding: 22px 18px 20px;
  }
  .ab-trust .tr-icon {
    width: 44px;
    height: 44px;
    margin-bottom: 13px;
    border-radius: 13px;
    font-size: 17px;
  }
  .ab-trust .tr-label {
    font-size: 14px;
  }
  .ab-trust .tr-sub {
    font-size: 12px;
  }
}
@media (max-width: 479px) {
  .ab-trust .tr-grid {
    grid-template-columns: 1fr;
  }
}

/* a tilt that cannot be dismissed by moving the pointer away is a trap on touch */
@media (hover: none) {
  .ab-trust .tr-item:hover {
    transform: none;
  }
  .ab-trust .tr-item:hover .tr-icon,
  .ab-trust .tr-item:hover .tr-label,
  .ab-trust .tr-item:hover .tr-sub {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ab-trust .tr-item,
  .ab-trust .tr-icon,
  .ab-trust .tr-label,
  .ab-trust .tr-sub {
    transition: none;
  }
  .ab-trust .tr-item:hover {
    transform: none;
  }
  .ab-trust .tr-item:hover .tr-icon,
  .ab-trust .tr-item:hover .tr-label,
  .ab-trust .tr-item:hover .tr-sub {
    transform: none;
  }
}
/* ===================== end about credentials 3D cards ===================== */

/* ==========================================================
   Homepage v3 - rebuilt on the holiday page editorial system
   (.hl-page). Only the pieces the holiday page does not have
   are defined here: a taller hero, the about split, the
   numbered steps on a light ground, and two small link styles.
   ========================================================== */

/* --- hero: a little taller than the holiday page --- */
.hl-hero.hm-hero {
  padding: 158px 0 112px;
}
.hm-hero .hl-hero-inner {
  max-width: 680px;
}
.hm-hero .hl-hero-title {
  font-size: 44px;
}

/* --- destinations: two buttons under the row --- */
.hm-more-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 38px;
}

/* --- about split --- */
.hm-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 60px;
  align-items: center;
}
.hm-about-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  border-radius: 10px;
  background: var(--sand);
}
.hm-about-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hm-about-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(12, 20, 29, 0.82);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.hm-about-tag i {
  font-size: 12px;
  color: var(--gold-soft);
}
.hm-about-copy .hl-h2 {
  max-width: 20ch;
}
.hm-about-copy .hl-sub {
  margin-bottom: 22px;
}
.hm-facts {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.hm-facts li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--body);
}
.hm-facts span {
  flex: 0 0 auto;
  padding-top: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--gold);
}

/* --- how we work: the numbered columns on a light ground --- */
.hm-steps .hl-why-num {
  color: var(--gold);
}

/* --- small links inside the dark bands --- */
.hl-custom-note a,
.hl-cta-card-foot a {
  border-bottom: 1px solid rgba(201, 169, 113, 0.45);
  color: var(--gold-soft) !important;
  text-decoration: none !important;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.hl-custom-note a:hover,
.hl-cta-card-foot a:hover {
  border-bottom-color: #fff;
  color: #fff !important;
}
.hl-cta-card-foot {
  flex-wrap: wrap;
}

@media (max-width: 1199px) {
  .hm-hero .hl-hero-title {
    font-size: 38px;
  }
  .hm-about-grid {
    gap: 40px;
  }
}
@media (max-width: 991px) {
  .hl-hero.hm-hero {
    padding: 124px 0 72px;
  }
  .hm-hero .hl-hero-title {
    font-size: 32px;
  }
  .hm-about-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .hm-about-copy .hl-h2 {
    max-width: none;
  }
}
@media (max-width: 767px) {
  .hm-hero .hl-hero-title {
    font-size: 27px;
  }
  .hm-about-media {
    aspect-ratio: 4 / 3;
  }
  .hm-more-row .hl-btn-ghost {
    width: 100%;
  }
}
/* ===================== end homepage v3 ===================== */

/* ==========================================================
   Corporate travel page - real photography, and the service
   list rebuilt as cards. The old version was twelve bare
   chips, which read as a glossary rather than a service.
   Deliberately more restrained than the holiday page: this
   audience is procurement, not a couple booking a honeymoon.
   ========================================================== */

/* --- banner: the art is now a photograph, so lift the veil a touch --- */
.corp-banner::before {
  background: linear-gradient(180deg, rgba(11, 18, 26, 0.8) 0%, rgba(12, 20, 29, 0.72) 52%, rgba(12, 20, 29, 0.88) 100%);
}

/* --- both media frames carry portrait photographs now --- */
.corp-page .fi-media img {
  height: 560px;
  object-position: center;
}
.corp-page .sl-media {
  aspect-ratio: 4 / 5;
  max-height: 580px;
}

/* --- services as cards --- */
.cs-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 42px;
}
.cs-card {
  position: relative;
  overflow: hidden;
  padding: 26px 24px 24px;
  border: 1px solid #e5ddd2;
  border-radius: 16px;
  background: #fff;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.4s ease;
}
.cs-card:hover {
  transform: translateY(-5px);
  border-color: rgba(168, 131, 78, 0.42);
  box-shadow: 0 26px 40px -24px rgba(12, 20, 29, 0.34);
}
/* a gold rule that draws along the bottom edge, rather than the top-left
   dash used on the holiday page, so the two do not read as the same card */
.cs-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #a8834e 0%, #c9a971 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.cs-card:hover::after {
  transform: scaleX(1);
}

.cs-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 13px;
  background: #f4efe7;
  color: #a8834e;
  font-size: 17px;
  transition: background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.cs-card:hover .cs-ico {
  background: linear-gradient(150deg, #c9a971 0%, #a8834e 100%);
  color: #fff;
  box-shadow: 0 10px 18px -8px rgba(140, 105, 58, 0.55);
}
/* FontAwesome swaps the <i> for an inline <svg> at runtime */
.cs-ico svg {
  width: 1em;
  height: 1em;
}

.cs-name {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #16232f;
}
.cs-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.62;
  color: #6e665f;
}

.cs-foot {
  margin: 32px 0 0;
  text-align: center;
  font-size: 14px;
  color: #6e665f;
}
.cs-foot a {
  color: #a8834e;
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(168, 131, 78, 0.4);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.cs-foot a:hover {
  color: #8a6a3d;
  border-bottom-color: #8a6a3d;
}

@media (max-width: 1199px) {
  .cs-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .corp-page .fi-media img {
    height: 470px;
  }
}
@media (max-width: 991px) {
  .cs-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px;
  }
  .corp-page .fi-media img {
    height: 420px;
  }
  .corp-page .sl-media {
    max-height: 460px;
  }
}
@media (max-width: 575px) {
  .cs-grid {
    grid-template-columns: 1fr;
  }
  .cs-card {
    padding: 22px 20px 20px;
  }
  .corp-page .fi-media img {
    height: 360px;
  }
  .cs-foot {
    font-size: 13.5px;
  }
}

@media (hover: none) {
  .cs-card:hover {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cs-card,
  .cs-card::after,
  .cs-ico {
    transition: none;
  }
  .cs-card:hover {
    transform: none;
  }
}
/* ===================== end corporate travel page ===================== */

/* The CTA photograph has a blown-out sunlit centre exactly where the headline
   sits, so this page darkens the middle rather than the top and bottom. */
.corp-page .final-cta::before {
  background: radial-gradient(125% 95% at 50% 46%, rgba(10, 16, 24, 0.84) 0%, rgba(10, 16, 24, 0.76) 46%, rgba(10, 16, 24, 0.9) 100%);
}

/* ==========================================================
   Homepage v3, second pass - "How we work" as stacked 3D step
   cards. Each card sits on two plates set back in depth, the
   icon floats above the card face, the row steps down left to
   right, and a gold rule at the foot fills from step 1 to 4.
   On hover the card lifts and tilts towards the viewer.
   ========================================================== */
.hm-how {
  position: relative;
  overflow: hidden;
}
/* a faint warm glow behind the row so the white cards lift off the ground */
.hm-how::before {
  content: "";
  position: absolute;
  top: 40%;
  left: 50%;
  width: 70%;
  height: 60%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(201, 169, 113, 0.14) 0%, rgba(201, 169, 113, 0) 68%);
  pointer-events: none;
}
.hm-how .container {
  position: relative;
}
.hm-step-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0 20px 24px 0;
  list-style: none;
  perspective: 1600px;
}
.hm-step3d {
  position: relative;
  margin: 0;
  transform-style: preserve-3d;
}
/* a gentle staircase, so the row reads left to right as a sequence */
.hm-step3d:nth-child(2) {
  margin-top: 16px;
}
.hm-step3d:nth-child(3) {
  margin-top: 32px;
}
.hm-step3d:nth-child(4) {
  margin-top: 48px;
}
.hm-step3d-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 24px 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, #FCFAF6 100%);
  box-shadow: inset 0 1px 0 #fff, 0 26px 46px -30px rgba(22, 35, 47, 0.45);
  transform: translateZ(0);
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.4s ease;
}
/* two plates behind the card, set back in depth, so the stack reads as solid */
.hm-step3d-card::before,
.hm-step3d-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #F6F1EA;
  transform: translate3d(10px, 10px, -24px);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hm-step3d-card::after {
  background: #ECE5DA;
  transform: translate3d(20px, 20px, -48px);
}
.hm-step3d:hover .hm-step3d-card {
  border-color: var(--gold-soft);
  box-shadow: inset 0 1px 0 #fff, 0 42px 64px -34px rgba(22, 35, 47, 0.6);
  transform: translateY(-8px) rotateX(6deg) rotateY(-5deg);
}
.hm-step3d:hover .hm-step3d-card::before {
  transform: translate3d(14px, 14px, -30px);
}
.hm-step3d:hover .hm-step3d-card::after {
  transform: translate3d(28px, 28px, -60px);
}
.hm-step3d-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 18px;
}
/* the icon coin floats above the card face */
.hm-step3d-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 15px;
  background: linear-gradient(145deg, #CDAE78 0%, #A8834E 60%, #8F6E3F 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 24px -12px rgba(143, 110, 63, 0.9);
  color: #fff;
  font-size: 21px;
  transform: translateZ(28px);
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.hm-step3d:hover .hm-step3d-ico {
  transform: translateZ(44px) translateY(-2px);
}
.hm-step3d-num {
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
  color: #E2D9CC;
  transform: translateZ(10px);
  transition: color 0.4s ease;
}
.hm-step3d:hover .hm-step3d-num {
  color: var(--gold-soft);
}
.hm-step3d-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.hm-step3d-text {
  flex: 1;
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.65;
  color: var(--body);
}
.hm-step3d-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--taupe);
}
.hm-step3d-bar {
  flex: 1;
  height: 2px;
  overflow: hidden;
  border-radius: 2px;
  background: var(--line);
}
.hm-step3d-bar i {
  display: block;
  height: 100%;
  width: 25%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-soft), var(--gold));
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.hm-step3d:nth-child(2) .hm-step3d-bar i {
  width: 50%;
}
.hm-step3d:nth-child(3) .hm-step3d-bar i {
  width: 75%;
}
.hm-step3d:nth-child(4) .hm-step3d-bar i {
  width: 100%;
}

@media (max-width: 1199px) {
  .hm-step-row {
    gap: 22px;
  }
  .hm-step3d-card {
    padding: 22px 20px 18px;
  }
  .hm-step3d-num {
    font-size: 34px;
  }
}
@media (max-width: 991px) {
  .hm-step-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 24px;
    padding: 0 16px 16px 0;
  }
  .hm-step3d:nth-child(2),
  .hm-step3d:nth-child(3),
  .hm-step3d:nth-child(4) {
    margin-top: 0;
  }
  .hm-step3d-card::before {
    transform: translate3d(8px, 8px, -24px);
  }
  .hm-step3d-card::after {
    transform: translate3d(16px, 16px, -48px);
  }
}
@media (max-width: 575px) {
  .hm-step-row {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 0 12px 12px 0;
  }
  .hm-step3d-card {
    padding: 22px 20px 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hm-step3d-card,
  .hm-step3d-card::before,
  .hm-step3d-card::after,
  .hm-step3d-ico,
  .hm-step3d-bar i {
    transition: none;
  }
  .hm-step3d:hover .hm-step3d-card {
    transform: none;
  }
}
/* ===================== end homepage v3, second pass ===================== */

/* ==========================================================
   Home - Who We Are band
   Sits between the photographic hero and the photographic
   service grid. The three cards spell out the headline -
   plan, run, answer - which is the whole claim of the brand.
   Their gold edge repeats the rule beside the heading, so the
   band reads as one idea rather than two stacked rows.
   ========================================================== */

.hm-intro {
  padding: 64px 0 62px;
}

.hm-intro-top {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 30px 56px;
  align-items: start;
}

/* a gold rule that fades out, rather than a full-height border */
.hm-intro-head {
  position: relative;
  padding-left: 24px;
}
.hm-intro-head::before {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 6px;
  left: 0;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(168, 131, 78, 0.08) 100%);
}
.hm-intro .hl-h2 {
  margin-bottom: 0;
  font-size: 27px;
  /* keeps the headline from dropping a single orphan word onto line two */
  text-wrap: balance;
}

/* the first body copy on the page, so it reads as a lead paragraph */
.hm-intro-lead {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.78;
  color: var(--body);
}
.hm-intro .hl-intro-links {
  gap: 12px 14px;
  margin-top: 26px;
}

/* --- plan / run / answer, as cards --- */
.hm-beats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 46px;
}
.hm-beat {
  position: relative;
  overflow: hidden;
  padding: 28px 26px 26px 32px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.4s ease;
}
/* the heading rule again, this time as the edge of the card */
.hm-beat::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--gold) 0%, rgba(168, 131, 78, 0.1) 100%);
  transition: width 0.4s ease;
}
.hm-beat:hover {
  transform: translateY(-5px);
  border-color: rgba(168, 131, 78, 0.4);
  box-shadow: 0 26px 40px -24px rgba(12, 20, 29, 0.3);
}
.hm-beat:hover::before {
  width: 5px;
}

.hm-beat-lead {
  display: inline-block;
  margin-bottom: 11px;
  padding-bottom: 7px;
  border-bottom: 2px solid var(--gold);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}
.hm-beat-text {
  display: block;
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--body);
}

@media (max-width: 1199px) {
  .hm-intro-top {
    gap: 26px 40px;
  }
  .hm-beat {
    padding: 24px 22px 24px 28px;
  }
}
@media (max-width: 991px) {
  .hm-intro {
    padding: 52px 0 54px;
  }
  .hm-intro-top {
    grid-template-columns: 1fr;
  }
  .hm-intro .hl-h2 {
    font-size: 24px;
  }
  .hm-intro-lead {
    font-size: 15px;
  }
  .hm-beats {
    gap: 14px;
  }
}
@media (max-width: 767px) {
  .hm-beats {
    grid-template-columns: 1fr;
    margin-top: 34px;
  }
  .hm-beat-lead {
    font-size: 14.5px;
  }
}
@media (max-width: 575px) {
  .hm-intro .hl-intro-links .hl-btn,
  .hm-intro .hl-intro-links .hl-btn-ghost {
    flex: 1 1 100%;
  }
}

@media (hover: none) {
  .hm-beat:hover {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hm-beat,
  .hm-beat::before {
    transition: none;
  }
  .hm-beat:hover {
    transform: none;
  }
}
/* ===================== end home who we are band ===================== */

/* ==========================================================
   Buttons, one system. Every button on the site is now a pill
   in the brand gold, in three tiers:
     primary    solid gold, white letters
     secondary  gold outline and gold letters on a light ground
     on dark    gold outline and soft-gold letters on a photo
   Both secondary tiers fill gold on hover, so a hover always
   means the same thing. The white buttons are gone.
   ========================================================== */

/* --- shared shape --- */
.nir-btn,
.nir-btn-black,
.nir-btn-white,
.nir-btn-ghost,
.hl-btn,
.hl-btn-line,
.hl-btn-ghost,
.mm-btn,
.mc-btn,
.pj-cta,
.pj-panel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 30px;
  border-radius: 100px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
/* the icon rides on the gap, so the old margins have to go */
.nir-btn i,
.nir-btn-ghost i,
.hl-btn i,
.hl-btn-line i,
.hl-btn-ghost i,
.mm-btn i,
.mc-btn i,
.pj-cta i,
.pj-panel-cta i,
.fc-actions .nir-btn i,
.pb-actions .nir-btn i,
.experiences .nir-btn i,
.fh-actions .nir-btn i,
.tb-nav .nir-btn i,
.in-hero-actions .nir-btn i,
.in-more .nir-btn i,
.ms-content .nir-btn i,
.nir-btn-sm i {
  margin-left: 0;
  font-size: 10px;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.nir-btn:hover i,
.hl-btn:hover i,
.hl-btn-line:hover i,
.hl-btn-ghost:hover i,
.mc-btn:hover i,
.nir-btn-sm:hover i {
  transform: translateX(3px);
}

/* --- tier 1: primary, solid gold --- */
.nir-btn,
.nir-btn-black,
.nir-btn-white,
.hl-btn,
.mm-btn,
.mc-btn,
.pj-cta,
.pj-panel-cta {
  border: 1px solid #A8834E;
  background: #A8834E;
  color: #fff !important;
  box-shadow: none;
}
.nir-btn:hover,
.nir-btn-black:hover,
.nir-btn-white:hover,
.hl-btn:hover,
.hl-btn:focus-visible,
.mm-btn:hover,
.mc-btn:hover,
.pj-cta:hover,
.pj-panel-cta:hover {
  border-color: #8A6A3D;
  background: #8A6A3D;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -16px rgba(138, 106, 61, 0.9);
}
/* the old sliding fill fought the new hover colour */
.nir-btn::before,
.nir-btn-black::before,
.nir-btn-white::before {
  display: none;
}

/* --- tier 2: secondary on a light ground --- */
.hl-btn-ghost {
  border: 1px solid #A8834E;
  background: transparent;
  color: #A8834E !important;
}
.hl-btn-ghost:hover,
.hl-btn-ghost:focus-visible {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -16px rgba(138, 106, 61, 0.9);
}

/* --- tier 3: secondary over a photograph --- */
.hl-btn-line,
.nir-btn-ghost {
  border: 1px solid rgba(201, 169, 113, 0.75);
  background: rgba(12, 20, 29, 0.22);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #C9A971 !important;
}
.hl-btn-line:hover,
.hl-btn-line:focus-visible,
.nir-btn-ghost:hover {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.75);
}

/* --- small size --- */
.nir-btn-sm {
  gap: 8px;
  padding: 11px 24px;
  border-radius: 100px;
  font-size: 11px;
  letter-spacing: 0.12em;
}

/* --- focus ring, same everywhere --- */
.nir-btn:focus-visible,
.nir-btn-ghost:focus-visible,
.hl-btn:focus-visible,
.hl-btn-line:focus-visible,
.hl-btn-ghost:focus-visible,
.mm-btn:focus-visible,
.mc-btn:focus-visible,
.pj-cta:focus-visible,
.pj-panel-cta:focus-visible,
.pj-wa-btn:focus-visible {
  outline: 2px solid #C9A971;
  outline-offset: 3px;
}

/* ==========================================================
   Header: the trip button takes the brand gold, the WhatsApp
   disc becomes a gold outline that fills on hover, and the call
   block gains a divider so the three do not run together.
   ========================================================== */
.pj-cta {
  margin-left: 2px;
  padding: 13px 26px;
}
.pj-utils {
  gap: 16px;
}
.pj-wa-btn {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(168, 131, 78, 0.45);
  background: transparent;
  color: #A8834E;
  font-size: 17px;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.pj-wa-btn:hover {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff !important;
  transform: translateY(-2px);
}
/* a hairline between the WhatsApp disc and the phone number */
.pj-call {
  position: relative;
  padding-left: 16px;
}
.pj-call::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 26px;
  background: #E6E0D7;
  transform: translateY(-50%);
}
.pj-call-no {
  transition: color 0.3s ease;
}
.pj-call:hover .pj-call-no {
  color: #A8834E;
}

/* --- mobile panel and the phone action bar --- */
.pj-panel-cta {
  width: 100%;
}
.pj-actions .pj-enq {
  background: #A8834E;
  color: #fff;
}
.pj-actions .pj-enq i {
  color: #fff;
}
.pj-actions .pj-wa i {
  color: #A8834E;
}

/* ==========================================================
   Top bar: the scrolling line was being cut mid-word at both
   ends, which read as broken text. A mask fades it out instead.
   ========================================================== */
.pj-header .topbar-marquee,
.main_header_area .header-content .topbar-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}

@media (max-width: 1199px) {
  .pj-cta {
    padding: 12px 20px;
  }
  .pj-utils {
    gap: 12px;
  }
  .pj-call {
    padding-left: 12px;
  }
}
@media (max-width: 767px) {
  .nir-btn,
  .nir-btn-ghost,
  .hl-btn,
  .hl-btn-line,
  .hl-btn-ghost,
  .mc-btn {
    padding: 13px 24px;
  }
}
/* ===================== end button system ===================== */

/* The region filters on the India page are a control, not a call to
   action, so they keep the outline shape - but the selected one now
   reads in the brand gold rather than navy. */
.fp-filter.is-active {
  border-color: #A8834E;
  background: #A8834E;
  color: #fff;
}

/* The enquiry form submits through a <button>, which does not inherit
   the anchor reset, so it needs the border box and cursor spelled out. */
button.nir-btn,
button.mm-btn,
input.nir-btn {
  border: 1px solid #A8834E;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.enq-submit {
  padding: 15px 34px;
}

/* On a phone a long label must be allowed to break rather than run
   past the edge of its own pill. */
@media (max-width: 575px) {
  .nir-btn,
  .nir-btn-ghost,
  .hl-btn,
  .hl-btn-line,
  .hl-btn-ghost,
  .mc-btn,
  .mm-btn,
  .pj-panel-cta {
    white-space: normal;
    padding: 13px 22px;
  }
}

/* ==========================================================
   Card depth, rebuilt. The first version stacked two solid
   plates behind every card; on the dark photo cards those read
   as stray cream slabs, not as depth. This replaces them with
   the way a real object sits on a surface:
     a contact shadow right under the edge,
     a mid shadow for the body of the card,
     a wide soft shadow for the ambient light,
     and a hairline of light along the top edge.
   Nothing is drawn outside the card, so no layout space is
   taken and nothing can poke out from behind anything.
   On a pointer device the card lifts and turns very slightly
   towards the viewer, and every shadow grows with it.
   ========================================================== */

/* --- cards on a light ground --- */
.hl-card,
.hl-trend-card,
.hl-why-card,
.dk-card,
.ph-layout .ph-item,
.mvv-card-values,
.cs-card,
.ij-card,
.id-card,
.hm-about-media,
.hl-style-media,
.aside-card,
.quick-contact-card,
.fi-points li {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(22, 35, 47, 0.05),
    0 4px 8px -3px rgba(22, 35, 47, 0.07),
    0 14px 24px -12px rgba(22, 35, 47, 0.13),
    0 28px 44px -26px rgba(22, 35, 47, 0.2);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, background-color 0.4s ease;
}

/* --- cards that are themselves dark, or sit on a dark band --- */
.hl-region,
.hl-step,
.pp-tile,
.hl-dest,
.hl-cta-card,
.mc-card,
.fs-card,
.mvv-card-vision,
.mfc-in {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 2px 4px rgba(8, 14, 20, 0.28),
    0 10px 20px -8px rgba(8, 14, 20, 0.4),
    0 26px 42px -20px rgba(8, 14, 20, 0.5),
    0 44px 70px -40px rgba(8, 14, 20, 0.6);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, background-color 0.4s ease;
}

/* --- the lift --- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hl-card:hover,
  .hl-card:focus-visible,
  .hl-trend-card:hover,
  .hl-why-card:hover,
  .dk-card:hover,
  .ph-layout .ph-item:hover,
  .mvv-card-values:hover,
  .cs-card:hover,
  .ij-card:hover,
  .id-card:hover,
  .hl-style:hover .hl-style-media {
    transform: perspective(1400px) translateY(-10px) rotateX(2.5deg) rotateY(-3deg);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 2px 4px rgba(22, 35, 47, 0.06),
      0 10px 18px -6px rgba(22, 35, 47, 0.1),
      0 28px 44px -18px rgba(22, 35, 47, 0.2),
      0 56px 80px -40px rgba(22, 35, 47, 0.3);
  }
  .hl-region:hover,
  .hl-region:focus-visible,
  .hl-step:hover,
  .pp-tile:hover,
  .hl-dest:hover,
  .hl-dest:focus-visible,
  .fs-card:hover,
  .mvv-card-vision:hover {
    transform: perspective(1400px) translateY(-10px) rotateX(2.5deg) rotateY(-3deg);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 3px 6px rgba(8, 14, 20, 0.3),
      0 16px 28px -8px rgba(8, 14, 20, 0.44),
      0 38px 56px -20px rgba(8, 14, 20, 0.55),
      0 64px 88px -40px rgba(8, 14, 20, 0.66);
  }
}

/* --- surface: a light gradient on the plain cards so the face
   reads as lit rather than flat. Cards filled by a photograph
   are left alone, the picture is the surface. --- */
.hl-why-card,
.cs-card,
.ph-layout .ph-item,
.mvv-card-values,
.aside-card,
.quick-contact-card {
  background-image: linear-gradient(180deg, #ffffff 0%, #FCFAF7 100%);
}

/* --- the homepage process row keeps its staircase, its floating
   gold coin and its progress rule, but drops the two plates for
   the same layered depth. --- */
.hm-step3d-card::before,
.hm-step3d-card::after {
  display: none;
}
.hm-step3d-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 1px 2px rgba(22, 35, 47, 0.05),
    0 4px 8px -3px rgba(22, 35, 47, 0.07),
    0 14px 24px -12px rgba(22, 35, 47, 0.13),
    0 28px 44px -26px rgba(22, 35, 47, 0.2);
}
.hm-step-row {
  padding: 0;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hm-step3d:hover .hm-step3d-card {
    transform: perspective(1400px) translateY(-10px) rotateX(3deg) rotateY(-3deg);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.95),
      0 2px 4px rgba(22, 35, 47, 0.06),
      0 10px 18px -6px rgba(22, 35, 47, 0.1),
      0 28px 44px -18px rgba(22, 35, 47, 0.2),
      0 56px 80px -40px rgba(22, 35, 47, 0.3);
  }
}

/* --- grids: the plates are gone, so the inflated gaps and the
   reserved right and bottom room go back to normal. --- */
.hl-grid-4c,
.hl-grid-3 {
  gap: 26px;
  padding: 0;
}
.hl-trend-row {
  gap: 24px;
  padding: 0;
}
.hl-style-row {
  gap: 26px;
  padding: 0;
}
.hl-why-row {
  gap: 24px;
  padding: 0;
}
.hl-step-row {
  gap: 26px;
  padding: 0;
}
.pp-grid {
  gap: 20px;
  padding: 0;
}
.dk-grid {
  gap: 22px;
  padding: 0;
}
.mvv-cards {
  gap: 22px;
}
.cs-grid {
  gap: 22px;
  padding: 0;
}
.ij-grid,
.id-grid {
  gap: 24px;
  padding: 0;
}
.fs-grid {
  gap: 22px;
  padding: 0;
}
.mfc-grid {
  gap: 16px;
  padding: 0;
  margin-bottom: 18px;
}
.ph-layout .ph-grid {
  gap: 22px;
  padding: 0;
}
.fi-points {
  gap: 12px;
  padding: 0;
}
.hl-style-media {
  margin-bottom: 14px;
}
.aside-card {
  margin-bottom: 22px;
}
.quick-contact-card,
.hm-about-media {
  margin-bottom: 0;
}
@media (max-width: 991px) {
  .hl-cta-card,
  .mc-card {
    margin-bottom: 0;
  }
}

@media (max-width: 767px) {
  .hl-grid-4c,
  .hl-grid-3,
  .hl-style-row,
  .hl-trend-row,
  .hl-why-row,
  .hl-step-row,
  .cs-grid,
  .ij-grid,
  .id-grid,
  .fs-grid,
  .dk-grid,
  .pp-grid,
  .ph-layout .ph-grid {
    gap: 18px;
  }
}
/* ===================== end card depth ===================== */

/* ==========================================================
   3D tilt cards. Driven by js/tilt3d.js, which writes the
   pointer position into the custom properties below.
     --t3d-rx / --t3d-ry   how far the card is turned
     --t3d-z               how far it has risen off the page
     --t3d-mx / --t3d-my   where the light is striking it
     --t3d-sx / --t3d-sy   where the shadow has swung to
   At rest the card still reads as a solid slab: a lit top edge,
   a shaded bottom edge for thickness, and a sculpted shadow.
   ========================================================== */

.t3d {
  position: relative;
  transform:
    perspective(1100px)
    rotateX(var(--t3d-rx, 0deg))
    rotateY(var(--t3d-ry, 0deg))
    translateZ(var(--t3d-z, 0px));
  transform-origin: center center;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease;
  will-change: transform;
}
/* while the pointer is on the card the turn tracks it directly, so the
   motion feels attached to the cursor rather than chasing it */
.t3d.is-t3d {
  transition: transform 0.12s ease-out, box-shadow 0.3s ease, border-color 0.4s ease;
}

/* --- the moving highlight --- */
.t3d-glare {
  position: absolute;
  inset: 0;
  z-index: 4;
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--t3d-mx, 50%) var(--t3d-my, 50%),
    rgba(255, 255, 255, 0.44) 0%,
    rgba(255, 255, 255, 0.17) 22%,
    rgba(255, 255, 255, 0.04) 42%,
    rgba(255, 255, 255, 0) 62%
  );
  mix-blend-mode: overlay;
  transition: opacity 0.4s ease;
}
.t3d.is-t3d .t3d-glare {
  opacity: 1;
}
/* on a photograph the same highlight would blow out, so it is softened */
.hl-region.t3d .t3d-glare,
.hl-card.t3d .t3d-glare,
.hl-trend-card.t3d .t3d-glare,
.hl-style-media.t3d .t3d-glare,
.ij-card.t3d .t3d-glare,
.id-card.t3d .t3d-glare,
.fs-card.t3d .t3d-glare,
.dk-card.t3d .t3d-glare,
.hm-about-media.t3d .t3d-glare {
  mix-blend-mode: soft-light;
  background: radial-gradient(
    circle at var(--t3d-mx, 50%) var(--t3d-my, 50%),
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.35) 24%,
    rgba(255, 255, 255, 0) 58%
  );
}

/* --- resting slab: lit top edge, shaded bottom edge --- */
.hl-card,
.hl-trend-card,
.hl-why-card,
.dk-card,
.ph-layout .ph-item,
.mvv-card-values,
.cs-card,
.ij-card,
.id-card,
.hm-about-media,
.hl-style-media,
.aside-card,
.quick-contact-card,
.hm-step3d-card {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(22, 35, 47, 0.07),
    0 1px 1px rgba(22, 35, 47, 0.04),
    0 6px 10px -4px rgba(22, 35, 47, 0.08),
    0 18px 28px -12px rgba(22, 35, 47, 0.14),
    0 34px 52px -28px rgba(22, 35, 47, 0.22);
}
.hl-region,
.hl-step,
.pp-tile,
.hl-dest,
.hl-cta-card,
.mc-card,
.fs-card,
.mvv-card-vision,
.mfc-in {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(8, 14, 20, 0.3),
    0 10px 18px -6px rgba(8, 14, 20, 0.42),
    0 28px 44px -20px rgba(8, 14, 20, 0.52),
    0 48px 74px -40px rgba(8, 14, 20, 0.62);
}

/* --- raised: the shadow swings away from the lifted corner --- */
.t3d.is-t3d {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.98),
    inset 0 -1px 0 rgba(22, 35, 47, 0.08),
    0 2px 3px rgba(22, 35, 47, 0.06),
    calc(var(--t3d-sx, 0px) * 0.4) calc(var(--t3d-sy, 26px) * 0.4) 16px -8px rgba(22, 35, 47, 0.14),
    var(--t3d-sx, 0px) var(--t3d-sy, 26px) 40px -16px rgba(22, 35, 47, 0.26),
    calc(var(--t3d-sx, 0px) * 1.7) calc(var(--t3d-sy, 26px) * 1.7) 74px -34px rgba(22, 35, 47, 0.32);
}
.hl-region.t3d.is-t3d,
.hl-step.t3d.is-t3d,
.pp-tile.t3d.is-t3d,
.hl-dest.t3d.is-t3d,
.fs-card.t3d.is-t3d,
.mvv-card-vision.t3d.is-t3d {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.34),
    0 3px 5px rgba(8, 14, 20, 0.32),
    calc(var(--t3d-sx, 0px) * 0.4) calc(var(--t3d-sy, 26px) * 0.4) 20px -8px rgba(8, 14, 20, 0.45),
    var(--t3d-sx, 0px) var(--t3d-sy, 26px) 46px -16px rgba(8, 14, 20, 0.55),
    calc(var(--t3d-sx, 0px) * 1.7) calc(var(--t3d-sy, 26px) * 1.7) 84px -36px rgba(8, 14, 20, 0.62);
}

/* --- gold border catches the light as the card turns --- */
.hl-card.is-t3d,
.hl-trend-card.is-t3d,
.hl-why-card.is-t3d,
.dk-card.is-t3d,
.cs-card.is-t3d,
.ij-card.is-t3d,
.id-card.is-t3d,
.ph-layout .ph-item.is-t3d,
.mvv-card-values.is-t3d {
  border-color: #DCC49B;
}

/* --- layered depth inside the cards that do not clip their contents.
   The icon rides highest, the heading sits behind it, the body text
   sits deepest, so the card gains real thickness as it turns. --- */
.ph-layout .ph-item.t3d,
.mvv-card.t3d {
  transform-style: preserve-3d;
}
.ph-layout .ph-item.t3d .ph-icon {
  transform: translateZ(42px);
}
.ph-layout .ph-item.t3d .ph-num {
  transform: translateZ(30px);
}
.ph-layout .ph-item.t3d .ph-word {
  transform: translateZ(24px);
}
.ph-layout .ph-item.t3d .ph-line {
  transform: translateZ(12px);
}
.mvv-card.t3d .mvv-icon {
  transform: translateZ(40px);
}
.mvv-card.t3d .mvv-kicker {
  transform: translateZ(26px);
}
.mvv-card.t3d .mvv-title {
  transform: translateZ(20px);
}
.mvv-card.t3d .mvv-text,
.mvv-card.t3d .mvv-list {
  transform: translateZ(10px);
}

/* --- the homepage process cards already float their gold coin, so they
   only need the tilt wiring on top --- */
.hm-step3d-card.t3d {
  transform-style: preserve-3d;
}
.hm-step3d-card.t3d .hm-step3d-title {
  transform: translateZ(18px);
}
.hm-step3d-card.t3d .hm-step3d-num {
  transform: translateZ(26px);
}

/* --- the old flat hover is replaced by the tilt, so it must not fire
   at the same time and fight it --- */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .t3d:hover,
  .t3d:focus-visible,
  .hl-style:hover .hl-style-media.t3d,
  .hm-step3d:hover .hm-step3d-card.t3d {
    transform:
      perspective(1100px)
      rotateX(var(--t3d-rx, 0deg))
      rotateY(var(--t3d-ry, 0deg))
      translateZ(var(--t3d-z, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .t3d {
    transition: none;
  }
}
/* ===================== end 3D tilt cards ===================== */

/* ==========================================================
   Holiday page - intro band and package card footer
   The intro band borrows the home page band so the two read
   as the same component. The card footer turns a plain text
   link into a real pill button, and gives the price a marker
   so the two sides of the row carry equal weight.
   ========================================================== */

/* this band carries no beats row under it, so it closes tighter than the
   home page one. Both pages share a body class, hence the modifier. */
.hm-intro-lean {
  padding: 60px 0 56px;
}

/* --- package card footer --- */
/* Four across, the card is only ~218px wide between 1200 and 1400 - the
   commonest laptop widths - and a side-by-side price and button will not fit.
   Rather than let it wrap on some screens and not others, the footer stacks
   everywhere: the price reads as a line of information, and the button gets
   the full width, which is what makes it read as a button at all. */
.hl-card-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 11px;
  padding-top: 15px;
  border-top: 1px solid var(--line-soft);
}

/* price is information, not an action, so it stays a label - but a gold
   marker gives it enough weight to balance the button opposite it */
.hl-price {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: 7px;
  margin-top: 0;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--taupe);
  white-space: nowrap;
}
.hl-price::before {
  content: "";
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* view details is the action, so it reads as a button */
.hl-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: transparent;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.hl-card-cta i {
  font-size: 8.5px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-card:hover .hl-card-cta {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff;
}
.hl-card:hover .hl-card-cta i {
  transform: translateX(3px);
}

/* if a narrow card ever leaves the pair short of room, the button takes its
   own line at full width rather than squashing the label */
@media (max-width: 1199px) {
  .hl-card-foot {
    gap: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hl-card-cta,
  .hl-card-cta i {
    transition: none;
  }
}
/* ===================== end holiday intro and card footer ===================== */

/* ==========================================================
   Buttons in brown. The gold stays everywhere else - eyebrows,
   icons, rules, card accents - so the brown reads as the thing
   you click rather than a second brand colour.
   Over a photograph the outline button keeps a light warm brown
   so it is still legible, and fills solid brown on hover.
   ========================================================== */
:root {
  --pj-brown: #6B4A2E;
  --pj-brown-dark: #523722;
  --pj-brown-light: #C0996F;
}

.nir-btn,
.nir-btn-black,
.nir-btn-white,
.hl-btn,
.mm-btn,
.mc-btn,
.pj-cta,
.pj-panel-cta,
button.nir-btn,
button.mm-btn,
input.nir-btn {
  border-color: var(--pj-brown);
  background: var(--pj-brown);
  color: #fff !important;
}
.nir-btn:hover,
.nir-btn-black:hover,
.nir-btn-white:hover,
.hl-btn:hover,
.hl-btn:focus-visible,
.mm-btn:hover,
.mc-btn:hover,
.pj-cta:hover,
.pj-panel-cta:hover {
  border-color: var(--pj-brown-dark);
  background: var(--pj-brown-dark);
  color: #fff !important;
  box-shadow: 0 14px 26px -16px rgba(82, 55, 34, 0.95);
}

/* secondary on a light ground */
.hl-btn-ghost {
  border-color: var(--pj-brown);
  color: var(--pj-brown) !important;
}
.hl-btn-ghost:hover,
.hl-btn-ghost:focus-visible {
  border-color: var(--pj-brown);
  background: var(--pj-brown);
  color: #fff !important;
  box-shadow: 0 14px 26px -16px rgba(82, 55, 34, 0.95);
}

/* secondary over a photograph */
.hl-btn-line,
.nir-btn-ghost {
  border-color: rgba(192, 153, 111, 0.8);
  color: var(--pj-brown-light) !important;
}
.hl-btn-line:hover,
.hl-btn-line:focus-visible,
.nir-btn-ghost:hover {
  border-color: var(--pj-brown);
  background: var(--pj-brown);
  color: #fff !important;
}

/* header and the phone action bar */
.pj-wa-btn {
  border-color: rgba(107, 74, 46, 0.45);
  color: var(--pj-brown);
}
.pj-wa-btn:hover {
  border-color: var(--pj-brown);
  background: var(--pj-brown);
  color: #fff !important;
}
.pj-call:hover .pj-call-no {
  color: var(--pj-brown);
}
.pj-actions .pj-enq {
  background: var(--pj-brown);
}
.pj-actions .pj-wa i {
  color: var(--pj-brown);
}

/* the India page region filters */
.fp-filter.is-active {
  border-color: var(--pj-brown);
  background: var(--pj-brown);
  color: #fff;
}

/* focus ring */
.nir-btn:focus-visible,
.nir-btn-ghost:focus-visible,
.hl-btn:focus-visible,
.hl-btn-line:focus-visible,
.hl-btn-ghost:focus-visible,
.mm-btn:focus-visible,
.mc-btn:focus-visible,
.pj-cta:focus-visible,
.pj-panel-cta:focus-visible,
.pj-wa-btn:focus-visible {
  outline-color: var(--pj-brown);
}

/* ==========================================================
   Arrow slider. A native scroll rail with scroll snapping, so
   a touch swipe works with no library; the arrows page it one
   card at a time and js/slider.js drives the autoplay.
   ========================================================== */
.hl-head-row-slider {
  align-items: flex-end;
}
.hl-head-aside {
  display: flex;
  align-items: center;
  gap: 28px;
}
.hl-head-aside .hl-sub {
  max-width: 36ch;
  margin: 0;
}
.hl-slider-nav {
  display: flex;
  flex: 0 0 auto;
  gap: 10px;
}
.hl-slider-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(107, 74, 46, 0.38);
  border-radius: 50%;
  background: #fff;
  color: var(--pj-brown);
  font-size: 13px;
  cursor: pointer;
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.hl-slider-arrow:hover {
  border-color: var(--pj-brown);
  background: var(--pj-brown);
  color: #fff;
  transform: translateY(-2px);
}
.hl-slider-arrow:focus-visible {
  outline: 2px solid var(--pj-brown);
  outline-offset: 3px;
}

.hl-slider {
  position: relative;
}
/* the rail. The vertical padding is deliberate: an overflow-x box also
   clips vertically, and the cards lift and cast a shadow when they turn. */
.hl-trend-row.hl-slider-track {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 5 * 18px) / 6);
  gap: 18px;
  padding: 26px 2px 36px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hl-trend-row.hl-slider-track::-webkit-scrollbar {
  display: none;
}
.hl-trend-row.hl-slider-track > .hl-trend-card {
  scroll-snap-align: start;
}
/* the section already carries padding, so pull the rail's own back in */
.hl-trend:has(.hl-slider-track) .hl-slider {
  margin: -26px 0 -36px;
}

@media (max-width: 1199px) {
  .hl-trend-row.hl-slider-track {
    grid-auto-columns: calc((100% - 3 * 20px) / 4);
    gap: 20px;
  }
}
@media (max-width: 991px) {
  .hl-head-row-slider {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .hl-head-aside {
    width: 100%;
    justify-content: space-between;
    gap: 20px;
  }
  .hl-trend-row.hl-slider-track {
    grid-auto-columns: calc((100% - 2 * 20px) / 3);
  }
}
@media (max-width: 767px) {
  .hl-trend-row.hl-slider-track {
    grid-auto-columns: calc((100% - 16px) / 2);
    gap: 16px;
  }
}
@media (max-width: 575px) {
  .hl-head-aside {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .hl-head-aside .hl-sub {
    max-width: none;
  }
  .hl-slider-arrow {
    width: 42px;
    height: 42px;
  }
  .hl-trend-row.hl-slider-track {
    grid-auto-columns: 62%;
    gap: 14px;
    padding: 18px 2px 26px;
  }
  .hl-trend:has(.hl-slider-track) .hl-slider {
    margin: -18px 0 -26px;
  }
}
/* ===================== end brown buttons and slider ===================== */

/* ==========================================================
   Buttons take the colour out of the logo. The logo's gold
   averages #BF8136, which is too light to carry white lettering
   at an accessible contrast, so the buttons use a darker value
   of that same hue - #8A5A22, 5.7:1 against white - and the
   lighter logo gold #D3984C is kept for text over photographs.
   ========================================================== */
:root {
  --pj-brown: #8A5A22;
  --pj-brown-dark: #6B4319;
  --pj-brown-light: #D3984C;
}
.nir-btn:hover,
.nir-btn-black:hover,
.nir-btn-white:hover,
.hl-btn:hover,
.hl-btn:focus-visible,
.mm-btn:hover,
.mc-btn:hover,
.pj-cta:hover,
.pj-panel-cta:hover,
.hl-btn-ghost:hover,
.hl-btn-ghost:focus-visible {
  box-shadow: 0 14px 26px -16px rgba(107, 67, 25, 0.95);
}
.hl-btn-line,
.nir-btn-ghost {
  border-color: rgba(211, 152, 76, 0.8);
}
.pj-wa-btn {
  border-color: rgba(138, 90, 34, 0.45);
}
.hl-slider-arrow {
  border-color: rgba(138, 90, 34, 0.38);
}

/* ==========================================================
   The price and the View Details link stay on one line at every
   width. The row was dropping to two lines on a phone, which
   pushed the card taller and broke the rhythm of the grid.
   ========================================================== */
.hl-card-foot {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 13px;
}
/* the price keeps its gold marker, just tighter so the pair fits */
.hl-price {
  align-self: auto;
  flex: 0 1 auto;
  min-width: 0;
  gap: 6px;
  font-size: 9.5px;
  letter-spacing: 0.04em;
}
.hl-price::before {
  flex: 0 0 4px;
  width: 4px;
  height: 4px;
}
/* View Details goes back to a compact link, because a full-width pill is
   what was forcing it onto a second line */
.hl-card-cta {
  flex: 0 0 auto;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  gap: 6px;
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--taupe);
  white-space: nowrap;
}
.hl-card:hover .hl-card-cta {
  border-color: transparent;
  background: transparent;
  color: var(--pj-brown);
}
@media (max-width: 1199px) {
  .hl-card-foot {
    flex-direction: row;
    gap: 9px;
  }
}
@media (max-width: 575px) {
  .hl-card-foot {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }
}

/* ==========================================================
   Logo. The artwork is now supplied at twice the size it is
   drawn, so a high-density screen has real pixels to use, and
   the header draws it a little larger so the wordmark carries.
   ========================================================== */
.pj-logo img {
  height: 52px;
}
.pj-header.is-stuck .pj-logo img {
  height: 44px;
}
.sf-logo {
  max-width: 186px;
}
@media (max-width: 991px) {
  .pj-logo img {
    height: 46px;
  }
  .pj-header.is-stuck .pj-logo img {
    height: 42px;
  }
}
@media (max-width: 575px) {
  .pj-logo img {
    height: 42px;
  }
  .pj-header.is-stuck .pj-logo img {
    height: 38px;
  }
}
/* ===================== end logo, footer row and logo-gold buttons ===================== */

/* ==========================================================
   Package card footer: two buttons on one line. The price is
   the quiet one, outlined on a cream fill with a brown marker;
   View Details is the solid one that carries the action. They
   sit on a single row at every width.
   Between 1200 and 1399px the card is at its narrowest, 229px
   of content across four columns, so the pair tightens there
   rather than wrapping.
   ========================================================== */
.hl-card-foot {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}

.hl-price,
.hl-card-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 10px 14px;
  border-radius: 100px;
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

/* what it costs */
.hl-price {
  flex: 0 1 auto;
  align-self: auto;
  border: 1px solid var(--line);
  background: #FAF7F2;
  color: var(--ink);
}
.hl-price::before {
  content: "";
  flex: 0 0 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pj-brown);
}

/* the action */
.hl-card-cta {
  flex: 0 0 auto;
  width: auto;
  border: 1px solid var(--pj-brown);
  background: var(--pj-brown);
  color: #fff;
}
.hl-card-cta i {
  font-size: 8px;
}
.hl-card:hover .hl-card-cta,
.hl-card:focus-visible .hl-card-cta {
  border-color: var(--pj-brown-dark);
  background: var(--pj-brown-dark);
  color: #fff;
}
.hl-card:hover .hl-card-cta i {
  transform: translateX(3px);
}
.hl-card:hover .hl-price {
  border-color: #D9C3A0;
  background: #fff;
}

/* the narrowest the card ever gets: four across on a 1200-1399px screen */
@media (min-width: 1200px) and (max-width: 1399px) {
  .hl-card-foot {
    gap: 6px;
  }
  .hl-price,
  .hl-card-cta {
    padding: 9px 11px;
    font-size: 8.5px;
    letter-spacing: 0.03em;
  }
  .hl-price {
    gap: 5px;
  }
  .hl-price::before {
    flex: 0 0 4px;
    width: 4px;
    height: 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hl-price,
  .hl-card-cta,
  .hl-card-cta i {
    transition: none;
  }
}
/* ===================== end package card footer ===================== */

/* ==========================================================
   India destinations page, rebuilt on the holiday page system.
   Only the pieces that page does not already have are defined
   here: the five-region row, the filter bar that sits over the
   destination grid, and the why-us split.
   ========================================================== */

/* --- hero --- */
.hl-hero.in-hero {
  padding: 150px 0 104px;
}
.in-hero .breadcrumb {
  margin-bottom: 20px;
}
.in-hero .hl-hero-inner {
  max-width: 660px;
}
.in-hero .hl-hero-title {
  font-size: 42px;
}

/* --- the five regions --- */
.in-region-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 20px;
}

/* --- destination grid: heading row carries the search box --- */
.in-dest-head {
  align-items: flex-end;
  gap: 30px;
}
.in-dest-head .in-search {
  flex: 0 0 300px;
}
.in-search input {
  width: 100%;
  padding: 12px 16px 12px 42px;
  border: 1px solid var(--line);
  border-radius: 100px;
  background: #fff;
  font-size: 13.5px;
  color: var(--ink);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.in-search input::placeholder {
  color: #A79E94;
}
.in-search input:focus {
  outline: none;
  border-color: var(--pj-brown);
  box-shadow: 0 0 0 3px rgba(138, 90, 34, 0.12);
}
.in-filters {
  margin: 26px 0 30px;
}
/* the grid is the same four-across card grid as the holiday page */
.id-grid.hl-grid-4c {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
}
.fp-empty {
  margin: 26px 0 0;
  font-size: 14px;
}
/* the show-all control is a <button>, which does not inherit the anchor reset */
button.hl-btn-ghost {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

/* --- the region badge on a destination card reads as a place, not a clock --- */
.id-card .hl-card-dur {
  letter-spacing: 0.1em;
}

/* --- by experience: chips with an icon --- */
.ie-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

/* --- why us --- */
.in-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 60px;
  align-items: center;
}
.in-why-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
  background: var(--sand);
}
.in-why-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.in-why-tag {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  border-radius: 100px;
  background: rgba(12, 20, 29, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.in-why-tag i {
  flex: 0 0 auto;
  font-size: 13px;
  color: var(--gold-soft);
}
.in-why-body .hl-h2 {
  margin-bottom: 26px;
}
.in-why-list {
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.in-why-list li {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 0;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.in-why-num {
  flex: 0 0 auto;
  padding-top: 2px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--pj-brown);
}
.in-why-title {
  margin: 0 0 5px;
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.in-why-text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--body);
}

@media (max-width: 1199px) {
  .in-hero .hl-hero-title {
    font-size: 36px;
  }
  .in-region-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .id-grid.hl-grid-4c {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ie-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .in-why-grid {
    gap: 40px;
  }
}
@media (max-width: 991px) {
  .hl-hero.in-hero {
    padding: 120px 0 70px;
  }
  .in-hero .hl-hero-title {
    font-size: 30px;
  }
  .in-dest-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .in-dest-head .in-search {
    flex: 1 1 auto;
    width: 100%;
  }
  .in-region-grid,
  .id-grid.hl-grid-4c {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ie-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .in-why-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .in-why-media {
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 767px) {
  .in-hero .hl-hero-title {
    font-size: 26px;
  }
  .id-grid.hl-grid-4c {
    gap: 18px;
  }
  .ie-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 575px) {
  .in-region-grid {
    grid-template-columns: 1fr;
  }
  .id-grid.hl-grid-4c {
    grid-template-columns: 1fr;
  }
  .in-filters {
    margin: 20px 0 24px;
  }
}
/* ===================== end India destinations page ===================== */

/* ==========================================================
   India page, second pass. Three sections rebuilt and two
   added: the intro now carries fact tiles, the interests are
   photographs rather than empty chips, the why-us points are
   cards beside the picture, and the page gains a season guide
   and a FAQ.
   ========================================================== */

/* --- why India: statement beside four fact tiles --- */
.in-wi-grid {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: 60px;
  align-items: center;
}
.in-wi-copy .hl-h2 {
  max-width: 16ch;
  margin-bottom: 18px;
}
.in-wi-copy .hl-sub + .hl-sub {
  margin-top: 14px;
}
.in-wi-copy .hl-intro-links {
  margin-top: 26px;
}
.in-wi-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.in-fact {
  position: relative;
  padding: 26px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #FCFAF7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(22, 35, 47, 0.06),
    0 4px 8px -3px rgba(22, 35, 47, 0.07),
    0 18px 28px -14px rgba(22, 35, 47, 0.13);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease, box-shadow 0.4s ease;
}
.in-fact:hover {
  transform: translateY(-4px);
  border-color: #DCC49B;
}
.in-fact-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 16px;
  border: 1px solid rgba(138, 90, 34, 0.28);
  border-radius: 100px;
  background: rgba(138, 90, 34, 0.07);
  color: var(--pj-brown);
  font-size: 16px;
}
.in-fact-num {
  display: block;
  margin-bottom: 6px;
  font-size: 34px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.in-fact-num em {
  font-size: 18px;
  font-style: normal;
  color: var(--pj-brown);
}
.in-fact-title {
  margin: 0 0 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pj-brown);
}
.in-fact-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--body);
}

/* --- when to travel --- */
.in-season-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
}
.in-season {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(22, 35, 47, 0.06),
    0 4px 8px -3px rgba(22, 35, 47, 0.07),
    0 18px 28px -14px rgba(22, 35, 47, 0.13);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.35s ease;
}
.in-season:hover {
  transform: translateY(-4px);
  border-color: #DCC49B;
}
.in-season-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: linear-gradient(145deg, #A8763A 0%, #8A5A22 60%, #6B4319 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 18px -10px rgba(107, 67, 25, 0.85);
  color: #fff;
  font-size: 17px;
}
.in-season-when {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pj-brown);
}
.in-season-title {
  margin: 0 0 9px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.in-season-text {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.62;
  color: var(--body);
}
.in-season-list {
  margin: auto 0 0;
  padding: 15px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}
.in-season-list li {
  position: relative;
  margin: 0;
  padding: 4px 0 4px 15px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink);
}
.in-season-list li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-soft);
}
.in-season-note {
  margin: 32px 0 0;
  text-align: center;
  font-size: 13.5px;
  color: var(--taupe);
}

/* --- India by experience: photographs, five across --- */
.in-exp-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}
.in-exp-card .hl-style-media {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 10px;
}
.in-exp-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(to top, rgba(9, 15, 22, 0.6) 0%, rgba(11, 18, 26, 0.18) 44%, rgba(13, 22, 32, 0) 72%);
}
.in-exp-ico {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  background: rgba(12, 20, 29, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 14px;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.in-exp-card:hover .in-exp-ico {
  border-color: var(--pj-brown);
  background: var(--pj-brown);
}

/* --- why us: photograph beside four cards --- */
.in-why-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 40px;
  align-items: stretch;
}
.in-why-media {
  aspect-ratio: auto;
  min-height: 420px;
}
.in-why-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* --- FAQ: the head column keeps its button clear of the text --- */
.mice-faq .faq-head .hl-btn-ghost {
  margin-top: 22px;
}
.mice-faq .faq-intro {
  margin-bottom: 0;
}

@media (max-width: 1199px) {
  .in-wi-grid {
    gap: 40px;
  }
  .in-season-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .in-exp-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .in-wi-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .in-wi-copy .hl-h2 {
    max-width: none;
  }
  .in-exp-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .in-why-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .in-why-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
}
@media (max-width: 767px) {
  .in-wi-facts {
    gap: 14px;
  }
  .in-fact {
    padding: 22px 20px 20px;
  }
  .in-fact-num {
    font-size: 28px;
  }
  .in-season-row {
    gap: 16px;
  }
  .in-exp-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .in-why-cards {
    gap: 16px;
  }
}
@media (max-width: 575px) {
  .in-wi-facts,
  .in-season-row,
  .in-why-cards {
    grid-template-columns: 1fr;
  }
  .in-season-note {
    margin-top: 24px;
  }
}
/* ===================== end India page, second pass ===================== */

/* The template makes every <li> inline-block, which let two short season
   entries share a line while the longer ones stacked. */
.in-season-list li {
  display: block;
  width: 100%;
}

/* The cards column was being stretched to the photograph's height, which
   left the shorter cards with dead space under their text. Both columns
   now size to their content and centre against each other. */
.in-why-grid {
  align-items: center;
}
.in-why-media {
  min-height: 0;
  aspect-ratio: 4 / 5;
}
.in-why-cards {
  align-content: center;
}
@media (max-width: 991px) {
  .in-why-media {
    aspect-ratio: 16 / 10;
  }
}

/* ==========================================================
   International destinations page
   Region cards reuse the photo tiles from the India page, six
   across instead of five. The combination cards below are the
   one component the site did not already have.
   ========================================================== */

/* --- six region tiles on one row --- */
.iw-region-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: 44px;
}
/* at six across the tile is narrow, so the label type tightens to match */
.iw-region-row .hl-region-name {
  margin-bottom: 9px;
  padding-bottom: 9px;
  font-size: 14px;
  letter-spacing: 0.06em;
}
.iw-region-row .hl-region-text {
  margin-bottom: 10px;
  font-size: 11.5px;
  line-height: 1.5;
}
.iw-region-row .hl-region-cta {
  font-size: 9px;
  letter-spacing: 0.12em;
}
.iw-region-row .hl-region-body {
  right: 14px;
  bottom: 14px;
  left: 14px;
}
.iw-region-row .hl-region-index {
  top: 13px;
  left: 14px;
  font-size: 10px;
}

/* --- multi-country pairings --- */
.iw-combo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 44px;
}
.iw-combo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--ivory);
  text-decoration: none !important;
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.4s ease, background 0.4s ease;
}
.iw-combo:hover {
  transform: translateY(-5px);
  border-color: rgba(168, 131, 78, 0.42);
  background: #fff;
  box-shadow: 0 28px 44px -26px rgba(12, 20, 29, 0.32);
}
.iw-combo-pair {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
}
.iw-combo-pair i {
  font-size: 9px;
  color: var(--gold);
}
.iw-combo-note {
  display: block;
  font-size: 13px;
  line-height: 1.66;
  color: var(--body);
}
.iw-combo-go {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.iw-combo-go i {
  font-size: 8.5px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.iw-combo:hover .iw-combo-go i {
  transform: translateX(4px);
}

.iw-combo-foot {
  margin: 32px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--body);
}
.iw-combo-foot a {
  color: var(--gold);
  font-weight: 600;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(168, 131, 78, 0.4);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.iw-combo-foot a:hover {
  color: #8a6a3d;
  border-bottom-color: #8a6a3d;
}

@media (max-width: 1199px) {
  .iw-region-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
  .iw-region-row .hl-region-name {
    font-size: 16px;
  }
  .iw-region-row .hl-region-text {
    font-size: 12.5px;
  }
}
@media (max-width: 991px) {
  .iw-combo-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 34px;
  }
  .iw-region-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 34px;
  }
}
@media (max-width: 575px) {
  .iw-combo-grid {
    grid-template-columns: 1fr;
  }
  .iw-region-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .iw-region-row .hl-region-name {
    font-size: 14px;
  }
  .iw-combo {
    padding: 22px 20px 20px;
  }
  .iw-combo-pair {
    font-size: 15px;
  }
  .iw-combo-foot {
    font-size: 13.5px;
  }
}

@media (hover: none) {
  .iw-combo:hover {
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .iw-combo,
  .iw-combo-go i {
    transition: none;
  }
  .iw-combo:hover {
    transform: none;
  }
}
/* ===================== end international destinations page ===================== */

/* ==========================================================
   India page, third pass. The intro gains a photograph and
   real buttons, and its four facts become a divided strip
   rather than four boxes. The interests become photo cards
   with the label set over the picture.
   ========================================================== */

/* --- why India: copy and buttons beside a photograph --- */
.in-wi-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 64px;
  align-items: center;
}
.in-wi-copy .hl-h2 {
  max-width: 18ch;
  margin-bottom: 20px;
}
.in-wi-lead {
  max-width: 52ch;
  margin: 0 0 16px;
  font-size: 17.5px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--ink);
}
.in-wi-copy .hl-sub {
  max-width: 56ch;
}
.in-wi-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.in-wi-media {
  position: relative;
  overflow: visible;
}
.in-wi-media img {
  display: block;
  width: 100%;
  aspect-ratio: 6 / 7;
  object-fit: cover;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 6px 10px -4px rgba(22, 35, 47, 0.1),
    0 22px 34px -14px rgba(22, 35, 47, 0.18),
    0 40px 60px -32px rgba(22, 35, 47, 0.26);
}
/* the count sits on the corner of the picture */
.in-wi-badge {
  position: absolute;
  bottom: -22px;
  left: -22px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 40px -22px rgba(22, 35, 47, 0.4);
}
.in-wi-badge b {
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.01em;
  color: var(--pj-brown);
}
.in-wi-badge em {
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--taupe);
}

/* --- the four facts, as one divided strip --- */
.in-fact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 66px;
  padding-top: 38px;
  border-top: 1px solid var(--line);
}
.in-fact-strip .in-fact {
  padding: 0 32px;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  transition: none;
}
.in-fact-strip .in-fact:first-child {
  padding-left: 0;
  border-left: 0;
}
.in-fact-strip .in-fact:last-child {
  padding-right: 0;
}
.in-fact-strip .in-fact:hover {
  transform: none;
}
.in-fact-strip .in-fact-ico {
  width: 44px;
  height: 44px;
  margin-bottom: 18px;
  border: 1px solid rgba(138, 90, 34, 0.3);
  background: rgba(138, 90, 34, 0.07);
  font-size: 17px;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.in-fact-strip .in-fact:hover .in-fact-ico {
  border-color: var(--pj-brown);
  background: var(--pj-brown);
  color: #fff;
}
.in-fact-strip .in-fact-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--ink);
}
.in-fact-strip .in-fact-text {
  font-size: 13px;
  line-height: 1.65;
}

/* --- India by experience: the label sits on the photograph --- */
.in-ex-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}
.hl-region.in-ex-card {
  aspect-ratio: 4 / 5;
}
.in-ex-card .hl-region-name {
  font-size: 15px;
  letter-spacing: 0.06em;
}
.in-ex-card .hl-region-text {
  margin-bottom: 0;
  font-size: 12px;
  line-height: 1.5;
}
.in-ex-ico {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 100px;
  background: rgba(12, 20, 29, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 14px;
  transition: background 0.35s ease, border-color 0.35s ease;
}
.in-ex-card:hover .in-ex-ico {
  border-color: var(--pj-brown);
  background: var(--pj-brown);
}
.in-ex-go {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 100px;
  background: var(--pj-brown);
  color: #fff;
  font-size: 11px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.in-ex-card:hover .in-ex-go,
.in-ex-card:focus-visible .in-ex-go {
  opacity: 1;
  transform: none;
}

@media (max-width: 1199px) {
  .in-wi-grid {
    gap: 44px;
  }
  .in-wi-lead {
    font-size: 16px;
  }
  .in-fact-strip .in-fact {
    padding: 0 22px;
  }
  .in-ex-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 991px) {
  .in-wi-grid {
    grid-template-columns: 1fr;
    gap: 46px;
  }
  .in-wi-copy .hl-h2 {
    max-width: none;
  }
  .in-wi-media img {
    aspect-ratio: 16 / 10;
  }
  .in-wi-badge {
    bottom: -18px;
    left: 16px;
    padding: 14px 20px;
  }
  .in-wi-badge b {
    font-size: 30px;
  }
  .in-fact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 0;
    margin-top: 52px;
  }
  .in-fact-strip .in-fact:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .in-fact-strip .in-fact:nth-child(even) {
    padding-right: 0;
  }
  .in-ex-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .in-wi-actions .hl-btn,
  .in-wi-actions .hl-btn-ghost {
    flex: 1 1 auto;
  }
  .in-ex-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}
@media (max-width: 575px) {
  .in-wi-badge {
    left: 12px;
    bottom: -16px;
  }
  .in-fact-strip {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 42px;
  }
  .in-fact-strip .in-fact {
    padding: 0;
    border-left: 0;
  }
}
/* ===================== end India page, third pass ===================== */

/* ==========================================================
   India intro, fourth pass. The photograph is now sized by the
   copy beside it rather than by a fixed ratio, so the two
   columns always end level, and the four facts are cards in
   the same family as the rest of the site.
   ========================================================== */

/* --- the picture takes its height from the column of copy --- */
.in-wi-grid {
  align-items: stretch;
}
.in-wi-media {
  display: flex;
  min-height: 380px;
}
.in-wi-media img {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center 60%;
}
/* the copy column still centres against the picture */
.in-wi-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* --- the four facts as cards --- */
.in-fact-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin-top: 62px;
  padding-top: 0;
  border-top: 0;
}
.in-fact-strip .in-fact {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px 24px 26px;
  border: 1px solid var(--line);
  border-left: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #FCFAF7 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -1px 0 rgba(22, 35, 47, 0.06),
    0 1px 1px rgba(22, 35, 47, 0.04),
    0 6px 10px -4px rgba(22, 35, 47, 0.08),
    0 18px 28px -12px rgba(22, 35, 47, 0.14),
    0 34px 52px -28px rgba(22, 35, 47, 0.2);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease;
}
.in-fact-strip .in-fact:first-child,
.in-fact-strip .in-fact:nth-child(odd) {
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.in-fact-strip .in-fact:last-child,
.in-fact-strip .in-fact:nth-child(even) {
  padding-right: 24px;
}
/* a gold hairline draws along the top edge on hover, as on the why cards */
.in-fact-strip .in-fact::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 22px;
  width: 44px;
  height: 2px;
  background: var(--pj-brown);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.in-fact-strip .in-fact:hover::before {
  transform: scaleX(1);
}
.in-fact-strip .in-fact-ico {
  width: 46px;
  height: 46px;
  margin-bottom: 20px;
  border: 1px solid rgba(138, 90, 34, 0.3);
  border-radius: 100px;
  background: rgba(138, 90, 34, 0.07);
  color: var(--pj-brown);
  font-size: 18px;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.in-fact-strip .in-fact:hover .in-fact-ico {
  border-color: var(--pj-brown);
  background: var(--pj-brown);
  color: #fff;
}
.in-fact-strip .in-fact-title {
  margin: 0 0 9px;
  font-size: 15.5px;
  font-weight: 600;
  line-height: 1.34;
  letter-spacing: 0.03em;
  text-transform: none;
  color: var(--ink);
}
.in-fact-strip .in-fact-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: var(--body);
}

@media (max-width: 1199px) {
  .in-fact-strip {
    gap: 18px;
  }
  .in-fact-strip .in-fact {
    padding: 24px 20px 22px;
  }
  .in-fact-strip .in-fact:first-child,
  .in-fact-strip .in-fact:nth-child(odd) {
    padding-left: 20px;
  }
  .in-fact-strip .in-fact:last-child,
  .in-fact-strip .in-fact:nth-child(even) {
    padding-right: 20px;
  }
}
@media (max-width: 991px) {
  .in-wi-grid {
    align-items: start;
  }
  .in-wi-media {
    min-height: 0;
  }
  .in-wi-media img {
    aspect-ratio: 16 / 10;
    height: auto;
  }
  .in-fact-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 52px;
  }
}
@media (max-width: 575px) {
  .in-fact-strip {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 42px;
  }
}
/* ===================== end India intro, fourth pass ===================== */

/* height:100% on the image was resolving against an indefinite grid height,
   so it fell back to its own intrinsic size and ran taller than the copy.
   Filling the column absolutely lets the copy alone set the row height. */
.in-wi-media {
  display: block;
  position: relative;
  min-height: 360px;
}
.in-wi-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
}
@media (max-width: 991px) {
  .in-wi-media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }
  .in-wi-media img {
    position: absolute;
    aspect-ratio: auto;
    height: 100%;
  }
}