/*-----------------------------------*\
  #contact.css — Varniraj Organic Agro
\*-----------------------------------*/

/* subtitle helper */
.section-subtitle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--emerald);
  font-family: var(--ff-playfair-display);
  font-style: italic;
  font-size: var(--fs-6);
  letter-spacing: 1px;
  margin-block-end: 10px;
}

.subtitle-line {
  display: block;
  width: 30px;
  height: 2px;
  background-color: var(--emerald);
  border-radius: 2px;
  flex-shrink: 0;
}

/*-----------------------------------*\
  #CONTACT INFO CARDS
\*-----------------------------------*/

/* full-width dark green hero band above cards */
.contact-cards-section { background: var(--white); }

.contact-cards-hero {
  background: linear-gradient(160deg,
    hsl(152,90%,9%) 0%,
    hsl(152,88%,17%) 50%,
    hsl(155,70%,22%) 100%);
  padding-block: 60px 100px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* decorative ring */
.contact-cards-hero::before {
  content: "";
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  border: 60px solid hsla(0,0%,100%,0.04);
  top: -180px; right: -140px;
  pointer-events: none;
}

.contact-cards-hero .section-subtitle { color: hsla(0,0%,100%,0.65); }
.contact-cards-hero .section-subtitle .subtitle-line { background-color: hsl(46,100%,65%); }
.contact-cards-hero .section-title  { color: var(--white); }

.contact-hero-sub {
  color: hsla(0,0%,100%,0.65);
  font-size: var(--fs-5);
  line-height: 1.75;
  margin-block-start: 14px;
}

/* cards grid — pulled UP to overlap the hero band */
.contact-cards-section .container { position: relative; }

.contact-cards-grid {
  display: grid;
  gap: 24px;
  margin-block-start: -64px; /* overlap hero band */
  padding-block-end: 64px;
}

/* base card */
.contact-info-card {
  background: var(--white);
  border-radius: 20px;
  padding: 36px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 40px hsla(0,0%,0%,0.1);
  border: 1.5px solid var(--platinum);
  transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
}

.contact-info-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px hsla(0,0%,0%,0.14);
}

/* colored top accent bar */
.card-top-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-radius: 20px 20px 0 0;
}

.card-primary   .card-top-accent { background: linear-gradient(90deg, hsl(152,95%,36%), hsl(152,88%,55%)); }
.card-wholesale .card-top-accent { background: linear-gradient(90deg, hsl(152,95%,36%), hsl(152,88%,55%)); }
.card-export    .card-top-accent { background: linear-gradient(90deg, var(--russian-violet), hsl(245,60%,55%)); }

.contact-info-card:hover { border-color: transparent; }
.card-primary:hover,
.card-wholesale:hover { box-shadow: 0 20px 60px hsla(152,88%,22%,0.18); }
.card-export:hover    { box-shadow: 0 20px 60px hsla(245,97%,13%,0.14); }

/* icon */
.card-icon-wrap {
  width: 66px; height: 66px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  transition: transform 0.35s;
}

.card-primary   .card-icon-wrap { background: hsl(152,95%,93%); color: hsl(152,95%,22%); }
.card-wholesale .card-icon-wrap { background: hsl(152,95%,93%); color: hsl(152,95%,22%); }
.card-export    .card-icon-wrap { background: hsl(245,60%,93%); color: var(--russian-violet); }

.contact-info-card:hover .card-icon-wrap { transform: rotate(-8deg) scale(1.1); }

/* label tag */
.card-label-tag {
  display: inline-flex;
  align-self: flex-start;
  font-size: var(--fs-9);
  font-weight: var(--fw-700);
  padding: 4px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.card-primary   .card-label-tag,
.card-wholesale .card-label-tag { background: hsl(152,95%,93%); color: hsl(152,95%,22%); }
.card-export    .card-label-tag { background: hsl(245,60%,93%); color: var(--russian-violet); }

/* person name */
.card-person-name {
  color: var(--russian-violet);
  font-size: var(--fs-2);
  font-weight: var(--fw-700);
  font-family: var(--ff-playfair-display);
  line-height: 1.2;
}

.card-person-role {
  color: var(--emerald);
  font-size: var(--fs-7);
  font-weight: var(--fw-600);
  margin-block-start: -8px;
}

/* section title for wholesale/export */
.card-section-title {
  color: var(--russian-violet);
  font-size: var(--fs-3);
  font-weight: var(--fw-700);
  font-family: var(--ff-playfair-display);
}

/* description */
.card-desc {
  color: var(--sonic-silver);
  font-size: var(--fs-6);
  line-height: 1.8;
}

/* thin divider */
.card-divider {
  height: 1px;
  background: var(--platinum);
  border-radius: 2px;
}

/* contact links for primary card */
.card-contact-list { display: flex; flex-direction: column; gap: 10px; }

.card-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: transform 0.25s;
}

