:root{
  --bg: #0b1729;
  --bg-2: #0e1e35;
  --orange: #f3872f;
  --orange-dim: #e07924;
  --green: #2fac5b;
  --green-hover: #279a51;
  --text-body: #aebbcd;
  --text-dim: #7f8ea3;
  --white: #ffffff;
  --card: #101e33;
  --ring-track: rgba(255,255,255,0.08);
  --teal: #34d6c4;
  --violet: #8b6bf2;
  --blue: #4aa4ff;
}



.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.errorMessage1 {
  color: #721C24;
}

.hero{
    width: 100%;
    align-items: center;
    padding: 50px 0px;
    background: radial-gradient(120% 140% at 15% 10%, #10203a 0%, var(--bg) 45%, #081120 100%);
    position: relative;

}


.dialer-service-box-image {
    margin-top: 0px;
    width: 244px;
    margin-bottom: 11px;
    padding: 2px 15px;
    border-radius: 100px;

}


.hero-wrap-row {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 40px;
}

.optiml-dialer-hero-imagewrap{
    width: 100%;
    height:auto;
}

.optiml-dialer-hero-imagewrap img{
    width: 100%;
    height:auto;
}
/* ---------- LEFT COLUMN ---------- */

/* Eyebrow, not headline: this label sat at 40px/800 above a 29px H1, so the
   product name outweighed the sentence it introduced and the page's own 30px
   section H2s. Sized as the sibling OptiML pages size their eyebrows
   (uppercase, letter-spaced, 700) so the order reads H1 > H2 > eyebrow. */
.brand{
  
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 18px);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  margin-bottom: 14px;
  color: var(--orange);
}

.headline{
  
  font-weight: 700;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.18;
  color: var(--white);
  letter-spacing: -0.01em;
  margin-bottom: 22px;
  max-width: 620px;
}

.description{
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-body);
  max-width: 540px;
  margin-bottom: 30px;
}

