/* ============================================
   BK-CONTACT COMPONENT - VANILLA CSS
   ============================================ */

/* Icon Font - Glyphter (scoped to bk-contact only) */
@font-face {
  font-family: 'Glyphter-bk-contact';
  src: url(../../fonts/iconfonts/Glyphter.eot);
  src: url(../../fonts/iconfonts/Glyphter-1.eot) format("embedded-opentype"),
       url(../../fonts/iconfonts/Glyphter.woff) format("woff"),
       url(../../fonts/iconfonts/Glyphter.ttf) format("truetype"),
       url(../../fonts/iconfonts/Glyphter.svg) format("svg");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Icon Base Styles - Scoped to bk-contact wrapper only */
.bk-contact-wrapper [class*="icon-"]:before {
  display: inline-block;
  font-family: 'Glyphter-bk-contact';
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Icon elements should be inline-block for proper alignment - Scoped to bk-contact */
.bk-contact-wrapper [class*="icon-"] {
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
}

/* Required Icons Only - Scoped to bk-contact */
.bk-contact-wrapper .icon-arrow-right:before {
  content: "C";
}

.bk-contact-wrapper .icon-location:before {
  content: "T";
}

.bk-contact-wrapper .icon-phone:before {
  content: "g";
}

.bk-contact-wrapper .icon-mail:before {
  content: "h";
}

.bk-contact-wrapper .icon-location-2:before {
  content: "i";
}

/* Utility Classes for Icons */
.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* CSS Variables */
:root {
  --bk-contact-primary: #012169;
  --bk-contact-action-primary: #00154d;
  --bk-contact-midnight: #2c3339;
  --bk-contact-bg-gray: #4c4c4c;
  --bk-contact-container-width: 1720px;
  --bk-contact-gap: 30px;
  --bk-contact-header-height: 100px;
  --bk-contact-accent: #fac25a;
}

/* Reset and Base Styles */
.bk-contact-wrapper {
  position: relative;
  background-color: var(--bk-contact-bg-gray);
  font-family: 'Poppins', sans-serif;
  color: white;
  overflow: hidden;
}

/* Desktop Map Background (always visible behind content) */
.bk-contact-map-bg-desktop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

@media (max-width: 1023px) {
  .bk-contact-map-bg-desktop {
    display: none;
  }
}

.bk-contact-map-swiper-desktop {
  overflow: hidden;
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.bk-contact-map-swiper-desktop .swiper-slide {
  position: relative;
}

.bk-contact-map-swiper-desktop iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 600px;
  border: 0;
  position: relative;
  z-index: 0;
}

.bk-contact-map-overlay-desktop {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.bk-contact-map-swiper-desktop .swiper-slide-active .bk-contact-map-overlay-desktop {
  pointer-events: auto;
  opacity: 1;
}

/* Mobile Map Background (only visible on mobile) */
.bk-contact-map-bg-mobile {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
}

@media (min-width: 1024px) {
  .bk-contact-map-bg-mobile {
    display: none;
  }
}

.bk-contact-map-swiper-mobile {
  overflow: hidden;
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
}

.bk-contact-map-swiper-mobile .swiper-slide {
  position: relative;
}

.bk-contact-map-swiper-mobile iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 400px;
  border: 0;
  position: relative;
  z-index: 0;
}

.bk-contact-map-overlay-mobile {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.bk-contact-map-swiper-mobile .swiper-slide-active .bk-contact-map-overlay-mobile {
  pointer-events: auto;
  opacity: 1;
}

.bk-contact-map-gradient-1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, var(--bk-contact-accent), rgba(250, 194, 90, 0.5), rgba(250, 194, 90, 0.1));
  z-index: 1;
}

.bk-contact-map-gradient-2 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(to bottom, rgba(250, 194, 90, 0.5), rgba(250, 194, 90, 0));
  z-index: 1;
}

.bk-contact-map-content-desktop {
  position: absolute;
  right: 12%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: auto;
  z-index: 2;
}

.bk-contact-map-content-mobile {
  position: absolute;
  right: 12%;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90px;
  z-index: 2;
}

.bk-contact-map-icon {
  filter: brightness(0) invert(1);
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
  margin-bottom: 0;
}

