/*
Theme Name: Premium yacht
Theme URI: https://ciarka.dev
Author: Paweł Ciarka
Author URI: https://ciarka.dev
Description: Premium yacht theme
Version: 1.3
*/

:root {
  --primary-font: 'ABCWhyte', sans-serif;
  --secondary-font: 'SaolStandard', sans-serif;
  --mono-font: "ABCWhyte-mono", sans-serif;
  --suise-font: "SuisseIntl", sans-serif;
}

* {
  box-sizing: border-box;
}

a {
  text-decoration: none;
  color: unset;
}

.home-layout, .article {
  background-color: #FCFBF7;
}

.article {
  padding-bottom: 100px;
}


.article-full .wp-block-heading,
.article .wp-block-heading,
.simple-content .wp-block-heading {
  color: #0f1a3a;
  font-family: var(--secondary-font);
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px; /* 150% */
}

.article .wp-block-heading {
  margin-bottom: 16px;
}

.article-full p,
.simple-content p,
.article .wp-block-column p,
.article .has-text-align-center {
  color: #0f1a3a;
  font-family: var(--primary-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 160%; /* 25.6px */
  margin-bottom: 16px;
}

.simple-content h1.wp-block-heading {
  font-size: 39px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 32px;
}

.simple-content .wp-block-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.simple-content .wp-block-list li {
  color: #37405B;
  font-family: var(--primary-font);
  font-size: 16px;
  font-style: normal;
  font-weight: 300;
  line-height: 160%; /* 25.6px */
  /* Remove padding-left as we'll use a pseudo-element for spacing */
  /* padding-left: 18px; */
  list-style-type: none; /* Hide default list markers */
  position: relative; /* Establish positioning context for the pseudo-element */
}

.simple-content .wp-block-list li::before {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none"><path d="M3.79167 8C3.71528 7.54861 3.51389 7.0625 3.1875 6.54167C2.86111 6.01389 2.39583 5.52431 1.79167 5.07292C1.19444 4.62153 0.597222 4.33333 0 4.20833V3.77083C0.590278 3.63194 1.15625 3.375 1.69792 3C2.24653 2.61806 2.70486 2.15972 3.07292 1.625C3.44792 1.07639 3.6875 0.534722 3.79167 0H4.22917C4.29167 0.347222 4.41667 0.704861 4.60417 1.07292C4.79167 1.43403 5.03125 1.78125 5.32292 2.11458C5.62153 2.44097 5.95486 2.73611 6.32292 3C6.87153 3.38889 7.43056 3.64583 8 3.77083V4.20833C7.61806 4.28472 7.22222 4.44097 6.8125 4.67708C6.40972 4.91319 6.03472 5.19444 5.6875 5.52083C5.34028 5.84028 5.05556 6.17708 4.83333 6.53125C4.50694 7.05208 4.30556 7.54167 4.22917 8H3.79167Z" fill="%2337405B"/></svg>');
  position: absolute;
    left: 2px;
    top: -4px;
}

.simple-content .wp-block-image {
  margin-bottom: 16px;
  border-radius: 8px;
}
.simple-content .wp-block-image img {
    border-radius: 8px;
}

/* Add padding to the list item itself to make space for the bullet */
.simple-content .wp-block-list li {
  padding-left: 18px; /* Adjust this value based on your desired spacing */
}

.home-layout {
  overflow: hidden;
}

.btn-primary,
.wp-block-button__link.wp-block-button__link.wp-block-button__link {
  background: #192c5d;
  color: #f6f4e7;
  padding: 0 16px;
  height: 54px;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 171.429% */
  letter-spacing: 0.14px;
  cursor: pointer;
  border: 1px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-primary:hover {
  background: #162753;
}

.btn-outline,
.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: #e3af64;
  border: 1px solid #e3af64;
  padding: 0 16px;
  border-radius: 8px;
  font-weight: bold;
  text-align: center;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: #192c5d;
  color: #192c5d !important;
}

.wp-block-button__link.is-style-outline {
  border: 1px solid red;
}

.wp-block-button__link:hover {
  background-color: #333;
  color: #f6b46b;
}

.yacht-section {
  width: 100%;
  height: 100vh;
  padding: 200px 204px;
}

.yacht-hero {
  width: 100%;
  height: 100vh;
  padding: 95px 204px;
}

.yacht-section--sand {
  background-color: #f6f4e7;
}

.more-link {
  display: block;
}

.no-horizontal-padding {
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 1023.98px) {
  .padding-20 {
    padding-left: 20px;
    padding-right: 20px;
  }
}

img.lazy-img {
  filter: blur(10px);
  transition: filter 0.3s ease-out;
}

img:not(.lazy-img) {
  filter: none;
}

.btn-outline {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 8px;
  border: 1px solid #e3af64;
  color: #e3af64;
  width: fit-content;
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 171.429% */
  letter-spacing: 0.14px;
}
.btn--sm {
  height: 32px;
}


.who-we-are-and-faq {
  max-width: 1060px;
  margin: 0 auto;
  gap: 123px;
}

@media (max-width: 1023.98px) {
  .who-we-are-and-faq {
    gap: 85px;
    flex-direction: column-reverse;
  }
  form#fluentform_4 {
    padding: 0 20px;
  }
}