.cta-row{
  display:flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.email-input{
  flex: 1 1 240px;
  min-width: 200px;
  padding: 15px 18px;
  border-radius: 8px;
  border: none;
  outline: none;
  background: var(--white);
  color: #364054;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
}
.email-input::placeholder{ color: #6b7480; }
.email-input:focus-visible{
  box-shadow: 0 0 0 3px rgba(52, 214, 196, 0.5);
}

.btn-demo{
  flex: 0 0 auto;
  padding: 15px 26px;
  border-radius: 8px;
  border: none;
  /* The reference primary CTA on /products/voice-ai and /products/analytics.
     The flat green it replaced was #ffffff on #2fac5b = 2.96:1, which fails AA
     at 15px/700; this gradient is #ffffff on #b15f21 = 4.64:1 and on #c9202e =
     5.63:1, and it matches the orange the hero already uses for the brand line. */
  background: linear-gradient(135deg, #b15f21 0%, #c9202e 100%);
  color: var(--white);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s ease, transform .15s ease;
  white-space: nowrap;
}
.btn-demo:hover{ background: linear-gradient(135deg, #9c521c 0%, #b01c28 100%); transform: translateY(-1px); }
/* No local :focus-visible here - it out-specified the site-wide two-tone ring
   in a11y-fixes.css and left this one button with a single-colour outline. */

.watch-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--orange);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-weight: 600;
  font-size: 14.5px;
}
.watch-link:hover{ color: #ffa257; }
.play-icon{
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.6px solid var(--orange);
  display:flex; align-items:center; justify-content:center;
  flex-shrink: 0;
}
.play-icon svg{ width: 8px; height: 8px; fill: var(--orange); margin-left: 1px; }

/* ---------- RIGHT COLUMN: DEVICE IMAGE ---------- */

.device-wrap{
  display: flex;
  align-items: center;
     justify-content: center;
}

.device-wrap img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
}



.single_dialer_service_single_box {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    transition: .3s;
}

/* The four overview cards were pinned to min-height:250px, which left 77px of
   dead space under the copy at 1440 and 98px at 390, and they had no border or
   shadow to separate white card from the pale band behind them. height:100%
   lets each card fill its Bootstrap column instead, so a row is as tall as its
   own tallest card and no taller. Scoped to this section: the Smart IVR cards
   below already size to their content and are left untouched. */
#serviceOursolutions-1 .single_dialer_service_single_box {
    height: 100%;
    border: 1px solid #094fb72e;
    box-shadow: 0 2px 6px -2px #b7c4d9;
}

.single_dialer_service_img_box{
    
    width: 50px;
    height: 50px;
    background-color: rgba(240, 245, 255, 1);
    border-radius: 10px;
    position: relative;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}


.single_dialer_service_text{
    margin-top: 15px;
}

.single_dialer_service_text h3{
font-size: 18px;
font-weight:700;
}


.single_dialer_service_text p{
font-size: 14px;
font-weight:400;
}

.multiple_dialer_heading_wrap{
    text-align:center;
    padding-bottom: 30px;
}


.multiple_dialer_heading_wrap h2{
     font-size: 40px;
    font-weight: 700;
}




.smart-wrap-heading h2{
    font-size: 40px;
    font-weight: 700;
    padding-bottom: 0px;
    text-align:center;
}


.smartivr-section-wrap{
    padding-top: 60px;
    padding-bottom: 60px;
}



.single_dialer_service_text ul{
    list-style: none;
    padding-left: 0px;
    margin: 0;
    margin-top: 20px;
}
.single_dialer_service_text ul li{
    padding-left: 25px;
    position: relative;
    line-height: 27px;
    font-size: 15px;
    margin-bottom: 10px;
}


.list-style_2{
    list-style: none;
    padding-left: 0px;
    margin: 0;
    margin-top: 20px;
}
.list-style_2 li{
    padding-left: 25px;
    position: relative;
    line-height: 27px;
    font-size: 15px;
    margin-bottom: 10px;
}


.list-style_2 li::before{
    content: "\f621" !important;
    font-family: "FontAwesome";
    position: absolute;
    left: 0px;
    font-size: 12px;
    color: rgba(240, 129, 45, 1);
    line-height: 27px;
}

.single_dialer_service_text ul li::before{
    content: "\f621" !important;
    font-family: "FontAwesome";
    position: absolute;
    left: 0px;
    font-size: 12px;
    color: rgba(240, 129, 45, 1);
    line-height: 27px;
}


.smart_box_1{
    height: auto;
}



.campaign_mangment_section_wrapper{
margin-bottom: 40px;;
}

/* Floating Book a Demo Button */
/* bottom:80px, not 30px: the site-wide scroll-to-top control is 40px tall at
   bottom:20px/right:15px, so at 30px this pill (z-index 9999) covered its top
   half once the page had scrolled. 80px clears it with 20px to spare. */
.floating-demo-btn {
    position: fixed;
    bottom: 80px;
    right: 30px;
    background: linear-gradient(135deg, #b15f21 0%, #c9202e 100%);
    color: #fff;
    padding: 16px 24px;
    border-radius: 50px;
    box-shadow: 0 4px 20px rgba(177, 95, 33, 0.4);
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    z-index: 9999;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.floating-demo-btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(135deg, #9c521c 0%, #b01c28 100%);
    box-shadow: 0 6px 25px rgba(177, 95, 33, 0.5);
    color: #fff;
    text-decoration: none;
}

.floating-demo-btn::before {
    content: '';
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}


.campaign_mangment_wrap{
    padding: 10px;
}

.campaign_mangment_wrap img{
width: 100%;
}



.call-recording-wrap h2{
    text-align:center;
    font-size:40px;
    font-weight:700;
}


.call-recording-wrap p{
    text-align:center;
    font-size:16px;
    font-weight:400;
}


.single_quality_service_single_box {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    transition: .3s;
    min-height: 120px;
    text-align: center;

}




.single_quality_service_single_box h3{
    font-size: 16px;
}


.single_quality_service_single_box .single_service_single_box_img_title{
    display:flex;
    align-items: center;
    width:100%;
    justify-content:center;
}


.Monitoring_box_inner_one{

    background-color:rgba(237, 240, 249, 1);
    padding: 20px;
    border-radius: 10px;
}



.single_aipowered_service_single_box {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    transition: .3s;
    min-height: 140px;
    text-align: center;

}




.single_aipowered_service_single_box h3{
    font-size: 16px;
}


.single_aipowered_service_single_box .single_service_single_box_img_title{
    display:flex;
    align-items: center;
    width:100%;
    justify-content:center;
}



.enterprise_mangment_section{
    background-color: rgba(244, 229, 216, 1);
    padding-top: 40px;
    padding-bottom: 40px;
    border-radius: 10px;
    padding-left: 20px;
    padding-right: 20px;
}


.Optiml-dialer-wrap{
    padding-top: 60px;
    padding-bottom: 60px;
}

.Optiml-dialer-wrap h2{
    text-align:center;
    font-size:40px;
    font-weight:700;
    margin-bottom:0px!important;
}


.dialer-box-row{
    padding-top: 40px;
    padding-bottom:40px;
}

.dialer-box{
    border: 1px solid #eee;
    padding: 16px;
    margin-bottom: 20px;
    min-height: 170px;
}

.dialer-box h3{
    font-size: 16px;
    font-weight:700;
}

.dialer-box p{
    font-size: 14px;
    font-weight:400;
}



.industries-box-row{
    padding-top: 40px;
    padding-bottom:40px;
}
.industries-box{
    border: 1px solid #eee;
    padding: 16px;
    margin-bottom: 20px;
    text-align:center;

}

.industries-box h3{
    font-size: 16px;
    font-weight:700;
    text-align:center;
    
}

.industries-box p{
    font-size: 14px;
    font-weight:400;
}


.ai-powered-dialer-wrap{
    width: 100%;
    align-items: center;
    padding: 50px 0px;
    background: radial-gradient(120% 140% at 15% 10%, #10203a 0%, var(--bg) 45%, #081120 100%);
    position: relative;
}

.ai-powered-dialer-wrap-heading h2{
    text-align:center;
    font-size:40px;
    font-weight:700;
    margin-bottom:20px;
    color: #fff;
}

.ai-powered-dialer-wrap-heading p{
    text-align:center;
    font-size:16px;
    font-weight:400;
    color: rgba(148, 163, 184, 1);
}


.wrap-cta {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 20px;
    margin-top: 20px;
}

.bookpersonialzed-demo{
    background-color: rgba(22, 166, 74, 1);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    text-decoration:none;
}

.bookpersonialzed-demo:hover{
   color:#fff;
   text-decoration:none;
}

.watch-overview{
   border: 1px solid rgba(255, 255, 255, 1);
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 700;
    font-size: 16px;
    gap: 20px;
    text-decoration:none;
 

}   

.watch-overview:hover{
    color:#fff;
    text-decoration:none;
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:767px){
    .hero-wrap-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 25px;
}

.cta-row {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;

}


.smart-wrap-heading h2 {
    font-size: 26px;
    font-weight: 700;
    padding-bottom: 0px;
    text-align: center;
}

.multiple_dialer_heading_wrap h2 {
    font-size: 26px;
    font-weight: 700;
}

.single_service_frame.QMS-inner-page
    .single_service_box_inner
    .single_service_box_two_sub_heading {
    max-width: 100%;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
    margin-bottom: 20px;
}


.call-recording-wrap h2 {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
}


.Optiml-dialer-wrap h2 {
    text-align: center;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 0px!important;
}


.Optiml-dialer-wrap {
    padding-top: 20px;
    padding-bottom: 20px;
}


.dialer-box-row {
    padding-top: 20px;
    padding-bottom: 20px;
}




.ai-powered-dialer-wrap-heading h2{
    font-size:26px;

}

.ai-powered-dialer-wrap-heading p{
    font-size:14px;

}

.wrap-cta {
    display: flex;
    width: 100%;
    gap: 16px;
    margin-top: 20px;
    flex-direction: column;
    padding: 10px 20px;
    text-align:center;
}

} /* end @media(max-width:767px) */



/* The four "our solutions" sections were renamed to unique ids (serviceOursolutions-1..4)
   to remove duplicate IDs. style.css styles the original id with a gradient background;
   this restores that background for the renamed sections. */
section[id^="serviceOursolutions-"] {
  background-image: linear-gradient(
    to right top,
    #f2ddb1,
    #e9e0b1,
    #dee3b2,
    #d3e6b6,
    #c7e9bc
  );
}