.card-contact-item:hover { transform: translateX(4px); }

.card-contact-icon {
  width: 36px; height: 36px; min-width: 36px;
  background: hsl(152,95%,93%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: hsl(152,95%,26%);
  transition: background 0.25s;
}

.card-contact-item:hover .card-contact-icon { background: var(--emerald); color: var(--white); }

.card-contact-text {
  color: var(--gunmetal-2);
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
  word-break: break-all;
}

/* checklist for wholesale/export */
.card-meta-list { display: flex; flex-direction: column; gap: 10px; }

.card-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--gunmetal-2);
  font-size: var(--fs-6);
  font-weight: var(--fw-500);
}

.card-primary   .card-meta-item ion-icon,
.card-wholesale .card-meta-item ion-icon { color: var(--emerald); font-size: 1.8rem; flex-shrink: 0; }
.card-export    .card-meta-item ion-icon { color: var(--russian-violet); font-size: 1.8rem; flex-shrink: 0; }

/* action button at bottom of card */
.card-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: 50px;
  font-size: var(--fs-7);
  font-weight: var(--fw-700);
  margin-block-start: auto;
  transition: transform 0.25s, box-shadow 0.25s;
}

/* WhatsApp green */
.card-primary .card-action-btn {
  background: #25D366;
  color: var(--white);
  box-shadow: 0 6px 18px hsla(145,63%,49%,0.3);
}

.card-primary .card-action-btn:hover {
  background: #1ebe5b;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px hsla(145,63%,49%,0.45);
}

/* emerald green */
.card-action-green {
  background: linear-gradient(135deg, hsl(152,95%,36%), hsl(152,88%,24%));
  color: var(--white);
  box-shadow: 0 6px 18px hsla(152,88%,22%,0.3);
}

.card-action-green:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px hsla(152,88%,22%,0.45);
}

/* violet */
.card-action-violet {
  background: linear-gradient(135deg, hsl(245,80%,35%), var(--russian-violet));
  color: var(--white);
  box-shadow: 0 6px 18px hsla(245,97%,13%,0.25);
}

.card-action-violet:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px hsla(245,97%,13%,0.4);
}


/*-----------------------------------*\
  #FORM SECTION LAYOUT
\*-----------------------------------*/

.contact-form-section { background: hsl(152,20%,97%); }

.contact-form-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/*-----------------------------------*\
  #FORM WRAP — left side
\*-----------------------------------*/

.contact-form-wrap {
  flex: 1;
  background: var(--white);
  border-radius: 24px;
  padding: 44px 40px;
  box-shadow: 0 8px 40px hsla(0,0%,0%,0.06);
  border: 1px solid var(--platinum);
}

/* form header block */
.form-header { margin-block-end: 36px; }

.form-header-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: hsl(152,95%,93%);
  color: hsl(152,95%,22%);
  font-size: var(--fs-8);
  font-weight: var(--fw-700);
  padding: 6px 16px;
  border-radius: 50px;
  margin-block-end: 16px;
  border: 1px solid hsl(152,95%,80%);
}

.contact-form-title {
  color: var(--russian-violet);
  font-size: clamp(2.2rem, 3vw, 3rem);
  font-weight: var(--fw-700);
  font-family: var(--ff-playfair-display);
  line-height: 1.3;
  margin-block-end: 8px;
}

.contact-form-sub {
  color: var(--sonic-silver);
  font-size: var(--fs-6);
  line-height: 1.7;
}

/* form fields */
.contact-form { display: flex; flex-direction: column; gap: 22px; }

.form-row { display: grid; gap: 22px; }

