.contact-hero h1{color:#000;font-family:DrukMedium;font-size:89.848px;font-style:normal;font-weight:500;letter-spacing:-1.797px;line-height:76.8%;text-align:left;text-transform:uppercase}@media (max-width:991px){.contact-hero h1{font-size:44px;letter-spacing:1.12px}}@media (max-width:767px){.contact-hero h1{font-size:28px;letter-spacing:.56px}}.contact-hero h2{color:#000;font-family:DrukMedium;font-size:89.848px;font-style:normal;font-weight:500;letter-spacing:-1.797px;line-height:76.8%;margin-top:10px;text-align:right;text-transform:uppercase}@media (max-width:991px){.contact-hero h2{font-size:44px;letter-spacing:1.12px}}@media (max-width:767px){.contact-hero h2{font-size:28px;letter-spacing:.56px;margin-top:5px;text-align:left}}.contact-form{height:calc(16.666vw - 6px);margin-top:20px}@media (max-width:991px){.contact-form{height:auto;margin-top:32px}}.contact-form .wrapper form{display:flex;position:relative}@media (max-width:991px){.contact-form .wrapper form{flex-wrap:wrap;justify-content:center}}.contact-form .wrapper form .input-wrapper{align-items:center;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px);background:#ffffff0d;border:2px solid #fff;border-radius:50%;display:flex;flex:0 0 16.666%;height:calc(16.666vw - 6px);justify-content:center;position:relative}@media (max-width:991px){.contact-form .wrapper form .input-wrapper{flex:0 0 40vw;height:40vw;margin-bottom:30px}}@media (max-width:767px){.contact-form .wrapper form .input-wrapper{border-radius:50px;flex:0 0 calc(100vw - 16px);height:56px;margin-bottom:30px}}.contact-form .wrapper form .input-wrapper .outline{border:2px solid #000;border-radius:50%;height:100%;opacity:0;pointer-events:none;position:absolute;transition:.3s ease-in-out;width:100%}@media (max-width:767px){.contact-form .wrapper form .input-wrapper .outline{border-radius:50px}}.contact-form .wrapper form .input-wrapper .error{align-items:center;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#fff;border:2px solid #fff;border-radius:300px;bottom:-29px;color:red;display:flex;font-family:IBM Plex Mono;font-size:11px;font-style:normal;font-weight:500;height:24px;justify-content:center;letter-spacing:.33px;line-height:12px;position:absolute;text-align:center;text-transform:uppercase;width:100%}.contact-form .wrapper form .input-wrapper input{background:none;border:none;color:#000;font-family:IBM Plex Mono;font-size:13px;font-style:normal;font-weight:500;letter-spacing:.39px;line-height:13px;outline:none;text-align:center;width:80%}.contact-form .wrapper form .input-wrapper input::-moz-placeholder{color:#000;text-align:center}.contact-form .wrapper form .input-wrapper input::placeholder{color:#000;text-align:center}.contact-form .wrapper form .input-wrapper input:focus::-moz-placeholder{opacity:0}.contact-form .wrapper form .input-wrapper input:focus::placeholder{opacity:0}.contact-form .wrapper form .input-wrapper input:focus+.outline,.contact-form .wrapper form .input-wrapper textarea:focus+.outline{opacity:1}.contact-form .wrapper form .input-wrapper textarea{background:none;border:none;color:#000;font-family:IBM Plex Mono;font-size:13px;font-style:normal;font-weight:500;height:17px;letter-spacing:.39px;line-height:13px;max-height:50%;max-width:80%;outline:none;resize:none;text-align:center;width:80%}@media (max-width:767px){.contact-form .wrapper form .input-wrapper textarea{align-content:center;align-items:center;display:table-cell;height:auto;max-height:100vh;vertical-align:middle}}.contact-form .wrapper form .input-wrapper textarea::-moz-placeholder{color:#000;text-align:center}.contact-form .wrapper form .input-wrapper textarea::placeholder{color:#000;text-align:center}.contact-form .wrapper form .input-wrapper textarea:focus::-moz-placeholder{opacity:0}.contact-form .wrapper form .input-wrapper textarea:focus::placeholder{opacity:0}.contact-form .wrapper form .input-wrapper select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;background-image:url(../images/icons/iconSelect.svg);background-position:100% 50%;background-repeat:no-repeat;border:none;color:#000;font-family:IBM Plex Mono;font-size:13px;font-style:normal;font-weight:500;letter-spacing:.39px;line-height:13px;outline:none;padding-right:15px;position:relative;text-align:center;text-transform:uppercase}.contact-form .wrapper form .input-wrapper.send{background:#fff;transition:.3s ease-in-out}.contact-form .wrapper form .input-wrapper.send p{color:#000;font-family:IBM Plex Mono;font-size:13px;font-style:normal;font-weight:500;letter-spacing:.39px;line-height:13px;text-align:center;text-transform:uppercase;transition:.3s ease-in-out}.contact-form .wrapper form .input-wrapper.send img{filter:invert(1)}.contact-form .wrapper form .input-wrapper.send:hover{background:#000}.contact-form .wrapper form .input-wrapper.send:hover p{color:#fff}.contact-form .wrapper form .input-wrapper.red-outline .outline{border-color:red;opacity:1}@media (max-width:767px){.contact-form .wrapper form .input-wrapper-text{height:auto;min-height:56px;padding:10px 0}}.contact-form .wrapper form .heart{opacity:0;pointer-events:none;position:absolute;z-index:20}.contact-footer{height:calc(100vh - 20vw - 280px);margin-top:46px}@media (max-width:991px){.contact-footer{height:auto}}@media (max-width:767px){.contact-footer{padding-bottom:10px}}.contact-footer .wrapper{display:flex;height:100%;justify-content:space-between}@media (max-width:991px){.contact-footer .wrapper{flex-wrap:wrap;height:auto}}.contact-footer .wrapper .title{color:#000;font-family:DrukMedium;font-size:33.528px;font-style:normal;font-weight:500;letter-spacing:.671px;line-height:93%;text-transform:uppercase}@media (max-width:991px){.contact-footer .wrapper .title{font-size:38px}}.contact-footer .wrapper .copy{color:#000;font-family:IBM Plex Mono;font-size:13px;font-style:normal;font-weight:500;letter-spacing:.39px;line-height:14px;text-transform:uppercase}@media (max-width:991px){.contact-footer .wrapper .copy{display:none}}.contact-footer .wrapper .left{border-top:1px solid #000;display:flex;flex:0 0 calc(50% - 10px);flex-direction:column;height:100%;justify-content:space-between;padding-top:5px}@media (max-width:991px){.contact-footer .wrapper .left{border-top:0;display:none;flex:0 0 100%;height:auto}}.contact-footer .wrapper .mobile-bottom{display:none;margin-top:10px;width:100%}@media (max-width:991px){.contact-footer .wrapper .mobile-bottom{display:flex;justify-content:space-between}}@media (max-width:767px){.contact-footer .wrapper .mobile-bottom{margin-top:20px}}.contact-footer .wrapper .mobile-bottom .copy-m{color:#000;font-family:IBM Plex Mono;font-size:13px;font-style:normal;font-weight:500;letter-spacing:.39px;line-height:14px;text-transform:uppercase}.contact-footer .wrapper .right{border-top:1px solid #000;display:flex;flex:0 0 calc(50% - 10px);flex-direction:column;justify-content:space-between;padding-top:5px}@media (max-width:991px){.contact-footer .wrapper .right{border-top:2px solid #000;flex:0 0 100%;height:auto}}.contact-footer .wrapper .right .titles{display:flex;flex-direction:column;justify-content:space-between}.contact-footer .wrapper .right .titles a{color:#000;display:inline-block;font-family:DrukMedium;font-size:33.528px;font-style:normal;font-weight:500;letter-spacing:.671px;line-height:93%;text-transform:uppercase;width:auto}.contact-footer .wrapper .right .bottom{align-items:flex-end;display:flex;justify-content:space-between;width:100%}@media (max-width:991px){.contact-footer .wrapper .right .bottom{margin-top:40px}}.contact-page[data-v-8976a4c8]{background-image:url(../images/footerPatern.png),linear-gradient(0deg,#b4cbf5,#f7faff),linear-gradient(0deg,#96bbff,#edf4ff);background-repeat:repeat;background-size:5%;min-height:100vh;padding:70px 20px 14px}@media (max-width:991px){.contact-page[data-v-8976a4c8]{background-size:8%;padding:80px 8px 14px}}


/* ============================================================================
 * Chaitanya 2k26 — Dynamic Contact Form Animations & Kinetic Filling Effects
 * ============================================================================ */

/* 1. Active Bubble Focus Elevation & Iridescent Luminous Glow */
.contact-form .wrapper form .input-wrapper {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.35s ease,
              border-color 0.35s ease !important;
}

.contact-form .wrapper form .input-wrapper:focus-within,
.contact-form .wrapper form .input-wrapper.is-active {
  transform: translateY(-8px) scale(1.04);
  background: rgba(255, 255, 255, 0.65) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-color: #000000 !important;
  box-shadow: 
    0 20px 50px rgba(0, 40, 120, 0.14),
    0 0 25px rgba(255, 255, 255, 0.9),
    inset 0 0 15px rgba(255, 255, 255, 0.7);
  z-index: 5;
}

/* 2. Concentric Keystroke Liquid Ripple Wave */
@keyframes keystrokeWave {
  0% {
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0.9;
    border-color: #000000;
  }
  50% {
    border-color: rgba(4, 51, 255, 0.5);
  }
  100% {
    transform: translate(-50%, -50%) scale(1.35);
    opacity: 0;
    border-color: transparent;
  }
}

.keystroke-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #000000;
  pointer-events: none;
  animation: keystrokeWave 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  z-index: 2;
}

