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

body{
  background:#000;
}

/* ===== MAIN SECTION ===== */
.contact-section{
  min-height:100vh;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:120px 80px;
  position:relative;
  background:url("https://www.shutterstock.com/image-photo/morning-meditation-beautiful-calm-woman-600nw-2530343447.jpg") center/cover no-repeat;
}

/* ===== OVERLAY ===== */
.overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to right,
    rgba(0,0,0,0.75),
    rgba(0,0,0,0.45)
  );
  z-index:0;
}

/* ===== LEFT CONTENT ===== */
.contact-info{
  width:45%;
  color:#fff;
  position:relative;
  z-index:1;
}

.contact-info h1{
  font-size:52px;
  font-weight:700;
  margin-bottom:30px;
  line-height:1.2;
}

.contact-info p{
  font-size:15px;
  margin-bottom:18px;
  color:#e0e0e0;
  line-height:1.7;
}

.social span{
  font-size:30px;
  margin-right:14px;
}

/* ===== FORM ===== */
.contact-form{
  width:45%;
  background:rgba(255,255,255,0.95);
  padding:35px;
  border-radius:10px;
  position:relative;
  z-index:1;
}

.contact-form label{
  font-size:14px;
  font-weight:500;
  margin:15px 0 6px;
  display:block;
}

.contact-form input,
.contact-form textarea,
.contact-form select{
  width:100%;
  padding:12px;
  border:1px solid #bbb;
  outline:none;
  font-size:14px;
}

.name-row{
  display:flex;
  gap:15px;
}

textarea{
  height:120px;
  resize:none;
}

/* ===== BUTTON ===== */
.contact-form button{
  width:100%;
  margin-top:25px;
  padding:14px;
  border:none;
  background:linear-gradient(45deg,#4caf50,#ffd84d);
  font-size:16px;
  cursor:pointer;
  transition:0.3s;
}

.contact-form button:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 25px rgba(0,0,0,0.3);
}

/* ===== ANIMATIONS ===== */
.animate-left{
  animation:slideLeft 1.2s ease forwards;
}

.animate-right{
  animation:slideRight 1.2s ease forwards;
}

@keyframes slideLeft{
  from{opacity:0; transform:translateX(-60px);}
  to{opacity:1; transform:translateX(0);}
}

@keyframes slideRight{
  from{opacity:0; transform:translateX(60px);}
  to{opacity:1; transform:translateX(0);}
}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .contact-section{
    flex-direction:column;
    padding:100px 20px;
  }

  .contact-info,
  .contact-form{
    width:100%;
  }

  .contact-form{
    margin-top:40px;
  }
}