.form-group { display: flex; flex-direction: column; gap: 8px; }

.form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gunmetal-2);
  font-size: var(--fs-7);
  font-weight: var(--fw-700);
  letter-spacing: 0.2px;
}

.form-label ion-icon { color: var(--emerald); font-size: 1.6rem; flex-shrink: 0; }

.req { color: var(--emerald); font-size: var(--fs-7); }

/* inputs */
.form-input {
  background: hsl(152,20%,97%);
  color: var(--eerie-black);
  font-size: var(--fs-6);
  font-family: var(--ff-roboto);
  border: 1.5px solid var(--platinum);
  border-radius: 12px;
  padding: 15px 18px;
  outline: none;
  width: 100%;
  transition: border-color 0.25s, box-shadow 0.25s, background 0.25s;
  -webkit-appearance: none;
}

.form-input::placeholder { color: var(--battleship-gray); }

.form-input:hover { border-color: hsl(152,95%,72%); }

.form-input:focus {
  border-color: var(--emerald);
  box-shadow: 0 0 0 4px hsla(152,95%,39%,0.1);
  background: var(--white);
}

/* select with custom arrow */
.select-wrap { position: relative; }

.select-wrap .form-input { padding-inline-end: 44px; cursor: pointer; }

.select-arrow {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  color: var(--emerald);
  font-size: 1.8rem;
  pointer-events: none;
}

.form-select { appearance: none; -webkit-appearance: none; }

/* textarea */
.form-textarea {
  resize: vertical;
  min-height: 140px;
  line-height: 1.75;
}

/* form footer: privacy note + submit side by side */
.form-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block-start: 8px;
  border-block-start: 1px solid var(--platinum);
  margin-block-start: 4px;
}

.form-note {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--battleship-gray);
  font-size: var(--fs-8);
}

.form-note ion-icon { color: var(--emerald); font-size: 1.6rem; flex-shrink: 0; }

/* submit button */
.contact-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, hsl(152,95%,36%), hsl(152,88%,24%));
  color: var(--white);
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  font-family: var(--ff-roboto);
  padding: 16px 36px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 24px hsla(152,88%,22%,0.35);
  transition: transform 0.25s, box-shadow 0.25s;
  white-space: nowrap;
}

.contact-submit-btn ion-icon { font-size: 2rem; transition: transform 0.25s; }

.contact-submit-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px hsla(152,88%,22%,0.5);
}

.contact-submit-btn:hover ion-icon { transform: translateX(4px); }

/*-----------------------------------*\
  #SIDEBAR — right side
\*-----------------------------------*/

.contact-sidebar {
  flex-shrink: 0;
  background: linear-gradient(160deg,
    hsl(152,88%,16%) 0%,
    hsl(152,80%,22%) 60%,
    hsl(155,70%,26%) 100%);
  border-radius: 24px;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  overflow: hidden;
}

/* decorative ring */
.contact-sidebar::before {
  content: "";
  position: absolute;
  width: 360px; height: 360px;
  border-radius: 50%;
  border: 60px solid hsla(0,0%,100%,0.05);
  top: -120px; right: -100px;
  pointer-events: none;
}

.contact-sidebar::after {
  content: "";
  position: absolute;
  width: 180px; height: 180px;
  border-radius: 50%;
  border: 36px solid hsla(0,0%,100%,0.04);
  bottom: -50px; left: -40px;
  pointer-events: none;
}

.sidebar-header {
  margin-block-end: 32px;
  position: relative;
  z-index: 1;
}

.sidebar-title {
  color: var(--white);
  font-size: var(--fs-2);
  font-weight: var(--fw-700);
  font-family: var(--ff-playfair-display);
  margin-block-end: 8px;
}

.sidebar-desc {
  color: hsla(0,0%,100%,0.65);
  font-size: var(--fs-7);
  line-height: 1.7;
}

.sidebar-info-block {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 20px;
  border-block-end: 1px solid hsla(0,0%,100%,0.1);
  position: relative;
  z-index: 1;
  transition: background 0.25s;
}

.sidebar-info-block:first-of-type { padding-block-start: 0; }

.sidebar-info-block:last-of-type { border-block-end: none; }