@media (max-width: 767px) {
  .keystroke-ripple {
    border-radius: 50px;
  }
}

/* 3. Dynamic Circular SVG Progress Rim */
.bubble-progress-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: rotate(-90deg);
  z-index: 3;
}

.bubble-progress-track {
  fill: none;
  stroke: rgba(0, 0, 0, 0.06);
  stroke-width: 3;
}

.bubble-progress-bar {
  fill: none;
  stroke: #000000;
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 283;
  stroke-dashoffset: 283;
  transition: stroke-dashoffset 0.25s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.3s ease;
}

.bubble-progress-bar.valid {
  stroke: #000000;
}

/* 4. Live Monospace HUD Badge */
.bubble-hud-badge {
  position: absolute;
  bottom: -32px;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 20px;
  padding: 3px 12px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  color: #000000;
  white-space: nowrap;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.input-wrapper:focus-within .bubble-hud-badge,
.input-wrapper.active-badge .bubble-hud-badge {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (max-width: 991px) {
  .bubble-hud-badge {
    bottom: -24px;
  }
}

/* 5. Transmitting Spinner & Radar Pulse */
@keyframes radarSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes transmittingGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); }
  50% { box-shadow: 0 0 45px rgba(4, 51, 255, 0.4); }
}

.contact-form .wrapper form .input-wrapper.send.transmitting {
  background: #000000 !important;
  color: #ffffff !important;
  animation: transmittingGlow 1.2s infinite ease-in-out;
  pointer-events: none;
}

