/* =========================
   CONTACT PAGE
========================= */

body{

  background:
    linear-gradient(
      135deg,
      #041120 0%,
      #071B34 45%,
      #0A2B4A 100%
    );

  color:white;

  overflow-x:hidden;
}


/* =========================
   HERO SECTION
========================= */

.contact-hero{

  min-height:68vh;

  display:flex;
  align-items:center;

  position:relative;

  padding-top:120px;

  overflow:hidden;
}


/* GLOWS */

.contact-glow{

  position:absolute;

  border-radius:50%;

  filter:blur(120px);

  opacity:0.18;

  z-index:0;
}

.contact-glow-1{

  width:420px;
  height:420px;

  background:#00C2D1;

  top:-120px;
  left:-120px;
}

.contact-glow-2{

  width:420px;
  height:420px;

  background:#F97316;

  bottom:-120px;
  right:-120px;
}


/* CONTENT */

.contact-hero-content{

  position:relative;

  z-index:2;

  max-width:850px;
}

.contact-badge{

  display:inline-flex;

  align-items:center;

  padding:12px 20px;

  border-radius:999px;

  background:
    rgba(249,115,22,0.12);

  border:
    1px solid rgba(249,115,22,0.2);

  color:#FDBA74;

  font-size:0.82rem;

  font-weight:700;

  letter-spacing:1.5px;

  margin-bottom:30px;
}

.contact-hero h1{

  font-size:clamp(4rem, 7vw, 5.2rem);

  line-height:1.02;

  margin-bottom:28px;

  font-family:"Merriweather", serif;
}

.contact-hero h1 span{

  color:#00C2D1;
}

.contact-hero p{

  max-width:760px;

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

  font-size:1.15rem;

  line-height:2;
}


/* =========================
   CONTACT SECTION
========================= */

.contact-section{

  padding:80px 0 100px;
}


/* GRID */

.contact-grid{

  display:grid;

  grid-template-columns:
    380px 1fr;

  gap:40px;

  align-items:start;
}


/* =========================
   INFO SIDE
========================= */

.contact-info{

  display:flex;

  flex-direction:column;

  gap:24px;
}


/* INFO CARD */

.info-card{

  padding:34px 30px;

  border-radius:30px;

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

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

  backdrop-filter:blur(14px);

  transition:0.35s ease;
}

.info-card:hover{

  transform:
    translateY(-6px);

  border-color:
    rgba(0,194,209,0.35);

  box-shadow:
    0 18px 40px rgba(0,0,0,0.22);
}


/* ICON */

.info-icon{

  width:68px;
  height:68px;

  border-radius:22px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-bottom:24px;

  background:
    linear-gradient(
      135deg,
      #F97316,
      #FB923C
    );

  color:white;

  font-size:1.4rem;

  box-shadow:
    0 10px 28px rgba(249,115,22,0.25);
}


/* TEXT */

.info-card h3{

  font-size:1.4rem;

  margin-bottom:14px;

  color:white;
}

.info-card p{

  color:#00C2D1;

  font-size:1.08rem;

  margin-bottom:10px;

  font-weight:600;
}

.info-card span{

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

  line-height:1.8;

  font-size:0.96rem;
}


/* =========================
   FORM
========================= */

.form-card{

  padding:48px;

  border-radius:36px;

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

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

  backdrop-filter:blur(18px);
}


/* FORM TITLE */

.form-card h2{

  font-size:2.8rem;

  margin-bottom:14px;

  font-family:"Merriweather", serif;
}

.form-subtitle{

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

  margin-bottom:36px;

  line-height:1.8;
}


/* INPUTS */

.form-card form{

  display:flex;

  flex-direction:column;

  gap:20px;
}

.form-card input,
.form-card textarea{

  width:100%;

  padding:18px 20px;

  border-radius:18px;

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

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

  color:white;

  font-size:1rem;

  transition:0.3s ease;
}

.form-card input::placeholder,
.form-card textarea::placeholder{

  color:
    rgba(255,255,255,0.42);
}

.form-card input:focus,
.form-card textarea:focus{

  outline:none;

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

  box-shadow:
    0 0 0 4px rgba(0,194,209,0.12);
}


/* BUTTON */

.form-card button{

  padding:18px 28px;

  border:none;

  border-radius:20px;

  background:
    linear-gradient(
      135deg,
      #F97316,
      #FB923C
    );

  color:white;

  font-size:1rem;

  font-weight:600;

  cursor:pointer;

  transition:0.35s ease;
}

.form-card button:hover{

  transform:
    translateY(-3px);

  box-shadow:
    0 12px 34px rgba(249,115,22,0.28);
}


/* =========================
   MAP
========================= */

.map-section{

  padding:0 0 120px;
}

.map-card{

  overflow:hidden;

  border-radius:36px;

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

  box-shadow:
    0 20px 50px rgba(0,0,0,0.28);
}

.map-card iframe{

  width:100%;

  height:480px;

  border:none;

  display:block;
}


/* =========================
   MOBILE
========================= */

@media(max-width:992px){

  .contact-grid{

    grid-template-columns:1fr;
  }
}

@media(max-width:768px){

  .contact-hero{

    min-height:auto;

    padding-top:140px;

    padding-bottom:60px;
  }

  .contact-hero h1{

    font-size:3rem;
  }

  .form-card{

    padding:34px 24px;
  }

  .form-card h2{

    font-size:2.1rem;
  }

  .map-card iframe{

    height:340px;
  }
}