.sidebar-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  background: hsla(0,0%,100%,0.12);
  border: 1px solid hsla(0,0%,100%,0.15);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: hsl(46,100%,65%);
  transition: background 0.25s, transform 0.25s;
}

.sidebar-info-block:hover .sidebar-icon {
  background: hsla(0,0%,100%,0.2);
  transform: scale(1.08);
}

.sidebar-label {
  color: hsla(0,0%,100%,0.55);
  font-size: var(--fs-9);
  font-weight: var(--fw-600);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-block-end: 5px;
}

.sidebar-value {
  color: var(--white);
  font-size: var(--fs-6);
  font-weight: var(--fw-600);
  line-height: 1.5;
}

.sidebar-link { transition: color 0.25s; word-break: break-all; }
.sidebar-link:hover { color: hsl(46,100%,65%); }

.sidebar-sub {
  color: hsla(0,0%,100%,0.5);
  font-size: var(--fs-8);
  margin-block-start: 2px;
}

/* WhatsApp button */
.whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #25D366;
  color: var(--white);
  font-size: var(--fs-6);
  font-weight: var(--fw-700);
  padding: 16px 24px;
  border-radius: 50px;
  margin-block-start: 28px;
  box-shadow: 0 6px 20px hsla(145,63%,49%,0.35);
  transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
  position: relative;
  z-index: 1;
}

.whatsapp-btn ion-icon { font-size: 2.4rem; }

.whatsapp-btn:hover {
  background: #1ebe5b;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px hsla(145,63%,49%,0.5);
}

/*-----------------------------------*\
  #MEDIA QUERIES
\*-----------------------------------*/

@media (min-width: 576px) {
  .form-row { grid-template-columns: 1fr 1fr; }
  .contact-cards-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 768px) {
  .contact-cards-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 992px) {
  .contact-form-grid  { flex-direction: row; align-items: flex-start; }
  .contact-form-wrap  { flex: 1; }
  .contact-sidebar    { flex: 0 0 320px; }
}

@media (max-width: 575px) {
  .contact-cards-grid  { margin-block-start: -40px; }
  .contact-cards-hero  { padding-block: 50px 80px; }
  .contact-hero-sub    { font-size: var(--fs-6); }
  .contact-form-wrap   { padding: 28px 20px; }
  .contact-form-title  { font-size: 2rem; }
  .form-row            { grid-template-columns: 1fr; }
  .form-footer-row     { flex-direction: column; align-items: stretch; }
  .contact-submit-btn  { width: 100%; justify-content: center; }
  .contact-sidebar     { padding: 32px 22px; }
  .card-icon-wrap      { width: 54px; height: 54px; font-size: 2.4rem; }
}


/*-----------------------------------*\
  #COMPREHENSIVE RESPONSIVE — contact.css
\*-----------------------------------*/

/* ======== 320px – 359px ======== */
@media (max-width: 359px) {
  /* Hero band */
  .contact-cards-hero      { padding-block: 40px 70px; }
  .contact-cards-hero .section-title { font-size: 2rem; }
  .contact-hero-sub        { font-size: var(--fs-7); }

  /* Cards */
  .contact-cards-grid      { margin-block-start: -36px; padding-block-end: 40px; gap: 16px; }
  .contact-info-card       { padding: 24px 16px 20px; }
  .card-icon-wrap          { width: 50px; height: 50px; font-size: 2.2rem; }
  .card-person-name        { font-size: var(--fs-3); }
  .card-section-title      { font-size: var(--fs-4); }
  .card-desc               { font-size: var(--fs-7); }
  .card-contact-text       { font-size: var(--fs-7); }
  .card-action-btn         { padding: 11px 16px; font-size: var(--fs-8); }
  .card-meta-item          { font-size: var(--fs-7); }

  /* Form */
  .contact-form-wrap       { padding: 22px 14px; border-radius: 16px; }
  .contact-form-title      { font-size: 1.8rem; }
  .contact-form-sub        { font-size: var(--fs-7); }
  .form-label              { font-size: var(--fs-8); }
  .form-input              { padding: 12px 14px; font-size: var(--fs-7); border-radius: 10px; }
  .form-textarea           { min-height: 110px; }
  .form-row                { grid-template-columns: 1fr; }
  .contact-submit-btn      { width: 100%; justify-content: center; padding: 13px 20px; font-size: var(--fs-7); }
  .form-footer-row         { flex-direction: column; align-items: stretch; }
  .form-note               { font-size: var(--fs-9); }

  /* Sidebar */
  .contact-sidebar         { padding: 28px 14px; border-radius: 16px; }
  .sidebar-title           { font-size: var(--fs-3); }
  .sidebar-value           { font-size: var(--fs-7); }
  .sidebar-icon            { width: 38px; height: 38px; min-width: 38px; font-size: 1.8rem; }
  .whatsapp-btn            { padding: 13px 20px; font-size: var(--fs-7); }
}