/* Map Button - Now using bk-circle-btn */
/* Only margin-top is needed, other styles handled by bk-circle-btn module */
.bk-contact-map-content-desktop .bk-circle-btn,
.bk-contact-map-content-mobile .bk-circle-btn {
  margin-top: 20px;
}

/* Main Contact Section */
.bk-contact-section {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  padding-top: clamp(50px, 26.4922px + 2.4067vw, 70px);
  padding-bottom: clamp(40px, 21.4922px + 2.4067vw, 60px);
}

@media (min-width: 1024px) {
  .bk-contact-section {
    pointer-events: none;
  }
}

.bk-contact-container {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: var(--bk-contact-container-width);
  color: white;
  display: flex;
  align-items: center;
}

@media (min-width: 640px) {
  .bk-contact-container {
    padding-left: var(--bk-contact-gap);
    padding-right: var(--bk-contact-gap);
  }
}

.bk-contact-wrapper-inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-top: clamp(40px, 21.4922px + 2.4067vw, 60px);
  padding-bottom: clamp(40px, 21.4922px + 2.4067vw, 60px);
}

/* Header */
.bk-contact-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 10.7461px + 1.2034vw, 30px);
}

@media (min-width: 640px) {
  .bk-contact-header {
    padding-left: 30px;
    padding-right: 30px;
  }
}

.bk-contact-breadcrumb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 500;
  font-size: clamp(16px, 14.1492px + 0.2407vw, 18px);
  line-height: 120%;
  letter-spacing: -0.54px;
}

.bk-contact-breadcrumb a {
  color: white;
  text-decoration: none;
  transition: color 0.2s ease;
}

@media (min-width: 1024px) {
  .bk-contact-breadcrumb a:hover {
    color: white;
  }
}

.bk-contact-title {
  font-weight: 600;
  line-height: 133%;
  letter-spacing: -2.783px;
  font-size: clamp(40px, -8.1203px + 6.2575vw, 92px);
  margin: 0;
}

/* Grid Layout */
.bk-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr);
  width: 100%;
  height: 100%;
  margin-top: clamp(30px, 11.4922px + 2.4067vw, 50px);
  gap: 20px;
  position: relative;
  z-index: 2;
}

@media (max-width: 1023px) {
  .bk-contact-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.bk-contact-map-space {
  /* Empty space for map to show behind on desktop */
  display: block;
}

@media (max-width: 1023px) {
  .bk-contact-map-space {
    display: none;
  }
}

/* Info Panel */
.bk-contact-info-panel {
  pointer-events: auto;
  position: relative;
  z-index: 3;
}

@media (max-width: 1023px) {
  .bk-contact-info-panel {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding-left: 30px;
    padding-right: 30px;
  }
}

.bk-contact-buttons {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 0.373px + 0.6017vw, 10px);
}

@media (max-width: 1023px) {
  .bk-contact-buttons {
    align-items: center;
  }
}

.bk-contact-button {
  display: flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  color: white;
  text-decoration: none;
}

.bk-contact-button span {
  font-weight: 600;
  line-height: 133%;
  color: white;
  transition: opacity 0.3s ease, color 0.3s ease;
  font-size: clamp(16px, 10.4477px + 0.722vw, 22px);
  opacity: 0.5;
}

.bk-contact-button.active span {
  color: white;
  opacity: 1;
}

@media (min-width: 1024px) {
  .bk-contact-button:hover span {
    color: white;
    opacity: 1;
  }
}

.bk-contact-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(-30px) rotate(-45deg);
  opacity: 0;
  transition: all 0.3s ease;
}

.bk-contact-button.active .bk-contact-arrow {
  transform: translateX(0) rotate(-45deg);
  opacity: 1;
}

@media (min-width: 1024px) {
  .bk-contact-button:hover .bk-contact-arrow {
    transform: translateX(0) rotate(-45deg);
    opacity: 1;
  }
  
  .bk-contact-arrow {
    transform: translateX(0) rotate(-45deg);
    opacity: 0.5;
  }
}

.bk-contact-content-swiper {
  max-width: 700px;
  overflow: hidden;
  margin-top: clamp(20px, -17.0156px + 4.8135vw, 60px);
}