/* fluent form */

  form#fluentform_4  {
    margin: 32px 0;
  }
#fluentform_3 .ff-el-group,
.fluentform .ff-el-group {
  margin-bottom: 32px;
}


.ff-default .ff-el-form-control {
  background-color: #f9efe0;
  border-radius: 8px;
  border: 1px solid transparent;
  color: #a4a39a;
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 171.429% */
  min-height: 48px;
}

.ff-default .ff-el-form-control:focus {
    background-color: #f9EFE0;
    border-color: #ECCA98;
}

input:focus-visible {
  border: 0;
}

.fluentform select {
    color: #a4a39a;
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 171.429% */
}

#fluentform_3 .ff-el-input--label,
.fluentform .ff-el-input--label {
  color: #0f1a3a;
  text-transform: uppercase;

  font-family: var(--secondary-font);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 153.846% */
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

#fluentform_3 .ff-el-input--content input,
#fluentform_3 .ff-el-input--content textarea,
.fluentform .ff-el-input--content input,
.fluentform .ff-el-input--content textarea {
  background-color: #f9efe0;
  border-radius: 8px;
  border: 1px solid transparent;
}

#fluentform_3 .ff-el-input--content input,
#fluentform_3 .ff-el-input--content textarea,
#fluentform_3 .ff-el-input--content input::placeholder,
#fluentform_3 .ff-el-input--content textarea::placeholder,
.fluentform .ff-el-input--content input,
.fluentform .ff-el-input--content textarea,
.fluentform .ff-el-input--content input::placeholder,
.fluentform .ff-el-input--content textarea::placeholder {
  color: #a4a39a;
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 171.429% */
}

#fluentform_3 .ff-el-input--content input::focus-within,
#fluentform_3 .ff-el-input--content textarea::focus-within,
#fluentform_3 .ff-el-input--content input::focus,
#fluentform_3 .ff-el-input--content textarea::focus,
.fluentform .ff-el-input--content input::focus-within,
.fluentform .ff-el-input--content textarea::focus-within,
.fluentform .ff-el-input--content input::focus,
.fluentform .ff-el-input--content textarea::focus {
  border: 1px solid #ECCA98;
}

.iti-mobile .iti--container {
  z-index: 999999!important;
}

#fluentform_3 .ff-el-form-check-input,
.fluentform .ff-el-form-check-input,
#fluentform_4 .ff-el-form-check-input  {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #f9efe0;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}

#fluentform_3 .ff-el-form-check-input::before,
.fluentform .ff-el-form-check-input::before,
#fluentform_4 .ff-el-form-check-input::before {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 4px;
  transform: scale(0);
  opacity: 0.8;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em #0f1a3a;
}

#fluentform_3 .ff-el-form-check-input:checked::before,
.fluentform .ff-el-form-check-input:checked::before,
#fluentform_4 .ff-el-form-check-input:checked::before
 {
  transform: scale(1);
}

.iti--inline-dropdown .iti__dropdown-content {
  background: #F9EFE0;
    border-radius: 8px;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

.iti__search-input {
border:1px solid transparent;
}

.iti__search-input:focus,
.iti__search-input:focus-visible {
  outline: none;
  border: 1px solid #ECCA98;
}

.iti__country-name,
.iti__dial-code {
  color: #0F1A3A;
  font-family: var(--font-whyte);
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 171.429% */
}

#fluentform_3 .ff-el-form-check-label,
.fluentform .ff-el-form-check-label,
#fluentform_4 .ff-el-form-check-label {
  position: relative;
  display: grid;
  grid-template-columns: 20px auto;
  align-items: center;
  gap: 8px;

  padding: 4px 0;
  color: #37405b;
  font-family: var(--font-whyte);
  font-size: 14px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 171.429% */
}

