.nf-before-form-content{
  display: none;
}

/* Contact Page */

.contact-page {

  background: #fff;

  color: #111;

}



/* =========================

   CONTACT BANNER (Same as About)

========================= */



/* horizontal scroll avoid */

.contact-page{ overflow-x: hidden; }



.contact-banner{

  position: relative;



  /* FULL WIDTH even if main/container is boxed */

  width: 100vw;

  margin-left: calc(50% - 50vw);



  display: flex;

  align-items: flex-end;



  /* Mobile browsers ke liye better than vh */

  min-height: clamp(320px, 70svh, 820px);

  padding: clamp(96px, 10svh, 160px) 0 clamp(44px, 6svh, 90px);



  background-color: #0b0b0b;

  background-size: cover;

  background-repeat: no-repeat;

  background-position: center;

  overflow: hidden;



  /* Banner text ko upar lana + safe padding */

  padding-bottom: clamp(70px, 8svh, 120px);

}



/* overlay for readability */

.contact-banner::before{

  content:"";

  position:absolute;

  inset:0;

  background: linear-gradient(

    to bottom,

    rgba(0,0,0,0.15) 0%,

    rgba(0,0,0,0.35) 45%,

    rgba(0,0,0,0.55) 100%

  );

  pointer-events:none;

  z-index: 1;

}



.contact-banner__inner{

  position: relative;

  width: 100%;

  max-width: 1100px;

  z-index: 2;

  padding-left: 18px;

  padding-right: 18px;

}



/* Title */

.contact-banner__title{

  margin: 0 0 12px;

  font-size: clamp(28px, 5vw, 66px);

  font-weight: 600;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: #fff;

  line-height: 1.08;

  text-shadow: 0 12px 35px rgba(0,0,0,0.55);

}



/* Content */

.contact-banner__content{

  max-width: 720px;

  color: rgba(255,255,255,0.88);

  font-size: clamp(14px, 1.3vw, 16px);

  line-height: 1.85;

}

.contact-banner__content p{ margin: 0 0 10px; }

.contact-banner__content p:last-child{ margin-bottom: 0; }



/* Tablet */

@media (max-width: 768px){

  .contact-banner{

    min-height: clamp(300px, 60svh, 560px);

    padding: 110px 0 54px;

    background-position: center 22%;

    padding-bottom: 84px;

  }

  .contact-banner__title{

    letter-spacing: 0.08em;

  }

}



/* Small phones */

@media (max-width: 480px){

  .contact-banner{

    min-height: 320px;

    padding: 100px 0 46px;

    background-position: center 18%;

    padding-bottom: 74px;

  }

}

/* Social */

.contact-social {

  padding: 44px 0;

  border-bottom: 1px solid rgba(0,0,0,0.08);

}



.contact-social__inner {}



