/* =========================================================
   NURIA GLOBAL — CONTACT
   /assets/css/pages/contact.css
   ========================================================= */


/* ---------------------------------------------------------
   Contact Hero
   --------------------------------------------------------- */

.ng-contact-hero{
  position:relative;
  overflow:hidden;

  padding:120px 0 110px;

  background:
    radial-gradient(
      circle at 82% 35%,
      rgba(194,29,29,.07) 0%,
      transparent 24%
    ),
    linear-gradient(
      135deg,
      #081525 0%,
      #0f1b2d 58%,
      #111827 100%
    );

  color:#fff;
}


/* Subtle structural detail */

.ng-contact-hero::after{
  content:"";
  position:absolute;

  top:0;
  right:7%;

  width:38%;
  height:100%;

  opacity:.18;
  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.08) 1px,
      transparent 1px
    );

  background-size:56px 56px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000
    );
}

.ng-contact-hero .container{
  position:relative;
  z-index:2;
}

.ng-contact-hero .ng-page-kicker{
  margin-bottom:20px;
  color:rgba(255,255,255,.64);
}

.ng-contact-hero .ng-page-title{
  max-width:820px;
  margin:0;

  color:#fff;

  font-size:clamp(2.7rem, 4.8vw, 4.7rem);
  font-weight:300;
  line-height:1.07;
  letter-spacing:-.03em;
}

.ng-contact-hero .ng-page-subtitle{
  max-width:700px;
  margin-top:28px;
  margin-bottom:0;

  color:rgba(255,255,255,.74);

  font-size:1.08rem;
  line-height:1.75;
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width:991.98px){

  .ng-contact-hero{
    padding:100px 0 90px;
  }

  .ng-contact-hero::after{
    width:55%;
    right:-10%;
  }

}

@media (max-width:767.98px){

  .ng-contact-hero{
    padding:82px 0 76px;
  }

  .ng-contact-hero::after{
    width:75%;
    right:-30%;
    opacity:.12;
  }

  .ng-contact-hero .ng-page-title{
    font-size:clamp(2.35rem, 10vw, 3.3rem);
  }

  .ng-contact-hero .ng-page-subtitle{
    margin-top:22px;
    font-size:1rem;
    line-height:1.65;
  }

}

/* =========================================================
   NURIA GLOBAL — CONTACT
   /assets/css/pages/contact.css
   ========================================================= */


/* ---------------------------------------------------------
   Contact Hero
   --------------------------------------------------------- */

.ng-contact-hero{
  position:relative;
  overflow:hidden;

  padding:120px 0 110px;

  background:
    radial-gradient(
      circle at 82% 35%,
      rgba(194,29,29,.07) 0%,
      transparent 24%
    ),
    linear-gradient(
      135deg,
      #081525 0%,
      #0f1b2d 58%,
      #111827 100%
    );

  color:#fff;
}

.ng-contact-hero::after{
  content:"";
  position:absolute;

  top:0;
  right:7%;

  width:38%;
  height:100%;

  opacity:.18;
  pointer-events:none;

  background-image:
    linear-gradient(
      rgba(255,255,255,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.08) 1px,
      transparent 1px
    );

  background-size:56px 56px;

  mask-image:
    linear-gradient(
      90deg,
      transparent,
      #000
    );
}

.ng-contact-hero .container{
  position:relative;
  z-index:2;
}

.ng-contact-hero .ng-page-kicker{
  margin-bottom:20px;
  color:rgba(255,255,255,.64);
}

.ng-contact-hero .ng-page-title{
  max-width:820px;
  margin:0;

  color:#fff;

  font-size:clamp(2.7rem, 4.8vw, 4.7rem);
  font-weight:300;
  line-height:1.07;
  letter-spacing:-.03em;
}

.ng-contact-hero .ng-page-subtitle{
  max-width:700px;
  margin-top:28px;
  margin-bottom:0;

  color:rgba(255,255,255,.74);

  font-size:1.08rem;
  line-height:1.75;
}


/* ---------------------------------------------------------
   Contact Form Section
   --------------------------------------------------------- */

.ng-contact-form-section{
  padding:110px 0;
  background:#f8fafc;
}

.ng-contact-kicker{
  color:var(--ng-red) !important;
  margin-bottom:18px;
}

.ng-contact-form-title{
  max-width:420px;
  margin:0 0 24px;

  color:#111827;

  font-size:clamp(2rem, 3vw, 3rem);
  font-weight:300;
  line-height:1.15;
  letter-spacing:-.025em;
}

.ng-contact-form-intro{
  max-width:430px;
  margin-bottom:36px;

  color:#626975;
  font-size:1.02rem;
  line-height:1.75;
}