.ff-el-input--content .error {
  font-family: var(--primary-font);
  font-size: 12px;
  font-style: normal;
  font-weight: 300;
  line-height: 24px; /* 171.429% */
}

.yacht-booking-modal #fluentform_3 .ff_submit_btn_wrapper {
  position: fixed;
  z-index: 99999;
  width: 100%;
  left: 0;
  bottom: 0;
  padding: 8px 20px 12px 20px;
  background: rgba(25, 44, 93, 0);
  backdrop-filter: blur(2px);
  margin-bottom: 0;
}

#fluentform_3 .ff-btn-submit,
.fluentform .ff-btn-submit {
  border: 0;
  width: 100%;
  height: 64px;
  padding: 0 16px;
  border-radius: 8px;
  background-color: #26428b;
  color: #f6f4e7;
  text-overflow: ellipsis;
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 171.429% */
  letter-spacing: 0.14px;
}

.ff-btn-submit:hover  {
cursor: pointer;
background-color: #162753;
}

.ff-booking-form-textarea {
  margin-bottom: 6px!important;
}

.ff-help-text-area {
color: #37405B;
font-family: var(--primary-font);
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: 24px; /* 200% */
}

.fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
    color:  #0F1A3A!important;
    content: "*"!important;
    margin-left: 0px!important;
}

.ff-booking-title {
  margin-bottom: 12px!important;
  color:  #0F1A3A;
  font-family: var(--secondary-font);
  font-size: 13px;
  font-style: normal;
  font-weight: 500;
  line-height: 20px; /* 153.846% */
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.ff-btn-submit {
  background-color: #26428B!important;
}

form.fluent_form_4 .ff-btn-submit:not(.ff_btn_no_style) {
  color: #F6F4E7;
  background-color: #26428B;
  border-radius: 8px;
}

.ff-booking-title-secondary,
.ff-booking-title-secondary p {
      color: #0f1a3a;
    text-transform: uppercase;
    font-family: var(--secondary-font)!important;
    font-size: 13px!important;
    font-style: normal!important;
    font-weight: 500!important;
    line-height: 20px!important;
    letter-spacing: 1.3px!important;
    margin-bottom: 0!important;
}

.booking-form-success {
  background-color: red;
  color: white;
  z-index: 9999999;
  width: 100%;
  height: 100%;
}

@media (min-width: 1024px) {
  .yacht-booking-modal #fluentform_3 .ff_submit_btn_wrapper {
    display: none;
  }
}

.yacht-theme-subtitle {
  color: #e3af64;
  text-align: center;
  font-family: var(--primary-font);
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px; /* 153.846% */
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

/* Site header */
.site-header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 15px 20px;
  background: transparent;
  transition: all 0.3s ease;
}

.site-header--hide {
  display: none!important;
}


@media (max-width: 750px) {
  .site-header.scrolled {
 background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.00) 100%);
}
  .site-header .site-logo .logo,
  .site-header .site-logo .light-logo {
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  
  .site-header.scrolled .site-logo .logo,
   .site-header.scrolled .site-logo .light-logo  {
    opacity: 0;
    pointer-events: none; /* Prevent interactions when invisible */
  }
}

@media (min-width: 1024px) {
  .site-header.scrolled {
  background: rgba(15, 26, 58, 0.1);
  backdrop-filter: blur(10px);
}
}



.header-content {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  align-items: center;
  max-width: 1060px;
  margin: 0 auto;
}

.site-logo img {
  height: 50px;
  width: auto;
  transition: transform 0.3s ease;
}

.site-logo:hover img {
  transform: scale(1.05);
}

.main-navigation ul.main-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 5px;
}

.main-menu li {
  position: relative;
}

.main-menu li a {
  padding: 12px 18px;
  color: #fff;
  text-decoration: none;
  display: block;
  font-family: var(--suise-font);
  font-weight: 500;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 1.25px;
  text-transform: uppercase;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.main-menu li a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s ease;
}


.main-menu li a:hover::before {
  left: 100%;
}

.main-menu li a:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

/* Dropdown styles - works for all levels */
.main-menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  font-weight: 400;
  font-style: normal;
  list-style: none;
  background: #fcfbf7;
  padding: 10px 0;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  min-width: 220px;
  z-index: 1001;
  backdrop-filter: blur(10px);
}