/* ======== 360px – 479px ======== */
@media (min-width: 360px) and (max-width: 479px) {
  .contact-cards-hero      { padding-block: 44px 80px; }
  .contact-cards-grid      { margin-block-start: -44px; gap: 18px; }
  .contact-info-card       { padding: 28px 18px 22px; }
  .card-icon-wrap          { width: 56px; height: 56px; font-size: 2.6rem; }
  .card-person-name        { font-size: var(--fs-2); }

  .contact-form-wrap       { padding: 26px 18px; }
  .contact-form-title      { font-size: 2rem; }
  .form-row                { grid-template-columns: 1fr; }
  .contact-submit-btn      { width: 100%; justify-content: center; }
  .form-footer-row         { flex-direction: column; align-items: stretch; }

  .contact-sidebar         { padding: 32px 18px; }
  .sidebar-value           { font-size: var(--fs-7); word-break: break-all; }
}

/* ======== 480px – 575px ======== */
@media (min-width: 480px) and (max-width: 575px) {
  .contact-cards-grid      { grid-template-columns: 1fr; }
  .contact-info-card       { padding: 30px 22px; }

  .contact-form-wrap       { padding: 32px 22px; }
  .form-row                { grid-template-columns: 1fr; }
  .contact-submit-btn      { width: 100%; justify-content: center; }
  .form-footer-row         { flex-direction: column; align-items: stretch; }
}

/* ======== 576px – 767px ======== */
@media (min-width: 576px) and (max-width: 767px) {
  .contact-cards-grid      { grid-template-columns: 1fr 1fr; }
  .contact-cards-grid .card-primary { grid-column: 1 / -1; } /* primary contact full width */

  .contact-form-grid       { flex-direction: column; }
  .contact-form-wrap       { padding: 36px 28px; }
  .form-row                { grid-template-columns: 1fr 1fr; }
  .contact-sidebar         { flex: none; }
  .form-footer-row         { flex-direction: column; align-items: stretch; }
  .contact-submit-btn      { width: 100%; justify-content: center; }
}

/* ======== 768px – 991px ======== */
@media (min-width: 768px) and (max-width: 991px) {
  .contact-cards-grid      { grid-template-columns: repeat(3, 1fr); }

  .contact-form-grid       { flex-direction: column; gap: 32px; }
  .contact-form-wrap       { flex: none; }
  .contact-sidebar         { flex: none; width: 100%; }
  .form-row                { grid-template-columns: 1fr 1fr; }

  .form-footer-row         { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ======== 992px+ ======== */
@media (min-width: 992px) {
  .contact-form-grid       { flex-direction: row; align-items: flex-start; }
  .contact-form-wrap       { flex: 1; }
  .contact-sidebar         { flex: 0 0 340px; width: 340px; }
  .form-row                { grid-template-columns: 1fr 1fr; }
  .form-footer-row         { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ======== 1200px+ ======== */
@media (min-width: 1200px) {
  .contact-sidebar { flex: 0 0 360px; width: 360px; }
}

/* ======== Contact cards: full-width stack on very small ======== */
@media (max-width: 575px) {
  .contact-cards-grid { grid-template-columns: 1fr; }
}

/* ======== Card contact email: prevent overflow ======== */
.card-contact-text { overflow-wrap: break-word; word-break: break-word; hyphens: auto; }
.sidebar-link      { overflow-wrap: break-word; word-break: break-word; }

/* ======== Form: prevent zoom on iOS (keep font-size >= 16px for inputs) ======== */
@media (max-width: 767px) {
  .form-input,
  .form-textarea,
  .form-select {
    font-size: 16px; /* prevents iOS auto-zoom */
  }
}