.contact-form .wrapper form .input-wrapper.send.transmitting p {
  color: #ffffff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.radar-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
  border-radius: 50%;
  animation: radarSpin 0.7s linear infinite;
  vertical-align: middle;
}

/* 6. Success Modal / Confirmed Presentation */
.contact-form .wrapper form .heart {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: min(440px, 90vw) !important;
  max-width: 440px !important;
  height: auto !important;
  min-height: unset !important;
  background: rgba(255, 255, 255, 0.95);
  background-image: url(/images/footerPatern.png);
  background-repeat: repeat;
  background-size: 80px;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 2px solid #000000;
  box-shadow: 0 20px 60px rgba(0, 40, 120, 0.15);
  border-radius: 24px;
  padding: 0 !important;
  box-sizing: border-box;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 25;
  overflow: hidden;
}

.heart-dispatch-inner {
  padding: 16px 22px 14px;
  box-sizing: border-box;
  text-align: center;
  width: 100%;
}

.heart-check {
  font-size: 22px;
  display: block;
  margin-bottom: 2px;
  color: #000000;
  line-height: 1;
}

.heart-success-title {
  font-family: "DrukMedium", sans-serif;
  font-size: 24px;
  line-height: 1;
  color: #000000;
  text-transform: uppercase;
  margin: 4px 0 3px;
  letter-spacing: -0.3px;
}

.heart-success-subtitle {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: #333333;
  line-height: 1.4;
  margin: 0 auto 10px;
  max-width: 360px;
}

.heart-reset-btn {
  background: #000000;
  color: #ffffff;
  border: 1.5px solid #000000;
  border-radius: 30px;
  padding: 7px 18px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.heart-reset-btn:hover {
  background: #ffffff;
  color: #000000;
  transform: translateY(-1px);
}

/* Fluid hero scaling to prevent excessive wrapping */
@media (max-width: 1200px) {
  .contact-hero h1 {
    font-size: clamp(48px, 6vw, 76px);
  }
  .contact-hero h2 {
    font-size: clamp(48px, 6vw, 76px);
  }
}

/* 6-item responsive layout */
@media (max-width: 1200px) {
  .contact-form .wrapper form .input-wrapper input,
  .contact-form .wrapper form .input-wrapper textarea {
    font-size: 11px !important;
    letter-spacing: 0.2px !important;
  }
}
@media (max-width: 991px) {
  .contact-form {
    height: auto !important;
  }
  .contact-form .wrapper form .input-wrapper {
    flex: 0 0 30vw !important;
    height: 30vw !important;
    margin-bottom: 24px !important;
  }
  .contact-form .wrapper form .heart {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: min(380px, 90vw) !important;
  }
}
@media (max-width: 767px) {
  .contact-form .wrapper form .input-wrapper {
    border-radius: 50px !important;
    flex: 0 0 calc(100vw - 16px) !important;
    height: 54px !important;
    margin-bottom: 14px !important;
  }
  .contact-form .wrapper form .heart {
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: calc(100vw - 24px) !important;
    border-radius: 18px !important;
  }
}