:root {
  --primary-green: #4a9b8e;
  --secondary-green: #5fb3a3;
  --light-green: #7bc5b8;
  --accent-teal: #3d7c7c;
  --text-dark: #2c5f5d;
}
body {
  font-family: 'Saira', sans-serif;
}

.form-card {
  border-radius: 20px;
  overflow: hidden;
  width: 400px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  animation: slideUp 0.6s ease-out;
}

.btn-notify {
  background: linear-gradient(
    135deg,
    var(--accent-teal) 0%,
    var(--primary-green) 100%
  );
  border: none;
  border-radius: 25px;
  color: white;
  font-weight: 700;
  text-transform: uppercase;
  width: 100%;
  padding: 0.75rem 1.5rem;
  box-shadow: 0 4px 15px rgba(74, 155, 142, 0.3);
  transition: all 0.3s ease;
}

.btn-notify:hover {
  background: linear-gradient(
    135deg,
    var(--primary-green) 0%,
    var(--accent-teal) 100%
  );
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(74, 155, 142, 0.4);
}

.contact-section {
  /* background: #f0f8f7; */
  padding: 1rem;
  border-radius: 1rem;
  position: relative;
}

.contact-icon {
  width: 20px;
  height: 20px;
}

.doctor-img {
  width: 137px;
  height: 253px;
  position: relative;
  left: 56px;
  bottom: -57px;
}
.custom-txt {
  color: #165a5f;
  font-weight: 600;
}

@media (min-width: 375px) and (max-width: 991px) {
  .doctor-img {
    position: relative;
    width: 134px;
    height: 253px;
    left: 20px;
    bottom: -30px;
  }
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .doctor-img {
    width: 137px;
    height: 225px;
  }
}

/* Animations */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.coming-wrapper {
  background: linear-gradient(to bottom right, #e8f5e8, #d1ece5);
  /* min-height: 100vh; */
  overflow-x: hidden;
min-height: 100vh;}

.logo {
  font-size: 4rem;
  font-weight: bold;
  color: #28a745;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}
.text-title {
  font-size: 20px;
  color: #326661;
  font-weight: bold;
}
.coming-soon {
  font-size: 5rem;
letter-spacing: 0px;
  font-weight: bold;
}
.gradient-text {
   background: linear-gradient(100.36deg, #499167 9.07%, #3CA8CC 99.08%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.form-control {
  border-radius: 30px;
  border: 1px solid #c8c8c8;
  width: 321px;
}
.notify-btn {
  background-color: #1f6064;
  border-radius: 35px;
  padding: 7px 30px;
  font-weight: bold;
  color: white;
  width: 321px;
}
.notify-btn:hover,
.notify-btn:focus,
.notify-btn:active {
  background-color: #1f6064 !important;
  color: white ;
  box-shadow: none; 
}

.custom-info-text {
  color: #165a5f;
  opacity: 0.8;
  font-size: 14px;
  line-height: 21px;
}
.contact-info {
  color: #155724;
}
.vial-image {
  max-width: 200px;
  height: auto;
   position: absolute;
    z-index: 2;
    top: 27%;
    right: 116px;
    height: 329px;
}

.custom-img {
  margin-left: 431px;
}
.info-text {
  color: #28a745;
  opacity: 0.8;
  text-align: center;
}

.custom-img {
  margin-left: 431px;
}

@media (max-width: 991px) and (min-width: 340px) {
  .custom-img {
    margin-left: 27px;
  }
  .title {
    margin-left: 20px;
  }
  .coming-soon {
    /* margin-left: 42px; */
    font-size: 20px;
  }
}

.image-wrapper {
  position: relative;
}

.bg-shape {
  position: absolute;
  z-index: 1;
  right: 0px;
 
}

.left-shape {
   width: 360px;
   top: 20px;
   opacity:55%;
}

.right-shape {
  top:66px;
   width: 310px;
}



@media (max-width: 1023px) and (min-width: 320px) {
  
  .custom-img {
    margin-left: 27px;
     margin-left: 8px;

  }
  .title {
    margin-left: 20px;
  }
  .coming-soon {
    font-size: 42px;
  }
.mobile-vial-image{
  width: 200px;
}

  .left-shape,
  .right-shape {
    display: none;
  }
  .custom-main{
    margin-left: -8px;
  }

}
@media (max-width: 768px) and (min-width: 425px) {
  .custom-img {
    margin-left: 27px;
     margin-left: 47px;

  }
  .title {
    margin-left: 20px;
  }


  .left-shape,
  .right-shape {
    display: none;
  }
  .custom-main{
    margin-left: -8px;
  }

}
@media screen and (min-width:992px) and (max-width:1023px) {
  .vial-image{
    padding: 34px 0px 0px 20px;
  }
}