@media (min-width: 1536px) {
  .bk-contact-content-swiper {
    max-width: 400px;
  }
}

@media (max-width: 1023px) {
  .bk-contact-content-swiper {
    max-width: 400px;
  }
}

@media (max-width: 639px) {
  .bk-contact-content-swiper {
    max-width: 300px;
  }
}

.bk-contact-info {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  max-width: 449px;
  opacity: 0;
  transition: opacity 0.5s ease;
  gap: clamp(10px, 0.7461px + 1.2034vw, 20px);
}

.bk-contact-content-swiper .swiper-slide-active .bk-contact-info {
  pointer-events: auto;
  opacity: 1;
}

@media (min-width: 1024px) {
  .bk-contact-info {
    max-width: 350px;
  }
}

@media (max-width: 1023px) {
  .bk-contact-info {
    max-width: 449px;
    align-items: start;
  }
}

.bk-contact-info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: white;
  text-decoration: none;
  transition: color 0.2s ease;
  line-height: 177%;
  font-size: clamp(16px, 12.2984px + 0.4813vw, 20px);
}

@media (max-width: 1023px) {
  .bk-contact-info-item {
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .bk-contact-info-item:hover {
    color: white;
  }
}

.bk-contact-info-item i {
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bk-contact-info-item-address {
  flex-direction: row;
  align-items: flex-start;
}

.bk-contact-info-item-address i {
  flex-shrink: 0;
  margin-top: 2px; /* Slight alignment adjustment for multi-line text */
}

@media (max-width: 1023px) {
  .bk-contact-info-item-address {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
  }
  
  .bk-contact-info-item-address span {
    text-align: left;
  }
}

/* Form Panel */
.bk-contact-form-panel {
  pointer-events: auto;
  background-color: white;
  color: black;
  padding: clamp(20px, 10.7461px + 1.2034vw, 30px);
  position: relative;
  z-index: 3;
}

@media (max-width: 1023px) {
  .bk-contact-form-panel {
    padding-top: 40px;
  }
}

.bk-contact-form-title {
  display: flex;
  align-items: center;
  justify-content: center;
}

.bk-contact-form-title span {
  font-weight: 600;
  line-height: 111%;
  letter-spacing: -1.44px;
  color: black;
  font-size: clamp(24px, 12.8953px + 1.444vw, 36px);
}

.bk-contact-form-title-light {
  font-weight: 500;
  color: rgba(0, 0, 0, 0.5);
}

/* Form Validation Module Styles */
.bk-contact-form-group-wrapper {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: column;
  width: 100%;
  margin-bottom: 0;
  display: flex;
}

.bk-contact-form {
  grid-column-gap: 1.5em;
  grid-row-gap: 1.5em;
  flex-flow: column;
  width: 100%;
  display: flex;
  padding-top: clamp(20px, 10.7461px + 1.2034vw, 30px);
}

@media (min-width: 640px) {
  .bk-contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

.bk-contact-form-field-group {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  flex-flow: column;
  align-items: flex-start;
  display: flex;
}

.bk-contact-form-group-full {
  grid-column: 1 / -1;
}

.bk-contact-form-group-checkbox-submit {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  width: 100%;
  grid-column: 1 / -1;
}

@media (min-width: 640px) {
  .bk-contact-form-group-checkbox-submit {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
  }
}

.bk-contact-form-group-checkbox {
  display: flex;
  flex: 1;
  min-width: 0;
}

.bk-contact-form-group-submit {
  display: flex;
  width: fit-content;
  flex-shrink: 0;
}

.bk-contact-form-field {
  width: 100%;
  position: relative;
}

.bk-contact-form-label {
  color: #131313;
  width: 100%;
  margin-bottom: 0;
  font-size: .875em;
  font-weight: 500;
  line-height: 1;
}

.bk-contact-form-required {
  color: #ff4c24;
}

.bk-contact-input {
  outline-offset: 0px;
  color: #131313;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  vertical-align: middle;
  background-color: #f5f5f3;
  border: 1px solid #f5f5f3;
  border-radius: .328125em;
  outline: 0 #0000;
  height: auto;
  width: 100%;
  margin-bottom: 0;
  padding: .9em 3.5em .9em 1em;
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: 0 0 #0000;
  transition: border-color 0.2s ease;
}

.bk-contact-input.is--textarea {
  resize: none;
  height: 120px;
  min-height: 120px;
  max-height: 120px;
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
  line-height: 1.2;
}

.bk-contact-input:focus {
  border-color: #cbc8c5;
}

.bk-contact-input::placeholder {
  color: #1313134d;
  background-color: #f5f5f3;
  font-family: inherit;
  font-size: 1em;
  font-weight: 500;
}

.bk-contact-form-field-icon {
  opacity: 0;
  pointer-events: none;
  color: #cbc8c5;
  -webkit-user-select: none;
  user-select: none;
  border-radius: .375em;
  justify-content: center;
  align-items: center;
  width: 3.5em;
  max-height: 3.5em;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 1px;
}

.bk-contact-form-field-icon svg {
  width: 1.5em;
  height: 1.5em;
}

.bk-contact-form-field-icon.is--error {
  color: #ff4c24;
}

.bk-contact-radiocheck-field-icon {
  opacity: 0;
  pointer-events: none;
  color: #cbc8c5;
  -webkit-user-select: none;
  user-select: none;
  border-radius: .375em;
  justify-content: center;
  align-items: center;
  width: 3.5em;
  max-height: 3.5em;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  position: absolute;
  top: 1px;
  right: 1px;
}

.bk-contact-radiocheck-field-icon svg {
  width: 1.5em;
  height: 1.5em;
}

.bk-contact-radiocheck-field-icon.is--error {
  color: #ff4c24;
}

.bk-contact-radiocheck-label {
  color: #131313;
  cursor: pointer;
  flex-grow: 1;
  margin-bottom: 0;
  padding-left: 1.8em;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.2;
}

.bk-contact-radiocheck-label.is--small {
  flex-grow: 1;
  padding-left: 2em;
  font-size: 16px;
}

.bk-contact-radiocheck-group {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  flex-flow: column;
  width: 100%;
  display: flex;
  position: relative;
}

.bk-contact-checkbox-input {
  cursor: pointer;
  width: 0;
  height: 0;
  margin-top: 0;
  margin-left: 0;
  position: absolute;
}

.bk-contact-radiocheck-field {
  align-items: flex-start;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  position: relative;
}

.bk-contact-radiocheck-custom {
  pointer-events: none;
  color: #efeeec;
  -webkit-user-select: none;
  user-select: none;
  background-color: #efeeec;
  border: 1px solid #131313;
  border-radius: .125em;
  order: -1;
  justify-content: center;
  align-items: center;
  width: 1.25em;
  height: 1.25em;
  margin-top: .066em;
  margin-right: .75em;
  display: flex;
  position: absolute;
}

.bk-contact-radiocheck-check-svg {
  width: 1.5em;
  position: absolute;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.bk-contact-checkbox-input:checked ~ .bk-contact-radiocheck-custom .bk-contact-radiocheck-check-svg {
  opacity: 1;
}

.bk-contact-form-submit {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  inset: 0;
}

/* Form Submit Button - Now using bk-circle-btn */
.bk-contact-form-field-group .bk-circle-btn {
  width: 100%;
}

.bk-contact-form-group-submit .bk-circle-btn {
  width: fit-content;
}

/* Legacy styles for backward compatibility */
.bk-contact-form-submit-btn {
  outline-offset: 0px;
  color: #efeeec;
  cursor: pointer;
  background-color: #131313;
  border: 1px solid #131313;
  border-radius: .375rem;
  outline: 0 #0000;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  padding: 1.005em 1.125em;
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 #0000;
}

.bk-contact-form-submit-btn:focus {
  outline-offset: 0px;
  border-width: 1px;
  border-color: #cbc8c5;
  outline-color: #131313;
}

.bk-contact-form-submit-btn-p {
  margin-bottom: 0;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.2;
}

.bk-contact-gdpr-link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: inherit;
  transition: color 0.2s ease;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

.bk-contact-form-notification {
  outline-offset: 0px;
  color: #0ba954;
  text-align: left;
  border: 1px solid #0ba954;
  border-color: inherit;
  background-color: #efeeec;
  border-radius: .375rem;
  outline: 0 #0000;
  width: 100%;
  padding: 1.125em;
  font-size: 1em;
  position: relative;
  display: none;
  margin-top: 1em;
}

.bk-contact-form-notification.is--error {
  color: #ff4c24;
  margin-top: 0;
  padding-right: 3.5em;
}

.bk-contact-form-notification-icon {
  pointer-events: none;
  color: inherit;
  justify-content: center;
  align-items: center;
  width: 3.5em;
  padding-left: 1em;
  padding-right: 1em;
  display: flex;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.bk-contact-form-notification-icon svg {
  width: 1.5em;
  height: 1.5em;
}

.bk-contact-form-notification-bg {
  opacity: .1;
  pointer-events: none;
  color: inherit;
  background-color: currentColor;
  border-radius: calc(.375rem - 2px);
  display: flex;
  position: absolute;
  inset: 0;
}

.bk-contact-form-notification-p {
  color: inherit;
  font-size: 1.125em;
  font-weight: 500;
}

/* Field: Error */
[data-validate].is--error .bk-contact-input,
[data-validate].is--error textarea {
  border-color: #FF4C24;
}

[data-validate].is--error .bk-contact-form-field-icon.is--error,
[data-validate].is--error .bk-contact-radiocheck-field-icon.is--error {
  opacity: 1;
}

/* Field: Success */
[data-validate].is--success .bk-contact-form-field-icon.is--success,
[data-validate].is--success .bk-contact-radiocheck-field-icon.is--success {
  opacity: 1;
}

/* Field: Custom Checkbox */
[data-form-validate] .bk-contact-radiocheck-field input:focus-visible ~ .bk-contact-radiocheck-custom {
  background-color: #D0CFCD;
  color: #E2E1DF;
}

[data-form-validate] .bk-contact-radiocheck-field input:focus-visible:checked ~ .bk-contact-radiocheck-custom,
[data-form-validate] .bk-contact-radiocheck-field input:checked ~ .bk-contact-radiocheck-custom {
  background-color: #131313;
  color: #EFEEEC;
}

[data-form-validate] .bk-contact-radiocheck-field .bk-contact-radiocheck-label.is--small {
  margin-top: 0.125em;
}

[data-validate].is--error .bk-contact-radiocheck-custom {
  border-color: #FF4C24; 
}

[data-validate].is--error .bk-contact-checkbox-input:checked ~ .bk-contact-radiocheck-custom {
  border-color: #131313; 
}

/* Swiper Styles */
.bk-contact-content-swiper .swiper-slide {
  width: 100%;
}

.bk-contact-map-swiper .swiper-slide {
  width: 100%;
}

/* Responsive Adjustments */
@media (max-width: 1023px) {
  /* Hide desktop map content on mobile and tablet */
  .bk-contact-map-overlay-desktop .bk-contact-map-content-desktop,
  .bk-contact-map-content-desktop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Hide mobile map content on mobile and tablet */
  .bk-contact-map-overlay-mobile .bk-contact-map-content-mobile,
  .bk-contact-map-content-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .bk-contact-wrapper {
    min-height: auto;
    overflow: visible;
  }

  .bk-contact-map-bg-mobile {
    height: 100%;
  }

  .bk-contact-map-swiper-mobile {
    height: 100%;
  }

  .bk-contact-map-swiper-mobile iframe {
    height: 100%;
    min-height: 400px;
  }

  .bk-contact-map-overlay-mobile {
    height: 100%;
  }

  .bk-contact-map-gradient-1 {
    height: 100%;
  }

  .bk-contact-section {
    height: auto;
    min-height: auto;
    align-items: flex-start;
  }
  
  .bk-contact-container {
    height: auto;
    min-height: auto;
    align-items: flex-start;
  }
  
  .bk-contact-wrapper-inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .bk-contact-form-group-wrapper {
    width: 100%;
  }

  /* Form stays in 2 columns on tablet, single column only on mobile */
  .bk-contact-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: Single column layout */
@media screen and (max-width: 767px) {
  .bk-contact-form {
    display: flex;
    flex-direction: column;
  }
}

