/* =========================================================================
   CONTACT US SECTION - INFOLIO LUXURY EDITORIAL LAYOUT
   Inspired by Infolio Nuxt / Next Freelancer & Agency Contact Section
   - Background: Deep Navy Dark Gradient matching Services (#030c1d -> #081e47)
   - Left Column: "GET IN TOUCH" + "LET'S MAKE YOUR GROWTH BRILLIANT!"
                  + Subtitle + Giant Underlined Phone Number
   - Right Column: Ultra-clean minimalist inputs + Wide "Let's Talk" pill button
   - No social media links (as per user directive)
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,700;1,800;1,900&family=Poppins:wght@400;500;600;700;800&family=Syne:wght@700;800&display=swap');

/* -------------------------------------------------------------------------
   1. MAIN CANVAS CONTAINER (DEEP NAVY GRADIENT MATCHING SERVICES)
   ------------------------------------------------------------------------- */
.camteam-contact-section {
  position: relative;
  width: 100%;
  height: 100vh;
  /* Exact Deep Navy Gradient matching Services section */
  background: linear-gradient(145deg, #030c1d 0%, #061533 45%, #081e47 75%, #020917 100%);
  color: #ffffff;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
  padding: 100px 6vw 40px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  -webkit-overflow-scrolling: touch;
}

/* Ambient Cosmic Light Highlights */
.camteam-contact-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 10% 25%, rgba(56, 189, 248, 0.16) 0%, transparent 45%),
    radial-gradient(circle at 90% 20%, rgba(37, 99, 235, 0.18) 0%, transparent 50%),
    radial-gradient(circle at 45% 85%, rgba(163, 230, 53, 0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 85%, rgba(56, 189, 248, 0.12) 0%, transparent 45%);
  pointer-events: none;
  z-index: 1;
}

.infolio-contact-container {
  position: relative;
  z-index: 2;
  max-width: 1420px;
  width: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 5vw;
  align-items: flex-start;
}

/* -------------------------------------------------------------------------
   2. LEFT EDITORIAL STATEMENT COLUMN
   ------------------------------------------------------------------------- */
.infolio-contact-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 6px;
}

.infolio-contact-tag {
  color: #a3e635; /* Neon Lime Accent */
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin: 0;
}

.infolio-contact-heading {
  font-family: 'Plus Jakarta Sans', 'Syne', sans-serif;
  font-size: clamp(2.2rem, 3.8vw, 3.4rem);
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.5px;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0;
}

.infolio-heading-accent {
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 1px;
}

.infolio-contact-desc {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1.08rem;
  font-weight: 400;
  color: rgba(203, 213, 225, 0.88);
  line-height: 1.7;
  max-width: 500px;
  margin: 0;
}

/* -------------------------------------------------------------------------
   3. RIGHT MINIMALIST FORM COLUMN
   ------------------------------------------------------------------------- */
.infolio-contact-right {
  width: 100%;
}

.infolio-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.infolio-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.infolio-input-field,
.infolio-textarea-field {
  width: 100%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 0.95rem;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #ffffff;
  box-sizing: border-box;
  transition: all 0.3s ease;
}

.infolio-input-field::placeholder,
.infolio-textarea-field::placeholder {
  color: rgba(148, 163, 184, 0.65);
  font-weight: 400;
}

.infolio-input-field:focus,
.infolio-textarea-field:focus {
  outline: none;
  border-color: #38bdf8;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 18px rgba(56, 189, 248, 0.25);
}

.infolio-textarea-field {
  height: 120px;
  resize: vertical;
  min-height: 90px;
}

/* Signature Full-Width Pill Submit Button */
.infolio-btn-submit {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 40px;
  padding: 16px 30px;
  color: #ffffff;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}

.infolio-btn-submit:hover {
  background: #ffffff;
  color: #030c1d;
  border-color: #ffffff;
  box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
  transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   4. RESPONSIVE BREAKPOINTS
   ------------------------------------------------------------------------- */
@media (max-width: 992px) {
  .camteam-contact-section {
    padding: 85px 5vw 35px;
    height: auto;
    min-height: 100vh;
  }

  .infolio-contact-container {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .infolio-form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .infolio-contact-heading {
    font-size: 2.2rem;
  }

  .infolio-phone-link {
    font-size: 1.8rem;
  }
}