/* =========================
   APPOINTMENT SECTION
========================= */

.appointment-section{
  width:100%;
  padding:100px 0;
  background:linear-gradient(135deg,#f4f9ff 0%,#eef7ff 50%,#ffffff 100%);
  font-family:'Poppins', sans-serif;
  position:relative;
  overflow:hidden;
}

.appointment-shape{
  position:absolute;
  border-radius:50%;
  background:rgba(10,110,245,0.08);
  z-index:0;
}

.shape-one{
  width:260px;
  height:260px;
  top:-90px;
  left:-80px;
}

.shape-two{
  width:360px;
  height:360px;
  right:-130px;
  bottom:-150px;
}

.appointment-container{
  width:90%;
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:55px;
  align-items:center;
  position:relative;
  z-index:1;
}

/* LEFT */

.appointment-tag{
  color:#0a6ef5;
  font-size:14px;
  font-weight:700;
  letter-spacing:3px;
  display:inline-block;
  margin-bottom:18px;
  background:#eaf3ff;
  padding:8px 18px;
  border-radius:40px;
}

.appointment-content h2{
  color:#061b33;
  font-size:46px;
  font-weight:800;
  line-height:1.25;
  margin-bottom:20px;
}

.appointment-content p{
  color:#526b7c;
  font-size:16px;
  line-height:1.9;
  margin-bottom:25px;
}

.appointment-features{
  display:grid;
  gap:12px;
  margin-bottom:30px;
}

.appointment-features div{
  color:#16344d;
  font-size:15px;
  font-weight:500;
}

.appointment-features i{
  color:#0a6ef5;
  margin-right:10px;
}

.appointment-info{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.info-box{
  display:flex;
  align-items:center;
  gap:15px;
  background:#fff;
  padding:20px;
  border-radius:18px;
  box-shadow:0 12px 35px rgba(8,35,60,0.08);
  border:1px solid #edf4fb;
}

.info-box i{
  min-width:55px;
  height:55px;
  background:linear-gradient(135deg,#0a6ef5,#35b6ff);
  color:#fff;
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}

.info-box h4{
  color:#061b33;
  font-size:17px;
  margin:0 0 5px;
}

.info-box p{
  margin:0;
  font-size:14px;
  line-height:1.5;
}

/* FORM */

.appointment-form-box{
  background:rgba(255,255,255,0.92);
  padding:42px;
  border-radius:26px;
  box-shadow:0 25px 70px rgba(8,35,60,0.12);
  border:1px solid #edf4fb;
  position:relative;
}

.form-icon{
  width:66px;
  height:66px;
  border-radius:20px;
  background:linear-gradient(135deg,#0a6ef5,#35b6ff);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:28px;
  margin-bottom:18px;
}

.appointment-form-box h3{
  color:#061b33;
  font-size:30px;
  margin:0 0 8px;
  font-weight:800;
}

.form-text{
  color:#526b7c;
  font-size:15px;
  margin-bottom:25px;
}

.form-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px;
}

.form-group{
  position:relative;
  margin-bottom:16px;
}

.form-group i{
  position:absolute;
  top:50%;
  left:16px;
  transform:translateY(-50%);
  color:#0a6ef5;
  font-size:15px;
  z-index:1;
}

.textarea-group i{
  top:22px;
  transform:none;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:15px 16px 15px 45px;
  border:1px solid #dce9f6;
  border-radius:14px;
  outline:none;
  font-size:14px;
  color:#061b33;
  background:#f9fcff;
  font-family:'Poppins', sans-serif;
  transition:.3s ease;
}

.form-group textarea{
  resize:none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:#0a6ef5;
  background:#fff;
  box-shadow:0 0 0 4px rgba(10,110,245,0.08);
}

.appointment-form-box .appointment-btn{
  width:100%;
  height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  background:#0a6ef5;
  color:#fff;
  border:none;
  border-radius:50px;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:.3s ease;
  margin-top:5px;
}

.appointment-form-box .appointment-btn span{
  width:34px;
  height:34px;
  background:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
}

.appointment-form-box .appointment-btn span i{
  color:#0a6ef5;
  font-size:13px;
}

.appointment-form-box .appointment-btn:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(245,154,47,0.35);
}

/* RESPONSIVE */

@media(max-width:991px){
  .appointment-container{
    grid-template-columns:1fr;
  }

  .appointment-content h2{
    font-size:38px;
  }
}

@media(max-width:768px){
  .appointment-info,
  .form-row{
    grid-template-columns:1fr;
  }
}

@media(max-width:576px){
  .appointment-section{
    padding:70px 0;
  }

  .appointment-content h2{
    font-size:31px;
  }

  .appointment-form-box{
    padding:28px 22px;
  }

  .appointment-form-box h3{
    font-size:25px;
  }
}