/* Third+ level submenus appear to the right */
.main-menu li ul li ul {
  top: 0;
  left: 100%;
  margin-left: 5px;
}

/* Alternative positioning if submenu would go off-screen */
.main-menu li ul li ul.submenu-left {
  left: -100%;
  margin-left: -5px;
}

.main-menu li ul li {
  width: 100%;
  position: relative;
}

.main-menu li ul li a {
  padding: 12px 20px;
  color: #333;
  border-radius: 0;
  font-weight: 400;
  text-transform: none;
  font-size: 13px;
  white-space: nowrap;
}

.main-menu li ul li a:hover {
  background: rgba(30, 60, 114, 0.1);
  color: #333;
  border-radius: 8px;
  transform: translateX(5px);
  margin-right: 10px;
}


@media (min-width: 769px) {
  .main-menu li:hover > ul,
  .main-menu li ul li:hover > ul {
    display: block;
    animation: fadeInUp 0.3s ease;
  }
  /* Also ensure active class doesn't cause display issues */
  .main-menu li > ul,
  .main-menu li ul li > ul {
    display: none; /* Hide by default */
  }
}

/* For mobile, show submenu based on .active */
@media (max-width: 768px) {
  .main-menu li > ul,
  .main-menu li ul li > ul {
    display: none;
  }
  .main-menu li.active > ul,
  .main-menu li ul li.active > ul {
    display: block;
    animation: fadeInUp 0.3s ease;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* Submenu indicator for all levels */
.main-menu li.menu-item-has-children > a::after {
  content: '';
  display: inline-block;
  width: 11px;
  height: 6px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6' fill='none'><path d='M10.25 0.904459L5.1875 6L0.125 0.904459L1.02359 9.14396e-07L5.1875 4.19108L9.35141 5.50375e-07L10.25 0.904459Z' fill='white'/></svg>") no-repeat center;
  background-size: contain;
  margin-left: 8px;
  transition: transform 0.3s ease;
}

/* Different arrow for nested submenus (right arrow) */
.main-menu li ul li.menu-item-has-children > a::after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='11' viewBox='0 0 6 11' fill='none'><path d='M0.904459 0.75L6 5.8125L0.904459 10.875L0 9.85141L4.19108 5.6875L0 1.52359L0.904459 0.75Z' fill='%23333'/></svg>") no-repeat center;
  width: 6px;
  height: 11px;
}

.main-menu li.menu-item-has-children:hover > a::after {
  transform: rotate(180deg);
}

/* Don't rotate nested submenu arrows */
.main-menu li ul li.menu-item-has-children:hover > a::after {
  transform: none;
}

.mobile-menu-items {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Hamburger menu */
.menu-toggle,
.menu-contact {
  display: none;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(15, 26, 58, 0.9);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1002;
}

.menu-contact {
  color: #fff;
}

.menu-toggle:hover,
.menu-contact:hover {
  background: rgba(0, 0, 0, 0.5);
  transform: scale(1.05);
}

/* Fixed typo: was .menu-conctac */
.menu-contact svg {
  transition: all 0.3s ease;
}



.menu-icon {
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: center;
  align-items: center;
  width: 20px;
  margin: 0 auto;
}

.menu-icon span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

/* Active hamburger animation */
.menu-toggle.active .menu-icon span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle.active {
  background-color: transparent;
}

.menu-toggle.active .menu-icon span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.menu-toggle.active .menu-icon span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile styles */
@media (max-width: 768px) {
  .padding-mobile-20  {
    padding: 0 20px;
  }
  .header-content {
    justify-content: space-between;
  }
  .menu-toggle {
    display: block;
  }

  .menu-contact {
    display: flex;
  }

  .site-header {
    padding: 12px 20px;
  }

  .site-header.is-active {
    background-color: #0F1A3A;
  }

  .main-navigation {
    position: fixed;
    top: 74px;
    left: 0;
    width: 100%;
    background: #0F1A3A;
    height: calc(100vh - 74px);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 999;
  }

  .main-navigation.active {
    transform: translateX(0);
  }

  .main-navigation ul.main-menu {
    flex-direction: column;
    width: 100%;
    padding: 74px 20px 0 20px;
  }

  .main-menu li {
    width: 100%;
  }

  .main-menu li a {
    height: 64px;
    color: #F6F4E7;
    border-radius: 0;
    font-weight: 500;
    font-family: var(--suise-font);
    text-transform: none;
    letter-spacing: unset;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(246, 244, 231, 0.05);
  }

  .main-menu li a:hover {
    background: #0F1A3A;
    transform: none;
  }

  /* Mobile submenu styles - works for all levels */
  .main-menu li ul {
    position: static;
    background: #0F1A3A;
    box-shadow: none;
    border-radius: 0;
    backdrop-filter: none;
    border: none;
    max-height: 0;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
  }

  .main-menu li.active > ul {
    max-height: 500px; /* Increased for nested menus */
  }

  /* First level submenu */
  .main-menu li.active > ul {
    padding-left: 24px;
  }

  /* Second level submenu */
  .main-menu li ul li.active > ul {
    padding-left: 48px;
  }

  /* Third level submenu */
  .main-menu li ul li ul li.active > ul {
    padding-left: 72px;
  }

  .main-menu li ul li a {
    height: 64px;
    padding-left: 24px;
    font-weight: 400;
    font-family: var(--suise-font);
    font-style: normal;
    color: #F6F4E7;
    font-size: 16px;
    border-bottom: 1px solid rgba(246, 244, 231, 0.05);
  }

  /* Nested submenu items get additional padding */
  .main-menu li ul li ul li a {
    padding-left: 48px;
    font-size: 15px;
  }

  .main-menu li ul li ul li ul li a {
    padding-left: 72px;
    font-size: 14px;
  }

  .main-menu li ul li:last-child a {
    border-bottom: none;
  }

  /* Mobile submenu indicator for all levels */
  .main-menu li.menu-item-has-children.arrow > a::after {
    content: '';
    display: inline-block;
    width: 11px;
    height: 10px;
    margin-left: 8px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12' fill='none'><path d='M8 0.966797L4 3.74892L0 0.966797L4 11.0338L8 0.966797Z' fill='%23F6F4E7'/></svg>") no-repeat center;
    background-size: contain;
    transition: transform 0.3s ease;
  }

  .main-menu li.menu-item-has-children.active > a::after {
    transform: rotate(180deg);
  }
}

@media (min-width: 1024px) {
  .mobile-menu-items {
    display: none;
  }
  ul.sub-menu li a {
 letter-spacing: unset;
}
  .site-header--gold .main-menu li a {
    color: #0f1a3a;
  }
  
  .site-header--gold .main-menu li.menu-item-has-children > a::after {
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='6' viewBox='0 0 11 6' fill='none'><path d='M10.25 0.904459L5.1875 6L0.125 0.904459L1.02359 9.14396e-07L5.1875 4.19108L9.35141 5.50375e-07L10.25 0.904459Z' fill='%230f1a3a'/></svg>") no-repeat center;
  }
}

/*
 * Base styles for yacht page (mobile-first)
 * This will apply to all screens by default
 */
.site-logo.is-yacht .logo,
.site-logo.is-yacht .light-logo {
  display: none;
}

.site-logo.is-yacht .light-logo {
  /* On yacht pages, show the light logo by default on mobile */
  display: block;
}

/*
 * Media query for desktop screens
 * This will override the mobile styles for screens wider than 1024px
 */
@media (min-width: 1025px) {
  .site-logo.is-yacht .logo {
    /* On desktop, show the dark logo */
    display: block;
  }
  
  .site-logo.is-yacht .light-logo {
    /* On desktop, hide the light logo */
    display: none;
  }
}

.header-right-section {
  display: none;
}
.mobile-nav-additional {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  gap: 32px;
  margin-top: 32px;
}

.explore-yachts-btn {
  display:flex;
  gap:8px;
  align-items:center;
  height: 40px;
  padding: 0 16px;
  width: 100%;
  white-space: nowrap;
  border-radius: 8px;
  background: #192c5d;
  color: #f6f4e7;
  border: none;
  cursor: pointer;
  font-family: var(--primary-font);
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.14px;
  transition: background-color 0.3s ease;
}

.explore-yachts-btn:hover {
  background: #162753;
}

.explore-yachts-btn svg {
  width: 22px;
}

.mobile-nav-additional .explore-yachts-btn {
  width: min-content;
  white-space: nowrap;
}
.header-right-section .explore-yachts-btn {
  width: min-content;
  flex: none;
}

@media (min-width: 1024px) {
  .mobile-nav-additional {
    display: none;
  }

  .header-right-section{
  display: flex;
  gap: 12px;
  align-items: center;
  }

  .header-right-section .search-yacht-btn {
    width: min-content;
    flex: none;
  }
}