.ehr-hero-section {
  background: url("https://practiceehr.com/hubfs/Assets_WebP_2025/New%20Design/bg1-1.png") top / auto no-repeat;
  padding-top: 48px;
  padding-bottom: 60px;
}

.ehr-hero-section .hero-pill{
display: inline-flex;
padding: 8px 20px 8px 15px;
align-items: center;
gap: 11px;
	border-radius: 100px;
background: #DFD9FF;
	margin-bottom:25px;
}
.ehr-hero-section .hero-pill__icon-wrap{
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.ehr-hero-section .hero-pill__icon{
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}
.ehr-hero-section .hero-pill__text{
 color: #6D3CFF !important;
text-align: center;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: 18.75px; /* 133.929% */
}
.ehr-hero-section .hero-pill__text{
  display: inline;
  color: 
#2C2C2C;
  line-height: 1;
}


.ehr-hero-section .Doctime-c1 h1{
  font-size: 38px;
  font-weight: 700;
  color: rgb(44, 44, 44);
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.Doctime-c1-p1 {
  color: #2C2C2C;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
	margin-bottom:23px;
}

.Doctime-c1-span {
  color: #2C2C2C;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.Doctime-c1-p2 {
  margin-bottom: 35px;
  color:
#2C2C2C;
}
.Doctime-c1-cta-btn {
 display: inline-flex;
padding: 10px 20px;
justify-content: center;
align-items: center;
border-radius: 100px;
background: #6D3CFF;
	color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
	text-decoration:none;
}
/* ==================================================
   ✅ Rotating word movement (Dynamic width, no overlap)
   Works with your existing HTML (words-1 + gradient-word)
   ================================================== */
/* container auto-sizes to the LONGEST word */
.ehr-hero-section .Doctime-c1 h1 .words-1{
display: inline-grid;
  grid-template-columns: max-content;
  vertical-align: baseline;
  white-space: nowrap;
  
  transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* stack all words in same grid cell */
.ehr-hero-section .Doctime-c1 h1 .words-1 .gradient-word{
  grid-area: 1 / 1;
  display: inline-block !important; /* ✅ prevents hidden by any old CSS */
  opacity: 0;
  transform: translateY(-30px);
  pointer-events: none;
  white-space: nowrap;
}
/* active word animates */
.ehr-hero-section .Doctime-c1 h1 .words-1 .gradient-word.is-visible{
  opacity: 1;
  animation: rotateWordMove 4s ease-in-out forwards;
}
@keyframes rotateWordMove{
  0%   { opacity: 0; transform: translateY(-30px); }
  15%  { opacity: 1; transform: translateY(0px); }
  75%  { opacity: 1; transform: translateY(0px); }
  100% { opacity: 0; transform: translateY(30px); }
}
/* Gradient clipping (HubSpot inline_text support) */
.ehr-hero-section .Doctime-c1 h1 .gradient-word,
.ehr-hero-section .Doctime-c1 h1 .gradient-word *{
  display: inline-block;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* your gradients */
.gradient-word--purple{
  background-image: linear-gradient(90deg,
#6D3CFF 0%,
#5F3ACE 100%);
}
.gradient-word--blue{
  background-image: linear-gradient(89.84deg,
#2965E7 0.1%,
#2142AC 72.98%);
}
.gradient-word--indigo{
  background-image: linear-gradient(90deg,
#615ED6 28.23%,
#3D3B98 60.54%);
}
/* mobile spacing */
@media (max-width: 576px){
  .Doctime-c1{
    padding-left:12px!important;      
   }
  }
  .ehr-hero-section .Doctime-c1 h1{
    font-size: 28px;
    letter-spacing: -0.3px;
  }
  .ehr-hero-section .Doctime-c1 h1 .words-1{
   margin: 0;

  }

}