/* ---------------------------------------------------------
   Review Note
   --------------------------------------------------------- */

.ng-contact-note{
  max-width:420px;

  padding-top:22px;

  border-top:1px solid #dfe4ea;
}

.ng-contact-note > span{
  display:block;

  margin-bottom:10px;

  color:var(--ng-red);

  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ng-contact-note p{
  color:#6b7280;
  font-size:.9rem;
  line-height:1.65;
}


/* ---------------------------------------------------------
   Form Container
   --------------------------------------------------------- */

.ng-contact-form-wrap{
  padding:48px;

  border:1px solid rgba(15,27,45,.08);
  border-radius:20px;

  background:#fff;

  box-shadow:
    0 18px 48px rgba(15,27,45,.05);
}


/* ---------------------------------------------------------
   Labels
   --------------------------------------------------------- */

.ng-contact-form-wrap .form-label{
  margin-bottom:8px;

  color:#374151;

  font-size:.82rem;
  font-weight:600;
  letter-spacing:.02em;
}


/* ---------------------------------------------------------
   Inputs
   --------------------------------------------------------- */

.ng-contact-form-wrap .form-control,
.ng-contact-form-wrap .form-select{
  min-height:52px;

  padding:.8rem .95rem;

  border:1px solid #d9dee6;
  border-radius:10px;

  background:#fff;

  color:#111827;

  font-size:.95rem;

  box-shadow:none;

  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background-color .2s ease;
}

.ng-contact-form-wrap textarea.form-control{
  min-height:160px;
  resize:vertical;
}


/* Placeholder */

.ng-contact-form-wrap .form-control::placeholder{
  color:#9ca3af;
}


/* Focus */

.ng-contact-form-wrap .form-control:focus,
.ng-contact-form-wrap .form-select:focus{
  border-color:rgba(194,29,29,.55);

  box-shadow:
    0 0 0 3px rgba(194,29,29,.08);

  background:#fff;
}


/* ---------------------------------------------------------
   Select
   --------------------------------------------------------- */

.ng-contact-form-wrap .form-select{
  cursor:pointer;
}


/* ---------------------------------------------------------
   Submit
   --------------------------------------------------------- */

.ng-contact-form-wrap .btn-ng-primary{
  min-height:48px;

  padding-left:1.35rem;
  padding-right:1.35rem;
}

.ng-contact-form-wrap .btn-ng-primary:disabled{
  opacity:.72;
  cursor:not-allowed;
}

.ng-sending{
  color:#6b7280;
  font-size:.9rem;
}


/* ---------------------------------------------------------
   Alerts
   --------------------------------------------------------- */

.ng-contact-form-wrap .alert{
  margin-bottom:0;

  border:0;
  border-radius:12px;

  font-size:.92rem;
  line-height:1.6;
}

.ng-contact-form-wrap .alert-success{
  background:#ecfdf5;
  color:#065f46;
}

.ng-contact-form-wrap .alert-danger{
  background:#fef2f2;
  color:#7f1d1d;
}


/* ---------------------------------------------------------
   Responsive — Tablet
   --------------------------------------------------------- */

@media (max-width:991.98px){

  .ng-contact-hero{
    padding:100px 0 90px;
  }

  .ng-contact-hero::after{
    width:55%;
    right:-10%;
  }

  .ng-contact-form-section{
    padding:80px 0;
  }

  .ng-contact-form-wrap{
    padding:38px;
  }

}


/* ---------------------------------------------------------
   Responsive — Mobile
   --------------------------------------------------------- */

@media (max-width:767.98px){

  .ng-contact-hero{
    padding:82px 0 76px;
  }

  .ng-contact-hero::after{
    width:75%;
    right:-30%;
    opacity:.12;
  }

  .ng-contact-hero .ng-page-title{
    font-size:clamp(2.35rem, 10vw, 3.3rem);
  }

  .ng-contact-hero .ng-page-subtitle{
    margin-top:22px;

    font-size:1rem;
    line-height:1.65;
  }

  .ng-contact-form-section{
    padding:64px 0;
  }

  .ng-contact-form-wrap{
    padding:28px 22px;
    border-radius:16px;
  }

  .ng-contact-form-title{
    max-width:100%;
  }

  .ng-contact-form-intro,
  .ng-contact-note{
    max-width:100%;
  }

}


/* ---------------------------------------------------------
   Small Mobile
   --------------------------------------------------------- */

@media (max-width:575.98px){

  .ng-contact-form-wrap{
    padding:24px 18px;
  }

  .ng-contact-form-wrap .btn-ng-primary{
    width:100%;
  }

}