.contact-social__title {

  margin: 0 0 16px;

  font-size: 18px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.contact-social__list {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

}



.contact-social__item {

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 12px 14px;

  border: 1px solid rgba(0,0,0,0.12);

  border-radius: 999px;

  text-decoration: none;

  color: #111;

  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;

}



.contact-social__item i {

  font-size: 16px;

}



.contact-social__item:hover {

  transform: translateY(-1px);

  background: rgba(0,0,0,0.03);

  border-color: rgba(0,0,0,0.22);

}



/* Main grid */

.contact-main {

  padding: 60px 0 70px;

}



.contact-main__inner {

  display: grid;

  grid-template-columns: 1fr 1.05fr;

  gap: 26px;

  align-items: start;

}



/* Details */

.contact-details__title,

.contact-form__title,

.contact-map__title {

  margin: 0 0 14px;

  font-size: 18px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.contact-details__grid {

  display: grid;

  gap: 12px;

}



.contact-card {

  display: grid;

  grid-template-columns: 44px 1fr;

  gap: 12px;

  padding: 16px;

  border: 1px solid rgba(0,0,0,0.10);

  border-radius: 14px;

  background: #fff;

}



.contact-card__icon {

  width: 44px;

  height: 44px;

  border-radius: 12px;

  display: grid;

  place-items: center;

  background: rgba(0,0,0,0.04);

}



.contact-card__icon i {

  font-size: 16px;

}



.contact-card__label {

  font-size: 12px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(0,0,0,0.6);

  margin-bottom: 6px;

}



.contact-card__value {

  font-size: 15px;

  line-height: 1.6;

}



.contact-card__value a {

  color: inherit;

  text-decoration: none;

  border-bottom: 1px solid rgba(0,0,0,0.2);

}



.contact-card__value a:hover {

  border-bottom-color: rgba(0,0,0,0.6);

}



/* Form box */

.contact-form__box {

  padding: 18px;

  border: 1px solid rgba(0,0,0,0.10);

  border-radius: 14px;

  background: #fff;

}



.contact-form__note {

  margin: 0;

  padding: 14px 16px;

  border-radius: 12px;

  background: rgba(0,0,0,0.04);

}



/* Ninja Forms basic styling */

.nf-form-cont input[type="text"],

.nf-form-cont input[type="email"],

.nf-form-cont input[type="tel"],

.nf-form-cont textarea,

.nf-form-cont select {

  width: 100%;

  border: 1px solid rgba(0,0,0,0.18);

  border-radius: 12px;

  padding: 12px 14px;

  background: #fff;

  color: #111;

  outline: none;

}



.nf-form-cont textarea {

  min-height: 120px;

  resize: vertical;

}



.nf-form-cont input:focus,

.nf-form-cont textarea:focus,

.nf-form-cont select:focus {

  border-color: rgba(0,0,0,0.45);

}



.nf-form-cont .nf-field-label label {

  font-size: 12px;

  letter-spacing: 0.12em;

  text-transform: uppercase;

  color: rgba(0,0,0,0.6);

}



.nf-form-cont .nf-field-element input[type="button"],

.nf-form-cont .nf-field-element button,

.nf-form-cont input[type="submit"] {

  border: 1px solid rgba(0,0,0,0.6);

  background: #111;

  color: #fff;

  padding: 12px 18px;

  border-radius: 999px;

  cursor: pointer;

  transition: transform 0.2s ease, opacity 0.2s ease;

}



.nf-form-cont input[type="submit"]:hover,

.nf-form-cont button:hover {

  transform: translateY(-1px);

  opacity: 0.95;

}



/* Map */

.contact-map {

  padding: 0 0 70px;

}



.contact-map__embed {

  border: 1px solid rgba(0,0,0,0.10);

  border-radius: 14px;

  overflow: hidden;

  background: #fff;

}



.contact-map__embed iframe {

  width: 100%;

  height: 420px;

  border: 0;

  display: block;

}



/* CTA */

.contact-cta {

  padding: 70px 0;

  background: #111;

  color: #fff;

}



.contact-cta__inner {

  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  gap: 24px;

  align-items: center;

}



.contact-cta__title {

  margin: 0;

  font-size: 22px;

  letter-spacing: 0.08em;

  text-transform: uppercase;

}



.contact-cta__text {

  color: rgba(255,255,255,0.85);

  line-height: 1.7;

}



.contact-cta__action {

  text-align: right;

}



.contact-cta__btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  padding: 12px 18px;

  border-radius: 999px;

  border: 1px solid rgba(255,255,255,0.8);

  color: #fff;

  text-decoration: none;

  transition: transform 0.2s ease, background 0.2s ease;

}



.contact-cta__btn:hover {

  transform: translateY(-1px);

  background: rgba(255,255,255,0.08);

}



.contact-cta__hint {

  margin: 10px 0 0;

  font-size: 13px;

  color: rgba(255,255,255,0.75);

}



/* Responsive */

@media (max-width: 900px) {

  .contact-main__inner {

    grid-template-columns: 1fr;

  }



  .contact-cta__inner {

    grid-template-columns: 1fr;

  }



  .contact-cta__action {

    text-align: left;

  }



  .contact-banner__inner {

    padding: 70px 0 40px;

  }

}