/* RESET */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
margin:0;
background:#f4fffc;
}

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

.contact-section{

position:relative;

padding:60px 20px 120px;

overflow:hidden;

background:
linear-gradient(
rgba(244,255,252,0.92),
rgba(244,255,252,0.96)
),
url("images/dna-bg.png");

background-size:cover;

background-position:center;
}

/* OVERLAY */

.contact-section::before{

content:"";

position:absolute;

inset:0;

background:
radial-gradient(
circle at top right,
rgba(20,184,166,0.10),
transparent 40%
);

z-index:1;
}

/* CONTAINER */

.contact-container{

position:relative;

z-index:5;

display:flex;

gap:60px;

max-width:1250px;

margin:auto;

align-items:flex-start;
}

/* =========================================
   LEFT SIDE
========================================= */

.contact-left{

flex:1;

padding-top:0;
}

.contact-left h1{

font-size:68px;

line-height:1.02;

font-weight:800;

letter-spacing:-2px;

margin-bottom:24px;

color:#0f172a;
}

.contact-left p{

font-size:17px;

line-height:2;

margin-bottom:18px;

color:#475569;

max-width:520px;
}

.contact-left h3{

margin-top:28px;

margin-bottom:10px;

font-size:20px;

font-weight:700;

color:#0f766e;
}

.contact-left h3:first-child{

margin-top:0;
}

/* =========================================
   RIGHT SIDE
========================================= */

.contact-right{

flex:1.2;

padding:38px;

border-radius:32px;

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

backdrop-filter:blur(16px);

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

box-shadow:
0 25px 60px rgba(15,118,110,0.10);
}

/* FORM ROW */

.row{

display:flex;

gap:16px;
}

/* INPUTS */

form input,
form textarea{

width:100%;

padding:15px 18px;

margin-top:16px;

border-radius:16px;

border:
1px solid rgba(15,118,110,0.10);

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

font-size:14px;

outline:none;

transition:0.35s ease;

color:#334155;
}

/* FOCUS EFFECT */

form input:focus,
form textarea:focus{

border-color:#14b8a6;

box-shadow:
0 0 0 4px rgba(20,184,166,0.10);

background:white;
}

/* TEXTAREA */

form textarea{

height:140px;

resize:none;
}

/* BUTTON */

form button{

width:100%;

margin-top:24px;

padding:16px;

border:none;

border-radius:18px;

background:
linear-gradient(
135deg,
#0f766e,
#14b8a6,
#06b6d4
);

color:white;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:0.4s ease;

box-shadow:
0 15px 35px rgba(20,184,166,0.18);
}

form button:hover{

transform:
translateY(-4px);

box-shadow:
0 22px 45px rgba(20,184,166,0.25);
}

/* SUCCESS MESSAGE */

#contactSuccess{

position:relative;

z-index:5;

font-size:15px;

font-weight:600;
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:1000px){

.contact-container{

flex-direction:column;

gap:50px;
}

.contact-left h1{

font-size:52px;
}
}

@media(max-width:768px){

.row{

flex-direction:column;
}

.contact-right{

padding:25px;
}

.contact-left h1{

font-size:42px;
}
}

/* =========================
   LOADER
========================= */

#loader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

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

backdrop-filter:blur(5px);

display:none;

justify-content:center;
align-items:center;
flex-direction:column;

z-index:9999;
}

.spinner{

width:60px;
height:60px;

border:6px solid #d1d5db;

border-top:6px solid #14b8a6;

border-radius:50%;

animation:spin 1s linear infinite;
}

#loader p{

margin-top:15px;

font-size:16px;

font-weight:600;

color:#0f172a;
}

@keyframes spin{

100%{
transform:rotate(360deg);
}

}
/* =========================
   CONTACT PAGE EXTRA MOBILE FIX
========================= */

@media(max-width:992px){

  .contact-container{

    flex-direction:column;

    gap:50px;

    align-items:center;
  }

  .contact-left,
  .contact-right{

    width:100%;
  }

  .contact-left{

    text-align:center;
  }

  .contact-left p{

    max-width:100%;
  }

}

@media(max-width:768px){

  .contact-section{

    padding:110px 20px 80px;
  }

  .contact-left h1{

    font-size:42px;

    line-height:1.2;
  }

  .contact-left p{

    font-size:15px;

    line-height:1.9;
  }

  .contact-right{

    padding:28px 22px;

    border-radius:24px;
  }

  .row{

    flex-direction:column;

    gap:0;
  }

  form input,
  form textarea{

    font-size:15px;
  }

  form button{

    padding:15px;

    font-size:15px;
  }

}

@media(max-width:480px){

  .contact-section{

    padding:100px 18px 70px;
  }

  .contact-left h1{

    font-size:32px;
  }

  .contact-left p{

    font-size:14px;

    line-height:1.8;
  }

  .contact-right{

    padding:24px 18px;
  }

  form input,
  form textarea{

    padding:14px 16px;

    font-size:14px;
  }

  form textarea{

    height:120px;
  }

  form button{

    font-size:14px;

    border-radius:14px;
  }

}