/* Custom Contact Form and Header Styles - Unique Class Names */

/* ==========================================================================
  ZOOM COMPATIBILITY - Keep content centered when zooming
  =========================================================================== */

/* Ensure content stays centered at all zoom levels without changing layout */
/* html,
body {
  overflow-x: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
} */

/* Keep content centered during zoom without affecting fixed positioned elements */
/* body {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
} */

/* FAB will now work properly without transform interference */

/* ==========================================================================
  HEADER STYLES
  =========================================================================== */

/* Main header container */
.tabnav-header {
  width: 100%;
  display: block;
  padding-top: 0px;
}

.tabnav-header-wrapper {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}

.tabnav-header-wp {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0;
}

/* Header menu styles */
.tabnav-tra-menu .tabnav-wsmainfull {
  padding: 20px 0;
  background-color: transparent !important;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.tabnav-tra-menu .tabnav-landing-nav {
  padding: 0;
  background-color: white !important;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

/* Hidden header state */
.tabnav-header.tabnav-hidden-header {
  display: none;
}

.tabnav-hidden-nav .tabnav-wsmainfull {
  margin-top: -140px;
}

/* Desktop logo */
.tabnav-desktop-logo {
  padding: 0;
  margin: 0;
  line-height: 70px;
}

.tabnav-desktop-logo img {
  vertical-align: middle;
}

/* Mobile header */
.tabnav-wsmobileheader {
  clear: both;
}

.tabnav-wsmobileheader .tabnav-smllogo {
  display: block;
  line-height: 70px;
}

/* Navigation menu */
.tabnav-wsmenu {
  padding: 0;
  float: right;
  display: block;
}

.tabnav-wsmenu > .tabnav-wsmenu-list {
  text-align: left;
  margin: 0 auto 0 auto;
  width: 100%;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li {
  text-align: center;
  display: block;
  padding: 0;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li > a {
  display: block;
  color: #666;
  font-size: 15px;
  padding: 0 20px;
  line-height: 70px;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li > a.last-link {
  padding: 10px 0px 10px 0;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li > a.callusbtn {
  font-size: 15px;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li > a.callusbtn i {
  font-size: 13px;
  margin-top: 1px;
  margin-right: 1px;
}

/* Menu color variations */
.tabnav-tra-menu .tabnav-wsmenu > .tabnav-wsmenu-list > li > a,
.tabnav-aqua-menu .tabnav-wsmenu > .tabnav-wsmenu-list > li > a,
.tabnav-blue-menu .tabnav-wsmenu > .tabnav-wsmenu-list > li > a {
  color: #fff;
}

.tabnav-white-menu .tabnav-wsmenu > .tabnav-wsmenu-list > li > a {
  color: #444;
}

.tabnav-tra-menu .tabnav-wsmenu.tabnav-dark-txt > .tabnav-wsmenu-list > li > a {
  color: #333;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li:hover > a {
  color: #f0f0f0;
}

.tabnav-white-menu .tabnav-wsmenu > .tabnav-wsmenu-list > li:hover > a {
  color: #171819;
}

/* Menu icons */
.tabnav-wsmenu > .tabnav-wsmenu-list > li > a i {
  display: inline-block;
  font-size: 16px;
  line-height: inherit;
  margin-right: 8px;
  vertical-align: middle;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li > a.menuhomeicon i {
  margin-right: 0px;
  font-size: 15px;
}

/* Right menu items */
.tabnav-wsmenu > .tabnav-wsmenu-list > li.tabnav-rightmenu {
  float: right;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li.tabnav-rightmenu a {
  padding: 0px 30px 0px 20px;
  border-right: none;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li.tabnav-rightmenu a i {
  font-size: 15px;
}

/* Sub menu styles */
.tabnav-wsmenu > .tabnav-wsmenu-list > li > ul.tabnav-sub-menu {
  position: absolute;
  top: 70px;
  z-index: 1000;
  background: #fff;
  min-width: 200px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 4px 4px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > ul.tabnav-sub-menu.tabnav-last-sub-menu {
  min-width: 160px;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li > ul.tabnav-sub-menu > li {
  position: relative;
  margin: 0px;
  padding: 0px;
  border-bottom: 1px solid #f0f0f0;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li > ul.tabnav-sub-menu > li > a {
  position: relative;
  background-image: none;
  border-right: 0 none;
  color: #666;
  font-size: 14px;
  line-height: 22px;
  padding: 9px 15px 9px 20px;
  display: block;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > ul.tabnav-sub-menu.tabnav-last-sub-menu
  > li
  > a {
  padding: 11px 0;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li > ul.tabnav-sub-menu > li > a:hover {
  padding: 9px 9px 9px 10px;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > ul.tabnav-sub-menu.tabnav-last-sub-menu
  > li
  > a:hover {
  padding: 11px 0 11px 8px;
}

/* Mega menu styles */
.tabnav-wsmenu > .tabnav-wsmenu-list > li > .tabnav-wsmegamenu {
  width: 100%;
  left: 0px;
  position: absolute;
  top: 70px;
  z-index: 1000;
  background: #fff;
  padding: 30px 30px;
  -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  border-radius: 0 0 4px 4px;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(10px);
  -moz-transform: translateY(10px);
  -ms-transform: translateY(10px);
  -o-transform: translateY(10px);
  transform: translateY(10px);
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.tabnav-wsmenu > .tabnav-wsmenu-list > li > .tabnav-wsmegamenu.tabnav-halfmenu {
  padding: 20px 20px;
}

/* Link list in mega menu */
.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  li {
  display: block;
  text-align: center;
  text-align: left;
  margin-bottom: 15px;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  li.title,
.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  li:last-child {
  border-bottom: none;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  li:last-child {
  margin-bottom: unset;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  li
  a {
  line-height: 22px;
  border-right: none;
  text-align: left;
  color: #666;
  font-size: 14px;
  padding: 0;
  display: block;
  text-decoration: none;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  li
  a:hover {
  color: #7b3bd6;
  padding-left: 5px;
}

/* Larger mega menu */
.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-largermegamenu {
  display: flex;
  flex-direction: column;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  .tabnav-largermegamenu
  li {
  width: 40%;
  margin-bottom: 15px;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  .tabnav-largermegamenu
  li:nth-of-type(1),
.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  .tabnav-largermegamenu
  li:nth-of-type(5) {
  margin-top: 30px;
}

/* Wider dropdown wrapper */
.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu.tabnav-w-75.tabnav-widerdropdownwrapper {
  width: 38em !important;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu.tabnav-w-75.tabnav-widerdropdownwrapper
  .tabnav-row.tabnav-new-flex-row-mega {
  height: 100%;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu.tabnav-w-75.tabnav-widerdropdownwrapper
  .tabnav-row.tabnav-new-flex-row-mega
  > div {
  margin-bottom: unset;
  margin-top: unset;
  width: 100%;
}

/* Description and SVG wrapper */
.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  li
  a
  .tabnav-description-and-svg-wrapper {
  display: flex;
  flex-direction: column;
  align-content: center;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  li
  a
  .tabnav-description-and-svg-wrapper
  span {
  color: #170b28;
  font-size: 1rem;
  line-height: unset;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  li
  a
  > div {
  display: flex;
  justify-content: start;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  li
  a
  .tabnav-description-and-svg-wrapper
  .tabnav-smallerdescription {
  margin-top: 4px;
  font-size: 0.75rem;
  color: #666;
}

.tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > .tabnav-wsmegamenu
  .tabnav-link-list
  li
  a
  .tabnav-description-and-svg-wrapper
  svg {
  transform: translateX(10px);
}

/* Navbar dark styles */
.tabnav-navbar-dark
  .tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > a.tabnav-h-link {
  color: #161636;
}

.tabnav-navbar-light
  .tabnav-wsmenu
  > .tabnav-wsmenu-list
  > li
  > a.tabnav-h-link {
  color: #fff;
}

/* Store header styles */
.tabnav-wsmenu > .tabnav-wsmenu-list > li a.tabnav-store.tabnav-header-store {
  line-height: 1;
  margin-top: 13px;
  margin-left: 10px;
  margin-bottom: 0;
  padding: 0;
}

.tabnav-store.tabnav-header-store img {
  max-height: 44px;
}

/* Header social links */
.tabnav-header-socials {
  margin: 0;
  display: inline-block;
}

/* Scroll states */
.tabnav-white-scroll .tabnav-scroll .tabnav-hover--tra-white:hover {
  color: #452179 !important;
  background-color: transparent !important;
  border-color: #452179 !important;
}

.tabnav-white-scroll .tabnav-scroll .tabnav-hover--tra-grey:hover,
.tabnav-black-scroll .tabnav-scroll .tabnav-hover--tra-grey:hover {
  color: #353f4f !important;
  background-color: transparent !important;
  border-color: #ccc !important;
}

/* ==========================================================================
  ANIMATIONS
  =========================================================================== */

/* Slide up fade in animation for contact form */
@keyframes slideUpFadeIn {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Alternative slide up animation for mobile/smaller screens */
@keyframes slideUpFadeInMobile {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
  CONTACT FORM STYLES
  =========================================================================== */

/* Prevent iOS zoom on input focus - Multiple techniques */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  .tabnav-contact-input input,
  .tabnav-contact-textarea textarea,
  .tabnav-contact-input select,
  .tabnav-contact-input-full select,
  .tabnav-dropdown-selected {
    -webkit-text-size-adjust: 100%;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Additional prevention for iOS Safari */
  .tabnav-contact-input input:focus,
  .tabnav-contact-textarea textarea:focus,
  .tabnav-contact-input select:focus,
  .tabnav-contact-input-full select:focus,
  .tabnav-dropdown-selected:focus {
    -webkit-text-size-adjust: 100%;
    transform: scale(1);
  }
}

/* Main contact section */
.tabnav-contact-section {
  max-width: 1920px;
  margin: 0 auto;
  padding-bottom: 225px;
  background: linear-gradient(to bottom, transparent 500px, #ffffff 500px);
  background-size: cover;
  background-position: top;
  background-repeat: no-repeat;
  position: relative;
  /* Keep content centered during zoom */

  box-sizing: border-box;
}

/* Background image wrapper */
.tabnav-contact-bg-wrapper {
  position: absolute;
  top: -62px;
  left: -151px;
  width: 100%;
  height: 838px;
  z-index: 1;
  pointer-events: none;
}

/* Background image responsive breakpoints */
@media (max-width: 1400px) {
  .tabnav-contact-bg-wrapper {
    left: -100px;
    width: 120%;
  }
}

@media (max-width: 1200px) {
  .tabnav-contact-bg-wrapper {
    left: -119px;
    width: 110%;
  }
}

@media (max-width: 1000px) {
  .tabnav-contact-bg-wrapper {
    left: -60px;
    width: 105%;
  }
}

/* Background image is hidden in mobile view (1019px and below), so no need for responsive adjustments */
.img-fluid.contact-us-avatars {
  width: 130px;
  height: 100%;
}

/* Responsive contact avatars */
@media (max-width: 768px) {
  .img-fluid.contact-us-avatars {
    width: 100px;
    margin-bottom: 10px;
  }
}

@media (max-width: 480px) {
  .img-fluid.contact-us-avatars {
    width: 85px;
    margin-bottom: 8px;
  }
}

@media (max-width: 360px) {
  .img-fluid.contact-us-avatars {
    width: 75px;
    margin-bottom: 6px;
  }
}

.tabnav-contact-bg-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left center;
}

/* Background image scaling breakpoints */
@media (max-width: 1400px) {
  .tabnav-contact-bg-image {
    transform: scale(0.9);
    transform-origin: left center;
  }
}

@media (max-width: 1200px) {
  .tabnav-contact-bg-image {
    transform: scale(0.8);
    transform-origin: left center;
  }
}

@media (max-width: 1000px) {
  .tabnav-contact-bg-image {
    transform: scale(0.7);
    transform-origin: left center;
  }
}

.tabnav-contact-content {
  border-radius: 10px;
  padding: 20px;
  background: #170b28;
  box-shadow: 2px 2px 49px #946ec8;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  position: absolute;
  top: 2px;
  left: 12%;
  transform: translateX(-50%);
  z-index: 1;
}

.tabnav-contact-wrapper {
  max-width: 1995px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  position: relative;
  top: 170px;
  z-index: 2;
}

/* Contact info section */
.tabnav-contact-info-wrapper {
  max-width: 1320px;
  width: 100%;
}

.tabnav-contact-info {
  width: 100%;
  max-width: 439px;
  height: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: right;
  right: 35px;
  top: 20px;
  margin-left: 37%;

  /* Animation removed */
}

.tabnav-contact-title {
  color: #3b3f44;
  font-size: 38px;
  font-family: Roboto, sans-serif;
  font-weight: 500;
  line-height: 105px;
  position: relative;
  display: flex;
  align-items: center;
  user-select: text;
}

.tabnav-contact-img {
  margin-left: 10px;
  height: auto;
  width: auto;
  max-height: 30px;
  max-width: 16%;
}

.tabnav-contact-description {
  color: #3b3f44;
  font-size: 0.9rem;
  font-family: Roboto, sans-serif;
  font-weight: 400;
  line-height: 27px;
  margin-top: 25px;
  user-select: text;
  padding-right: 81px;
  letter-spacing: 0.05rem;
}

.tabnav-contact-email {
  font-weight: 700;
  color: #8e56dc;
}

/* Contact form section */
.tabnav-contact-form {
  min-width: 565px;
  padding: 29px;
  background: linear-gradient(0deg, #fefefe 0%, #fefefe 100%);
  box-shadow: 6px 7px 16px rgba(0, 0, 0, 0.25);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  z-index: 2;
  margin-left: 16%;
}

/* Animation only for contact form, not thank you container */
.tabnav-contact-form:not(.tabnav-thank-you-container) {
  /* Initial state for slide-up animation */
  opacity: 0;
  transform: translateY(40px);
  animation: slideUpFadeIn 0.8s ease-out 0.3s forwards;
}

.tabnav-form-header {
  width: 100%;
  margin-bottom: 30px;
  text-align: left;
}

.tabnav-form-title {
  color: #0a2540;
  font-size: 26px !important;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  line-height: 1.2;
  margin-bottom: 12px;
  letter-spacing: 0.02rem;
}

.tabnav-form-description {
  color: #425466;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 1.5;
  margin: 0;
  letter-spacing: 0.01rem;
}

.tabnav-contact-form-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: opacity 1s ease;
}

.tabnav-contact-form-row {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.tabnav-contact-label-column {
  width: 35%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 38px;
}

.tabnav-contact-input-column {
  width: 65%;
  display: flex;
  flex-direction: column;
}

.tabnav-contact-label {
  color: #42464b;
  font-size: 15px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  line-height: 35px;
  margin-bottom: 0;
  letter-spacing: 0.03rem;
  text-align: right;
}

.tabnav-optional-text {
  color: #999;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  margin: -6px 0 0 0;
  letter-spacing: 0.02rem;
  text-align: right;
}

.tabnav-contact-input,
.tabnav-contact-input-full {
  width: 100%;
  margin-bottom: 0;
}

.tabnav-contact-input input,
.tabnav-contact-textarea textarea,
.tabnav-contact-input select,
.tabnav-contact-input-full select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  color: #42464b;
  background-color: #f6f9fc;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.tabnav-contact-textarea textarea#help-message {
  height: 70px;
  padding: 8px;
  font-weight: 400;
  resize: none;
  overflow: hidden;
}

.tabnav-contact-input input:focus,
.tabnav-contact-textarea textarea:focus,
.tabnav-contact-input select:focus,
.tabnav-contact-input-full select:focus {
  outline: none;
  background-color: #ffffff;
  box-shadow: 0 0 0 2px #8e56dc;
}

.tabnav-contact-textarea {
  width: 100%;
  margin-bottom: 0;
}

.tabnav-contact-textarea textarea {
  height: 100px;
  padding: 12px;
  max-height: 200px;
  resize: vertical;
}

.tabnav-contact-submit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 30px;
}

.tabnav-contact-submit button {
  width: fit-content;
  padding: 5px 22px;
  background: #8e56dc;
  box-shadow: -1px 3px 9px rgba(0, 0, 0, 0.25);
  border-radius: 7px;
  border: 2px solid rgba(255, 255, 255, 0.26);
  color: white;
  font-size: 15px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chevron-right {
  width: 13px;
  height: 13px;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.tabnav-contact-submit button:hover {
  background: #7a4bc4;
  transform: translateY(-1px);
}

.tabnav-contact-submit button:hover .chevron-right {
  transform: translateX(2px);
}

.tabnav-contact-submit button:active {
  transform: translateY(0);
}

.tabnav-clean-button {
  background: none !important;
  color: #0a2540 !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 15px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 5px 0 !important;
}

.tabnav-clean-button:hover {
  color: #1a3a5c !important;
  transform: none !important;
}

/* Arrow image container (now inside full-width section) */
.tabnav-arrow-image-container {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  /* align-items: center; */
  padding: 0 20px 20px 20px;
  gap: 15px;
  background-color: #ffffff;
}

.tabnav-trusted-by-text {
  margin-bottom: 55px;
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  font-weight: 500;
  color: #965bbf;
  white-space: nowrap;
}

.tabnav-arrow-image {
  max-width: 7%;
  height: auto;
  display: block;
}

/* Full width image section (now contains both arrow and full-width image) */
.tabnav-full-width-image-section {
  width: 100%;
  margin: 0;
  padding-bottom: 45px;
  padding-top: 35px;
  position: relative;
  background-color: #ffffff;
  z-index: 0;
}

/* Add spacing when thank you container is displayed */
body.thank-you-displayed .tabnav-full-width-image-section {
  margin-top: 200px;
}

/* Modify background wrapper when thank you form is displayed */


.tabnav-full-width-image-container {
  max-width: 1920px;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  display: block;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}

.tabnav-full-width-image {
  width: 1920px; /* Fixed width to prevent shrinking */
  height: auto;
  display: block;
  margin: 0;
  padding: 0;
  min-width: 1920px; /* Ensure it never goes below this width */
}

/* Gradient fade overlay on sides */
.tabnav-full-width-image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.4) 8%,
    rgba(255, 255, 255, 0) 14%,
    rgba(255, 255, 255, 0) 86%,
    rgba(255, 255, 255, 0.4) 92%,
    rgba(255, 255, 255, 0.7) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Decoration container */
.tabnav-contact-deco-container {
  position: relative;
}

.tabnav-img-deco-contact {
  position: absolute;
  top: 13px;
  left: 93%;
  transform: translateX(-50%) translateY(-100%);
  width: 30px;
  height: auto;
}

/* Error text styles */
.tabnav-error-text {
  color: #dc3545;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;

  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: none;
  text-align: left;
}

.tabnav-error-text.visible {
  opacity: 1;
  display: block;
}

/* Checkbox error text positioning - back in checkbox wrapper */
.tabnav-checkbox-wrapper .tabnav-error-text-checkbox {
  margin-left: 0;
  width: 100%;
  clear: both;
}

.tabnav-error-text-checkbox {
  color: #dc3545;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;

  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: none;
}

.tabnav-error-text-checkbox.visible {
  opacity: 1;
  display: block;
}

/* Error message styles */
.tabnav-error-message {
  background-color: #ffcbcb;
  color: #730000;
  font-size: 14px;
  margin-top: 5px;
  opacity: 0;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  border-radius: 4px;
  padding: 5px 10px;
  display: none;
}

.tabnav-error-message.visible {
  opacity: 1;
  display: block;
}

/* Thank you message */
.tabnav-thank-you-message {
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Thank you confirmation container */
.tabnav-thank-you-container {
  background: linear-gradient(0deg, #fefefe 0%, #fefefe 100%);
  box-shadow: 6px 7px 16px rgba(0, 0, 0, 0.25);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 8%;
  text-align: left;
  opacity: 0;
  transform: translateY(40px);
  /* Removed automatic transition to prevent double animation */
}

.tabnav-thank-you-container.visible {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.6s ease;
}

.tabnav-thank-you-header {
  width: 100%;
  margin-bottom: 40px;
  display: flex;
  flex-direction: column;
}

.tabnav-thank-you-icon {
  margin-bottom: 24px;
  animation: checkmarkScale 0.6s ease-out;
}

@keyframes checkmarkScale {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.tabnav-thank-you-title {
  color: #0a2540;
  font-size: 22px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: 16px;
  letter-spacing: 0.02rem;
}

.tabnav-thank-you-description {
  color: #425466;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 1.6;
  margin: 0;
  max-width: 310px;
  letter-spacing: 0.01rem;
}

.tabnav-thank-you-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;

  gap: 20px;
  flex-wrap: wrap;
}

.tabnav-return-home-button {
  padding: 6px 20px;
  background: #8e56dc;
  box-shadow: -1px 3px 9px rgba(0, 0, 0, 0.25);
  border-radius: 7px;
  border: 2px solid rgba(255, 255, 255, 0.26);
  color: white;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.tabnav-return-home-button:hover {
  background: #7a4bc4;
  transform: translateY(-1px);
  color: white;
}

.tabnav-return-home-button:hover .chevron-right {
  transform: translateX(2px);
}

.tabnav-return-home-button:active {
  transform: translateY(0);
}

.tabnav-send-another-button {
  background: none !important;
  color: #0a2540 !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 16px;
  font-family: Inter, sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
  padding: 12px 16px !important;
  text-decoration: underline;
}

.tabnav-send-another-button:hover {
  color: #1a3a5c !important;
  transform: none !important;
}

/* Responsive styles for thank you container */
@media (max-width: 768px) {
  .tabnav-thank-you-container {
    padding: 30px 20px;
  }

  .tabnav-thank-you-title {
    font-size: 32px;
  }

  .tabnav-thank-you-description {
    font-size: 16px;
  }

  .tabnav-thank-you-actions {
    flex-direction: column;
    gap: 16px;
  }

  .tabnav-return-home-button,
  .tabnav-send-another-button {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .tabnav-thank-you-container {
    padding: 25px 15px;
  }

  .tabnav-thank-you-title {
    font-size: 30px;
  }

  .tabnav-thank-you-description {
    font-size: 15px;
  }
}

/* Custom select styles */
.tabnav-custom-select-wrapper {
  position: relative;
  width: 100%;
}

.tabnav-custom-select {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #42464b;
  background-color: #f0f5ff;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.tabnav-custom-select:focus {
  outline: none;
  background-color: #ffffff;
  box-shadow: 0 0 0 2px #8e56dc;
}

/* Custom option styling for dropdown */
.tabnav-custom-select option {
  background-color: #f0f5ff;
  color: #333;
  padding: 8px 12px;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
}

/* Custom Dropdown Styling */
.tabnav-custom-dropdown {
  position: relative;
  width: 100%;
}

.tabnav-dropdown-selected {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  color: #42464b;
  background-color: #f6f9fc;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 20px;
  transition:
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

.tabnav-dropdown-selected:hover {
  background-color: #e8f0ff;
}

.tabnav-dropdown-selected.active {
  background-color: #ffffff;
  box-shadow: 0 0 0 2px #8e56dc;
}

.tabnav-dropdown-selected:focus {
  outline: 2px solid #8e56dc;
  outline-offset: 2px;
  border-radius: 8px;
}

.dropdown-arrow {
  color: #0a2540;
  transition: transform 0.3s ease;
}

.tabnav-dropdown-selected.active .dropdown-arrow {
  transform: rotate(180deg);
}

.tabnav-dropdown-options {
  position: absolute;
  top: 110%;
  font-size: 13px;
  left: 0;
  right: 0;
  background-color: #f1f4fd;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  display: none;
  padding: 8px 0;
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.tabnav-dropdown-options.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.tabnav-dropdown-option {
  padding: 12px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.tabnav-dropdown-option:hover {
  background-color: #e8f0ff;
}

.tabnav-dropdown-option:focus {
  outline: 2px solid #8e56dc;
  outline-offset: -2px;
  background-color: #e8f0ff;
  border-radius: 8px;
}

.option-title {
  color: #8e56dc;
  font-weight: 700;
}

.option-title.selected {
background: linear-gradient(
  90deg,
  #884DAF 0%,
  #8E53B5 10%,
  #965BBF 25%,
  #A065CB 43%,
  #A371D7 63%,
  #A180E4 81%,
  #A08EF0 100%
);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
}

.option-description {
  color: #333;
  font-weight: 400;
}

/* Responsive adjustments */

/* Desktop Large (1200px and up) - Default styles already defined above */

/* Desktop Medium (1020px to 1199px) */
@media (max-width: 1199px) {
  .tabnav-contact-wrapper {
    padding: 0 15px;
  }

  .tabnav-contact-form {
    min-width: 520px;
    margin-left: 8%;
  }

  .tabnav-contact-info {
    margin-left: 35%;
    padding-right: 60px;
  }
}

/* Tablet Landscape (1020px to 1199px) and below */
@media (max-width: 1019px) {
  /* Show mobile background image in mobile view */
  .tabnav-contact-bg-wrapper {
    display: block;
    top: -192px;
    left: 0;
    height: 100%;
    background-image: url("../images/contact-us-background-mobile.png");

    background-position: center;
    background-repeat: no-repeat;
  }

  .tabnav-contact-bg-image {
    display: none;
  }

  .tabnav-contact-wrapper {
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    padding: 0 20px;
    top: 84px;
  }

  /* Reorder elements - contact info first, then form */
  .tabnav-contact-info-wrapper {
    order: 1;
    width: 100%;
    margin-bottom: 30px;
    text-align: left;
  }

  .tabnav-contact-form {
    order: 2;
    width: 100%;
    max-width: 600px;
    margin: 0;
    min-width: auto;
  }

  .tabnav-contact-info {
    align-items: flex-start;
    text-align: left;
    right: -30px;
    top: 0;
    margin: 0 auto;
    max-width: 600px;
    padding-right: 20px;
  }

  .tabnav-contact-title {
    font-size: 32px;
    line-height: 1.2;
  }

  .tabnav-contact-description {
    padding: 0;
    max-width: 285px;
    margin-top: 20px;
  }

  .tabnav-form-header {
    text-align: left;
    margin-bottom: 25px;
  }

  .tabnav-form-title {
    font-size: 24px !important;
  }

  .tabnav-form-description {
    font-size: 13px;
  }

  .tabnav-contact-form-row {
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
  }

  .tabnav-contact-label-column {
    width: 100%;
    min-height: auto;
    align-items: flex-start;
  }

  .tabnav-contact-input-column {
    width: 100%;
  }

  .tabnav-contact-label {
    text-align: left;
    margin-bottom: 5px;
  }

  .tabnav-optional-text {
    text-align: left;
    margin-top: 1px;
  }

  .tabnav-error-text {
    text-align: left;
  }

  .tabnav-img-deco-contact {
    display: none; /* Hide decorative image on smaller screens */
  }

  /* Adjust thank you container for tablet */
  .tabnav-thank-you-container {
    margin-left: 0;
    max-width: 600px;
  }
}

/* Tablet Portrait (769px to 1019px) */
@media (max-width: 1019px) and (min-width: 769px) {
  body.thank-you-displayed .tabnav-contact-bg-wrapper {
    top: 193px;
  }
  .tabnav-contact-form {
    padding: 25px;
  }

  .tabnav-contact-title {
    font-size: 30px;
  }

  .tabnav-form-title {
    font-size: 22px !important;
  }
}

/* Mobile Landscape and below (768px) */
@media (max-width: 768px) {
  .tabnav-contact-bg-wrapper {
    top: -180px;
  }

  /* Adjust background wrapper effects for mobile when thank you is displayed */
  body.thank-you-displayed .tabnav-contact-bg-wrapper {
    top: 231px;
  }

  .tabnav-contact-section {
    padding-bottom: 150px;
  }

  .tabnav-contact-wrapper {
    top: 90px;
    padding: 0 15px;
  }

  /* Adjust animation for mobile screens - exclude thank you container */
  .tabnav-contact-form:not(.tabnav-thank-you-container) {
    animation: slideUpFadeInMobile 0.7s ease-out 0.2s forwards;
  }

  .tabnav-contact-info {
    padding-right: 15px;
    margin-bottom: 25px;
    /* Animation removed */
  }

  .tabnav-contact-title {
    font-size: 28px;
    line-height: 1.3;
    margin-bottom: 15px;
  }

  .tabnav-contact-img {
    max-height: 25px;
    max-width: 18%;
  }

  .tabnav-contact-description {
    font-size: 0.85rem;
    line-height: 24px;
    padding: 0;
    margin-top: 15px;
  }

  .tabnav-contact-form {
    padding: 20px;
    max-width: 100%;
  }

  .tabnav-form-title {
    font-size: 22px !important;
    margin-bottom: 10px;
  }

  .tabnav-form-description {
    font-size: 13px;
    margin-bottom: 20px;
  }

  .tabnav-contact-form-row {
    margin-bottom: 18px;
  }

  .tabnav-contact-label {
    font-size: 14px;
    line-height: 30px;
  }

  .tabnav-contact-input input,
  .tabnav-contact-textarea textarea,
  .tabnav-contact-input select,
  .tabnav-contact-input-full select {
    height: 42px;
    font-size: 15px;
    padding: 0 14px;
  }

  .tabnav-contact-textarea textarea {
    height: 90px;
    padding: 14px;
  }

  .tabnav-contact-textarea textarea#help-message {
    height: 75px;
  }

  .tabnav-dropdown-selected {
    height: 42px;
    font-size: 15px;
    padding: 0 14px;
  }

  .tabnav-contact-submit {
    padding-top: 25px;
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }

  .tabnav-contact-submit button {
    padding: 12px 24px;
    font-size: 16px;
    width: 100%;
    justify-content: center;
  }

  .tabnav-clean-button {
    font-size: 14px !important;
    padding: 8px 0 !important;
    align-self: center;
  }

  /* Full width image section adjustments */
  .tabnav-arrow-image-container {
    padding: 0 15px 15px 15px;
    gap: 10px;
    justify-content: center;
    /* flex-direction: column;
    align-items: center; */
  }

  .tabnav-trusted-by-text {
    font-size: 18px;
    margin-bottom: 20px;
  }

  .tabnav-arrow-image {
    max-width: 12%;
  }

  /* Thank you container mobile styles */
  .tabnav-thank-you-container {
    padding: 25px 20px;
    max-width: 100%;
  }

  .tabnav-thank-you-title {
    font-size: 28px;
    margin-bottom: 14px;
  }

  .tabnav-thank-you-description {
    font-size: 15px;
    max-width: 100%;
  }

  .tabnav-thank-you-actions {
    flex-direction: column;
    gap: 15px;
    margin-top: 20px;
  }

  .tabnav-return-home-button {
    width: 100%;
    justify-content: center;
    padding: 12px 20px;
  }
}

/* Mobile Portrait and very small screens (480px and below) */
@media (max-width: 480px) {
  .tabnav-contact-bg-wrapper {
    top: -138px;
  }

  /* Adjust background wrapper effects for small mobile when thank you is displayed */
  body.thank-you-displayed .tabnav-contact-bg-wrapper {
    top: 231px;
  }

  .tabnav-contact-section {
    padding-bottom: 120px;
  }

  .tabnav-contact-wrapper {
    top: 87px;
    padding: 0 12px;
  }

  .tabnav-contact-info {
    padding-right: 12px;
    margin-bottom: 20px;
    right: -8px;
  }

  .tabnav-contact-title {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 12px;
  }

  .tabnav-contact-img {
    max-height: 22px;
    max-width: 20%;
  }

  .tabnav-contact-description {
    font-size: 0.8rem;
    line-height: 22px;
    padding: 0;
    margin-top: 12px;
  }

  .tabnav-contact-form {
    padding: 15px;
    border-radius: 12px;
  }

  .tabnav-form-title {
    font-size: 20px !important;
    margin-bottom: 8px;
  }

  .tabnav-form-description {
    font-size: 13px;
    margin-bottom: 18px;
  }

  .tabnav-contact-form-row {
    margin-bottom: 16px;
  }

  .tabnav-contact-label {
    font-size: 13px;
    line-height: 28px;
    margin-bottom: 4px;
  }

  .tabnav-optional-text {
    font-size: 11px;
  }

  .tabnav-contact-input input,
  .tabnav-contact-textarea textarea,
  .tabnav-contact-input select,
  .tabnav-contact-input-full select {
    height: 40px;
    font-size: 14px;
    padding: 0 12px;
    border-radius: 6px;
  }

  .tabnav-contact-textarea textarea {
    height: 80px;
    padding: 12px;
  }

  .tabnav-contact-textarea textarea#help-message {
    height: 70px;
  }

  .tabnav-dropdown-selected {
    height: 40px;
    font-size: 14px;
    padding: 0 12px;
    border-radius: 6px;
  }

  .tabnav-dropdown-options {
    font-size: 12px;
    border-radius: 6px;
  }

  .tabnav-dropdown-option {
    padding: 10px 12px;
  }

  .tabnav-contact-submit {
    padding-top: 20px;
    gap: 12px;
  }

  .tabnav-contact-submit button {
    padding: 12px 20px;
    font-size: 15px;
    border-radius: 6px;
  }

  .tabnav-clean-button {
    font-size: 13px !important;
    padding: 6px 0 !important;
  }

  .tabnav-checkbox-label {
    font-size: 12px;
    line-height: 1.3;
  }

  .tabnav-privacy-policy-link p {
    font-size: 12px !important;
  }

  .tabnav-privacy-policy-link a {
    font-size: 13px !important;
  }

  /* Arrow image container for small screens */
  .tabnav-arrow-image-container {
    padding: 0 12px 12px 12px;
    gap: 8px;
  }

  .tabnav-trusted-by-text {
    font-size: 16px;
    margin-bottom: 15px;
  }

  .tabnav-arrow-image {
    max-width: 15%;
  }

  /* Thank you container for very small screens */
  .tabnav-thank-you-container {
    padding: 20px 15px;
    border-radius: 12px;
  }

  .tabnav-thank-you-title {
    font-size: 24px;
    margin-bottom: 12px;
  }

  .tabnav-thank-you-description {
    font-size: 14px;
    line-height: 1.5;
  }

  .tabnav-thank-you-actions {
    gap: 12px;
    margin-top: 18px;
  }

  .tabnav-return-home-button {
    padding: 12px 16px;
    font-size: 15px;
    border-radius: 6px;
  }

  .tabnav-send-another-button {
    font-size: 14px !important;
  }
}

/* Extra small screens (360px and below) */
@media (max-width: 360px) {
  .tabnav-contact-wrapper {
    padding: 0 10px;
  }

  .tabnav-contact-form {
    padding: 12px;
  }

  .tabnav-contact-title {
    font-size: 22px;
  }

  .tabnav-form-title {
    font-size: 18px !important;
  }

  .tabnav-form-description {
    font-size: 12px;
  }

  .tabnav-contact-input input,
  .tabnav-contact-textarea textarea,
  .tabnav-dropdown-selected {
    height: 38px;
    font-size: 13px;
    padding: 0 10px;
  }

  .tabnav-contact-textarea textarea {
    height: 75px;
    padding: 10px;
  }

  .tabnav-arrow-image-container {
    padding: 0 10px 10px 10px;
  }

  .tabnav-trusted-by-text {
    font-size: 15px;
  }

  .tabnav-thank-you-container {
    padding: 18px 12px;
  }
}

/* Ultra narrow screens (290px and below) - Specific for very narrow mobile */
@media (max-width: 290px) {
  .tabnav-contact-bg-wrapper {
    top: -113px;
  }

  .tabnav-contact-section {
    padding-bottom: 100px;
  }

  .tabnav-contact-wrapper {
    top: 100px;
    padding: 0 8px;
  }

  .tabnav-contact-info {
    padding-right: 8px;
    margin-bottom: 15px;
  }

  .img-fluid.contact-us-avatars {
    width: 65px;
    margin-bottom: 5px;
  }

  .tabnav-contact-title {
    font-size: 20px;
    line-height: 1.1;
    margin-bottom: 8px;
  }

  .tabnav-contact-img {
    max-height: 20px;
    max-width: 22%;
    margin-left: 6px;
  }

  .tabnav-contact-description {
    font-size: 0.75rem;
    line-height: 20px;
    padding: 0;
    margin-top: 8px;
  }

  .tabnav-contact-form {
    padding: 10px;
    border-radius: 10px;
    margin: 0;
  }

  .tabnav-form-header {
    margin-bottom: 15px;
  }

  .tabnav-form-title {
    font-size: 17px !important;
    margin-bottom: 6px;
    line-height: 1.2;
  }

  .tabnav-form-description {
    font-size: 13px;
    margin-bottom: 15px;
    line-height: 1.3;
  }

  .tabnav-contact-form-row {
    margin-bottom: 14px;
  }

  .tabnav-contact-label {
    font-size: 12px;
    line-height: 26px;
    margin-bottom: 3px;
  }

  .tabnav-optional-text {
    font-size: 10px;
    margin-top: 0;
  }

  .tabnav-contact-input input,
  .tabnav-contact-textarea textarea,
  .tabnav-contact-input select,
  .tabnav-contact-input-full select {
    height: 36px;
    font-size: 12px;
    padding: 0 8px;
    border-radius: 5px;
  }

  .tabnav-contact-textarea textarea {
    height: 70px;
    padding: 8px;
  }

  .tabnav-contact-textarea textarea#help-message {
    height: 65px;
  }

  .tabnav-dropdown-selected {
    height: 36px;
    font-size: 12px;
    padding: 0 8px;
    border-radius: 5px;
    padding-right: 30px;
  }

  .tabnav-dropdown-options {
    font-size: 11px;
    border-radius: 5px;
  }

  .tabnav-dropdown-option {
    padding: 8px 10px;
  }

  .dropdown-arrow {
    width: 14px;
    height: 14px;
  }

  .tabnav-contact-submit {
    padding-top: 15px;
    gap: 10px;
  }

  .tabnav-contact-submit button {
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 5px;
  }

  .tabnav-clean-button {
    font-size: 12px !important;
    padding: 4px 0 !important;
  }

  .tabnav-checkbox-wrapper {
    gap: 6px;
  }

  .tabnav-checkbox-row {
    gap: 8px;
  }

  .tabnav-checkbox-wrapper input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-top: 1px;
  }

  .tabnav-checkbox-label {
    font-size: 11px;
    line-height: 1.2;
  }

  .tabnav-privacy-policy-link {
    margin-top: 15px;
  }

  .tabnav-privacy-policy-link p {
    font-size: 11px !important;
  }

  .tabnav-privacy-policy-link a {
    font-size: 12px !important;
  }

  /* Background image is already hidden in mobile view, no adjustments needed */

  /* Arrow and trusted by section for ultra narrow */
  .tabnav-full-width-image-section {
    padding-bottom: 30px;
    padding-top: 25px;
  }

  .tabnav-arrow-image-container {
    padding: 0 8px 10px 8px;
    gap: 6px;
  }

  .tabnav-trusted-by-text {
    font-size: 14px;
    margin-bottom: 12px;
  }

  .tabnav-arrow-image {
    max-width: 18%;
  }

  /* Thank you container for ultra narrow */
  .tabnav-thank-you-container {
    padding: 15px 10px;
    border-radius: 10px;
  }

  .tabnav-thank-you-title {
    font-size: 20px;
    margin-bottom: 10px;
  }

  .tabnav-thank-you-description {
    font-size: 13px;
    line-height: 1.4;
  }

  .tabnav-thank-you-actions {
    gap: 10px;
    margin-top: 15px;
  }

  .tabnav-return-home-button {
    padding: 10px 14px;
    font-size: 14px;
    border-radius: 5px;
  }

  .tabnav-send-another-button {
    font-size: 13px !important;
  }

  /* Error text adjustments */
  .tabnav-error-text,
  .tabnav-error-text-checkbox {
    font-size: 10px;
  }

  .tabnav-error-message {
    font-size: 11px;
    padding: 4px 8px;
  }
}

/* ==========================================================================
  CHECKBOX STYLES
  =========================================================================== */

.tabnav-checkbox-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.tabnav-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.tabnav-checkbox-wrapper input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;

  cursor: pointer;
  accent-color: #8e56dc;
}

.tabnav-checkbox-label {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: #425466;
  margin: 0;
  flex: 1;
}
.tabnav-privacy-policy-link {
  margin-top: 25px;
}

.tabnav-unsubscribe-highlight {
  color: #8e56dc;
  font-weight: 500;
}

.tabnav-unsubscribe-highlight:hover {
  color: #7a4bc4;
}

/* Responsive checkbox styles */
@media (max-width: 768px) {
  .tabnav-checkbox-wrapper {
    gap: 8px;
    margin-top: 15px;
  }

  .tabnav-checkbox-row {
    gap: 10px;
  }

  .tabnav-checkbox-label {
    font-size: 13px;
  }

  .tabnav-error-text {
    font-size: 11px;
  }

  .tabnav-contact-label-column .tabnav-error-text {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .tabnav-checkbox-wrapper {
    gap: 8px;
    margin-top: 12px;
  }

  .tabnav-checkbox-label {
    font-size: 12px;
  }

  .tabnav-error-text {
    font-size: 10px;
  }

  .tabnav-contact-label-column .tabnav-error-text {
    text-align: left;
  }

  .tabnav-checkbox-wrapper .tabnav-error-text-checkbox {
    font-size: 10px;
  }
}