*{ margin: 0; padding: 0;}
body{ color: #3b3839; background-color: #f3f3f3; font-size: 16px; font-family: "Inter", sans-serif; letter-spacing: -0.25px;}
.fontPoppins{ font-family: "Poppins", sans-serif;}
h1, h2, h3, h4, h5, h6{ font-family: "Poppins", sans-serif; font-weight: 600;} 
.whtBg{ background-color: #fff;}
.gradientBg{background: #D70A84; color: #fff;
    background: linear-gradient(90deg,rgb(174 1 105) 0%, rgba(81, 18, 127, 1) 100%);}
/* .purpleBg{ background: rgba(81, 18, 127, 1); color: #fff;}
.pinkBg{ background: rgba(215, 10, 132, 1); color: #fff;} */
.purpleBg{ background:#fff; position: relative; overflow: hidden;  }
.pinkBg{ background:#fff; position: relative; overflow: hidden; }
.pinkGraphic{ width: 490px; height: 490px; border-radius: 50%; background:#D70A84; position: absolute; top: -80px; left: -80px;
filter: blur(70px);opacity: 0.25;}
.purpleGraphic{ width: 490px; height: 490px; border-radius: 50%; background:#51127f; position: absolute; bottom: -110px; right: -110px;
filter: blur(70px);opacity: 0.2;}
.pageHeader{ background-color: #fff; position: relative;}
.mobileBanner{ display: none;}
.logobanner{ width: 212px;}
.navbar-toggler:focus, .btn:focus, a:focus{ outline: none !important;  box-shadow: 0 0 0 0;}
nav.navbar{ position: absolute; top: 0; left: 0; right: 0; z-index: 10; width: 100%; padding: 20px 0;}
nav.navbar li a{ color: #fff; font-weight: 500; padding: 8px 20px !important;}
nav.navbar li a:hover, nav.navbar li a:focus{ color: #D70A84;}
nav.navbar li a.btn{ padding: 8px 26px !important; margin-left: 16px;}
nav.navbar li a.btn:hover{ color: #fff;}
.carousel-indicators{position: static; margin-bottom: 0; margin-top: 20px; height: 14px;  overflow: hidden;}
.carousel-indicators [data-bs-target]{ height: 14px; width: 14px; border-radius: 20px; margin-right: 7px;margin-left: 7px; background: #D70A84; border: 0px none;}
.container{ margin: 0 auto; width: 1380px; padding: 0 20px; max-width: 100%;}
footer{background: #ffffff;}
nav.navbar .container{ display: flex; justify-content: space-between; align-items: center;font-family: "Poppins", sans-serif;}
.navbar-collapse{ flex-grow: 0;} 
.btn{ display:inline-flex; gap: 16px; justify-content: center; align-items: center; padding: 12px 32px; border:0px none;  border-radius: 100px; background-color: #D70A84; color: #fff; font-weight: 500; transition: all 0.3s ease; }
.productItemInner ul li span img{display: inline !important;}

.btn:hover{ background-color: #51127F; color: #fff;}
.btn.purpleBtn{background-color: #51127F;}
.btn.purpleBtn:hover{background-color: #D70A84;}
.category-btn span {    display: inline-block;min-width: 80px; line-height: 13px; padding: 9px 15px; background-color: #D70A84; border-radius: 44px; font-weight: 500;    font-size: 12px; letter-spacing: 1px; text-transform: uppercase; text-align: center; color: #fff; }
.secondaryBtn{display:inline-flex; gap: 12px; justify-content: center; align-items: center; padding: 5px 0; text-decoration: none; border:0px none; color: #D70A84; font-weight: 500; transition: all 0.3s ease; }
.secondaryBtn:hover{ color: #D70A84;}
.tertiaryBtn{display:inline-flex; gap: 12px; align-items: center; padding:5px 0 ; border:0px none; border-radius: 5px; border-radius: 100px; text-decoration: none; color: #a1a0a0; font-weight: 500; transition: all 0.3s ease;}
.serviceItem:hover .tertiaryBtn{ color: #D70A84;transition: all 0.3s ease;}
.blogItem:hover .tertiaryBtn{ color: #D70A84;transition: all 0.3s ease;}
.tertiaryBtn img { filter: grayscale(100%); opacity: 0.5; transition: all 0.3s ease;}
.serviceItem:hover .tertiaryBtn img { filter: grayscale(0%); opacity: 1;}
.blogItem:hover .tertiaryBtn img { filter: grayscale(0%); opacity: 1;}
.btn img{ width: 18px; height: auto}
.carousel-control-next, .carousel-control-prev{ width: 80px;}
.bannerData{ position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; padding-top: 65px; color: #fff; display: flex; align-items: center;}
.bannerData .container{ display: flex; justify-content: flex-end; align-items: center;}
.bannerContent{ width: 50%; display: flex; flex-direction: column; gap: 20px;}
.bannerContent h1{ font-weight: 600; font-size: 48px; line-height: 60px;}
.bannerContent .btn{ width: auto;}
.pageSection{ padding: 85px 0;}
.pageSection.noTopSpcae{padding-top: 0;}
h2{ color: #51127F; font-size: 40px; letter-spacing: -1px; font-weight: 600; margin-bottom: 0; }
.subHeading{ font-weight: 400; font-size: 20px; color: #1B1A1A; margin-top: 20px; }
.serviceList{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 45px 0;}
.serviceList .serviceItem{ background-color: #fff; border-radius: 16px; cursor: pointer; position: relative; transition: all 0.3s ease; overflow: hidden; display: flex; }
.serviceList .serviceItem:hover{z-index: 10;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2);}
.serviceImg{ width: 49%;}
.serviceImg img{ width: 100%; height: 100%; object-fit: cover;}
.serviceContent{flex: 1; padding: 26px; display: flex; flex-direction: column; gap: 14px;}
.serviceContent h3{ margin-bottom: 0; font-size: 24px; font-weight: 600; letter-spacing: -1px; color: #1B1A1A; }
.serviceContent:hover h3{ color: #51127F;}
.serviceContent p{ margin-bottom: 0; }
.imgOut{ display: block; overflow: hidden; border-radius: 16px;}
.imgOut img{ width: 100%; height: 100%; object-fit: cover;}
.aboutContent{ display: flex; flex-direction: column; gap: 24px;}
.aboutContent p{ margin-bottom: 10px;}
.verticleCenter{ align-items: center;}
.serviceContent h3, .blogContent h3{ letter-spacing: normal;}
.blogList{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 45px 0;}
.blogList .blogItem{ background-color: #f3f3f3; border-radius: 16px; cursor: pointer; position: relative; transition: all 0.3s ease; overflow: hidden; display: flex; flex-direction: column; }
.blogList .blogItem:hover{z-index: 10; background-color: #fff;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2);}
.blogImg{ width: 100%;}
.blogImg img{ width: 100%; height: 100%; object-fit: cover;}
.blogContent{flex: 1; padding: 26px; display: flex; flex-direction: column; gap: 14px;}
.blogContent h3{ margin-bottom: 0; font-size: 24px; font-weight: 600; letter-spacing: -1px; color: #1B1A1A; }
.blogContent:hover h3{ color: #51127F;}
.blogContent p{ margin-bottom: 0; }
.blogDate{ color: #909090; font-weight: 500; font-size: 15px;margin-top: 5px; }

.takestepOut{ display: flex; justify-content: space-between; align-items: center; gap: 24px;}
.takestepContent{ flex: 1; display: flex; align-items: center;}
.takestepContent h2{ margin-bottom: 0; color: #fff; }
.takestepContent p{ margin-bottom: 0; font-size: 18px; }
.btn-white{ background-color: #fff; color: #111;}
.btn-white:hover{  color: #D70A84;}
.btn-white:hover img{ filter: grayscale(0%); }
.btn-white img{ filter: grayscale(100%); transition: all 0.3s ease; width: 16px; height: auto;}  
.divider{ height: 44px; width: 1px; background-color: #D9D9D9; margin: 0 32px;}
.textWhite{ color: #fff;}
.footerOut{ display: flex; gap: 24px;}
.footerLeft{ width:26%; padding-right: 5px;}
.footerLeft p{  margin: 20px 0 15px;}
.footerRight{ flex: 1;}
footer .footerLink{color: #595455; text-decoration: none; transition: all 0.3s ease; display: block; padding: 5px 0;}
footer .footerLink:hover{ color: #D70A84;}
footer h4{ color: #51127F; font-size: 22px; font-weight: 600; margin-bottom: 20px; letter-spacing: -1px; }
footer ul{ list-style: none; padding: 0; margin: 0; }
footer ul li{ margin-bottom: 8px; display: block; }  
.connectUs{ display: flex; flex-direction: column; gap: 20px; margin-top: 12px; margin-bottom: 12px;} 
#loader {display: none; border: 4px solid #f3f3f3;border-top: 4px solid #D70A84; 
border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite;margin: 10px auto;}
.para{margin-bottom: 10px !important ;}
.float-arrow {
  position: fixed;
  bottom: 75px;  
  right: 25px;   
  width: 45px;
  height: 45px;
  background-color: #51127F;  
  color: white;
  text-align: center;
  line-height: 45px;
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
  text-decoration: none;
  display: none;   
  transition: 0.3s;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  z-index: 999;
}
.float-arrow:hover {
  background-color: #D70A84;
  color: white;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); }}

#responseMessage {
    margin-top: 15px;
}
.mobilecategory {display: none}
.category-all ul li input[type=radio] {
    display: none;
}
.category-all ul li {
    margin: 0 4px;
    transition: .4s ease-in-out;
    padding: 0;
    list-style: none;
}
.category-all {
    text-align: center;
}
.category-all ul li label {
    font-size: 12px;
    line-height: 14px;
    font-weight: 600;
    color: #fff;
    /* background-color: #D70A84; */
    padding: 8px 15px;
    border-radius: 30px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.category-all ul li label, input[type=submit] {
    cursor: pointer;
}
.category-btn span:hover {  background-color: #51127F;}
.footerSocial{ display: flex; gap: 16px;}
.footerSocial a{ display: block; height: 48px; width: 48px; border-radius: 50%; background-color: #eaeaea; display: flex; align-items: center; justify-content: center;}
.footerSocial a img{ width: auto; height: 20px; filter: grayscale(100%); opacity: 0.5; transition: all 0.3s ease;}
.footerSocial a:hover img{ filter: grayscale(0%); opacity: 1;}
.contactNumber{ display: flex; align-items: center; gap: 10px;}
.contactNumber, .contactNumber a{ text-decoration: none; color: #c7c7c7;  }
.iconWrapper{ display: flex; justify-content: center; width: 22px; flex-shrink: 0;}
.contOut{ 
    display: flex;  
    overflow: hidden;
    border-radius: 16px;
    background-color: #fff;
    -webkit-box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2);
    box-shadow: 0 10px 20px 0 rgba(0,0,0,0.2);
}
.contOutInnerLeft{ flex: 1.2; display: flex; justify-content: center; align-items: center; color: #fff; background:linear-gradient(90deg,rgb(174 1 105) 0%, rgba(81, 18, 127, 1) 100%); /*background: url(../images/contact.png) no-repeat left top; background-size: cover;*/}
.contOutInnerLeft .InnData{
     padding: 30px; 
}
.contOutInner{ flex: 1;}
.choosRight{
    display: block;
    border-radius: 12px;
    overflow: hidden;
}
.topPara{
    background:#f3f3f3; padding:20px; border-radius:12px; margin-bottom:28px; color: #51127F; font-size:18px
}
.copyRight{ border-top: 1px solid #D9D9D9; padding: 45px 0;}
.copyRight .container{ display: flex; justify-content: space-between; align-items: center;} 
.policyLinks{ display: flex; gap: 20px;}
.policyLinks a{ text-decoration: none; color: #595455; font-weight: 500;}
.policyLinks a:hover{ color: #D70A84;}
.flexWrapper{
    display: flex;
    gap: 40px;
    align-items: center;
}
.productLeft{
    flex: 1;
    margin-top: 64px;
}
.productRight{
    flex: 1;
    text-align: left;
    color: #fff;
}
.productLeft img{
 max-width: 100%;
}
 #benefits{
   background: #51127f;
} 
.benefitImg{
    background: url(../images/benefit.png) no-repeat -90px top;
   color: #fff; 
   padding-top: 70px;
   padding-bottom: 70px;
   background-size: contain;
}
.benefitsOut{
    padding-left: 47%;
}
.benefitsOut ul{
    margin-bottom: 0;
    padding-left: 22px;
    height: 360px;
    overflow: auto;
}
.benefitsOut ul li{
    margin-bottom: 10px;
}
.benefitsOut ul li b{
    display: block;
}
.benefitsOut ul li:last-child{
    margin-bottom: 0;
}
#benefits h2.prodHeading{
    color: #fff;
}
.proTabWrapper{     
    margin-bottom: 24px; 
    display: flex; 
    justify-content: center;   
    position: sticky; 
    background: #fff; 
    top: 0px; 
    padding: 10px 0;
    z-index: 9;
}
.produtTab{ 
    border-radius: 50px;
    display: flex;
    background: #ffebf7;
    padding: 4px;
    gap: 4px;
}
.produtTab a{
    display: inline-flex;
    padding: 10px 18px;
    border-radius: 30px;
    color: #D70A84;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}
.produtTab a:hover{ 
   /* background-color: #ffd0ec;  */
}
.produtTab a.activeTab{
    background-color: #D70A84;
    color: #fff;
}
.productDetailsWrapper h2.inspectHead{
    color: #51127F; 
    margin-top: 28px;
    margin-bottom: 16px;
}
.descdata {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
}
.descdata b{
    color: #111;
}
.whyWraper{
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.whyboxInn{
    width: calc(50% - 12px); 
    border-radius: 10px;
    border: 1px solid #ddd;
    display: flex; 
    overflow: hidden;
}
.whyboxInn span{
    display: flex;
    padding: 24px;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    font-weight: 700;
    background: #f6eaff;
    color: #51127F;
    width: 100px;
    flex-shrink: 0;
}
.whyboxData{
    padding: 24px;
}
.whyboxData h4{
    font-size: 20px;
    color: #51127F;
}
.prodContent{
    display: flex;
    gap: 70px;
    flex-direction: column;
}
.proKey{
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.proKeyInner{
    display: flex;
    gap: 20px;
    align-items: center;
}
.proKeyPoint{
    display: flex;
    gap: 4px;
    flex-direction: column;
}
.proKeyPoint b{
    font-size: 20px;
    color: #D70A84;
    font-weight: 600;
}
.tikPoint{
    width: 50px;
    height: 50px;
    min-width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #fff;
}
.featuresOut{
    background-color: #f3f3f3;
    border-radius: 14px;
    padding: 50px ;
}
.innerHero .productRight h1{
    text-align: left;
}
.innerHero .productRight h2{
    color: #fff;
    font-size: 24px;
    padding: 20px 0;
}
.innerHero .productRight p{
    margin-bottom: 30px;
}
.productItem{
    margin-top: 45px;
    padding: 45px 40px;
    align-items: center;
    display: flex;
    gap: 20px;
    border-radius: 16px;
    min-height: 589px;
}
.productItemInner{
    flex: 1;
    position: relative;
}
.productItemInner h5{ margin-bottom: 11px;}
.productItemInner h2{
    margin-bottom: 22px;
    text-align: left;
}
.productItemInner p{
    margin-bottom: 20px;
}
.productItemInner ul{
    margin-bottom: 32px;
}
.productImg{
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    padding-right: 10px;
}
.productItemInner ul{
    list-style: none;
    padding: 0; 
}
.productItemInner ul li{
    display: flex; 
    gap: 10px;
    margin-bottom: 6px;
}
.productItemInner ul li:last-child{
    margin-bottom: 0;
}
.productItemInner ul li span:first-child{
    width: 12px;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    height: 20px; 
}
.productItemInner ul li span:first-child img{
    width: 12px;
    height: auto;
}
.innerHero{
    background: url(../images/banner-2.png) no-repeat center center;
    background-size: cover;
    padding: 80px 0;
    position: relative;
}
.innerHero .container{
    position: relative;
    z-index: 2;
}
.opacDiv{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(5px);
    z-index: 1;
}
.innerHero h1{
 margin-top: 64px;
 color: #ffffff;
 text-align: center;
}
.notMarTop{
    margin: 0 !important;
}
.blogWrapper{
    margin: 0 auto;
    width: 900px;
    max-width: 100%;
}
.blogWrapper .blogImg{
    overflow: hidden;
    border-radius: 10px;
    height: 300px;
    object-fit: cover;
}
.blogWrapper .blogContent{
    padding-left: 0px;
    padding-right: 0px;
}
.ourServices h3{
    font-size: 28px;
    color: #D70A84;
    margin-bottom: 20px;
}
.ourServices h4{
    font-size: 18px;
    color: #222;
    margin-bottom: 12px;
    display: flex;
    gap: 12px;
}
.ourServices h4 .points{
    width: 26px;
    height: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #fff; 
}
.featursBox ul{
    padding-left: 56px;
    margin-bottom: 24px;
}
.servCenter{
    width: 900px;
    max-width: 100%;
    margin: 0 auto;
}
.ourServices h4 .points svg{
    width: 15px;
    height: auto;
}
.ourServices{
    display: flex;
    flex-direction: column; 
}
.serviceData{
    background: #fff;
    padding: 30px;
    border-radius: 0 16px 16px 16px;
    border:1px solid #D9D9D9 ;
    border-top:0px none;
}
.serviceData h2{
   font-size: 36px;
   margin-bottom: 20px;
}
p.botSpace{
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: solid 1px #D9D9D9;
}
.mainText{
    margin-bottom: 36px;
    padding-bottom: 36px; 
    border-bottom: solid 1px #D9D9D9;
}
.descdata.mainText{
    padding-top: 20px;
    padding-left: 15%;
    padding-right: 15%;
}
.prodHeading{
    margin-bottom: 26px;
}
.prodHeading span{
    display: block;
    color: #D70A84;
    font-size: 26px;
    padding-top: 10px;
}
.btnWraper{
    display: flex;
    gap: 20px;
    padding-top: 10px;
}
.bigText{
    font-size: 16px;
    color: #222;
    font-weight: 500; 
}
.servicesName{
    display: flex;
    border-bottom:1px solid #D9D9D9 ;
    padding-left: 10px;
    width: calc(100% - 16px);
}
.servicesTab{
    padding: 12px 22px;
    border: 1px solid #f3f3f3;
    border-bottom: 0px none;
    border-radius: 10px 10px 0 0;
    font-weight: 500;
    font-size: 16px;
    margin-bottom: -2px;
    cursor: pointer;
}
.servicesTab.activeTab{
    border: 1px solid #D9D9D9;
    border-bottom: 0px none;
    background: #fff;
    color: #D70A84;
}
.innerFeatures{
    background: #f3f3f3;
    padding: 26px;
    border-radius: 12px;
    margin-bottom: 30px;
}
.innerFeatures .featursBox:last-child ul{
    margin-bottom: 0;
}
.innerP{
    margin: 10px 0 0 ;
}
.careerPoint{ 
    display: block;
    margin-bottom: 20px;
    padding-left: 40px;
}
.contactWrpaper{
    width: 1050px;
    max-width: 100%;
    margin: 0 auto;
}
.contactWrpaper h3{
    font-weight: 400;
    padding-top: 10px;
    margin-bottom: 30px;
}
.formWraper{
    border-radius: 16px;
    flex:1;
    padding: 30px; 
    padding-top: 100px; 
    border-radius: 16px;
}
.formWraper form{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.inputOut{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.inputOut label{
    font-size: 13px;
    font-weight: 500;
}
.myInput{
    padding: 8px 16px;
    border-radius: 8px;
    background-color: #f9f9f9;
    border: 1px solid #dbdbdb;
}
.usecaseWrapper{
    display: grid;
    grid-template-columns: repeat(3, 1fr); gap: 24px;
    gap: 20px;
}
.usecaseWrapperChat{
    display: grid;
    grid-template-columns: repeat(2, 1fr); gap: 24px;
    gap: 20px;
}
.whyChooseUs{
    display: grid;
    grid-template-columns: repeat(2, 1fr); gap: 24px;
}
.whyChooseUs ul li{
   margin-bottom: 10px;
}
.whyChooseUs ul li:last-child{
   margin-bottom: 0;
}
.whyChooseUs ul li b{
  display: block;
  color: #D70A84;
}
.usecaseWrapperInner{
    border: 1px solid #f3f3f3;
    background: #f3f3f3;
    border-radius: 12px;
    padding: 24px 30px;
    display: flex;
    gap: 20px;
}

.bgV-1{
    background: #f6eaff
}
.bgV-2{
    background: #ffebf7
}
.bgV-3{
    background: #efd9ff
}
 
.fontPrice{
    color: #D70A84;
    text-align: center;
    font-weight: bold;
    font-size: 30px;
}

.usecaseWrapperInnerPrice{
    border: 1px solid #f3f3f3;
    background: #f3f3f3;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 20px;
}
.usecaseWrapperInner .count{
    width: 50px;
}
.usecaseWrapperInner .countData{
    flex: 1;
}
.countData .boldText{
    font-weight: 600;
    font-size: 20px;
    color: #D70A84;
    margin-bottom: 5px;
}
#featuresOut,
#whyWorks,
#benefits,
#useCases,
#howItWorks,
#priceplan{
    scroll-margin-top: 100px;
}
#howItWorks{
    background-color: #430d6a;
}
.NoWrap{ 
    white-space: nowrap;
}
.imgWrapper{
    display: block;
    margin-top: 30px;
}
.imgWrapper img{
    display: block;
    max-width: 100%;
}
/* --------------------------------- Annada's code ----------------------------------- */

#priceplan .priceList{list-style: none; padding: 0;}
.priceList li{
  display: flex;
  align-items: center;
  gap: 10px; 
  margin: 12px 0;
}
.priceList .tikPoint{
    min-width: 30px;
    min-height: 30px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center; 
    background-color: #fff;
}
.btn.border-btn{
    background: transparent;
    border: 1px solid #D70A84;
    color:#D70A84
} 
.btn.border-btn:hover{
    border: 1px solid #51127F;
    color:#fff;
    background: #51127F;

}
.countData h4{
    margin: 15px 0 0 ;
}
.benefitsDiv{
    padding: 50px;
    background-color: #51127F;
    border-radius: 14px;
}
.stepDiv{
    padding: 70px 0;
    background-color: #430d6a; 
    border-radius: 14px;
}
.stepDiv .prodHeading {color: #fff;}
.custom-accordion {
  display: flex;
  flex-direction: column;
  gap: 15px; 
}

.accordion-btn {
  width: 100%;
  text-align: left;
  padding: 15px 20px;
  background: #fff;
  border: none;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.accordion-btn:hover,
.accordion-btn:focus {
  background: #f6eaff; 
  outline: none;
}

.accordion-btn.active {
  background: #f6eaff; 
}
.accordion-button:not(.collapsed) {
  color: #D70A84;
  background-color: none;
  box-shadow: none;
}
.accordion-item{
    border-radius: 10px;
    background-color: #51127F;
}
.mobileprodimg{
    display: none;
}
.proLanding {
    text-align: center;
}
.innerHero .productRight.proLanding h1{
   text-align: center; 
}
.innerHero .productRight.proLanding p{
padding-left: 15%;
padding-right: 15%;
}
.centerText{ text-align: center;}
.prodInfoWrapper .container{
    width: 100%;padding: 0;
}
.prodInfo{
    display: flex; 
    min-height: 560px;  
    position: relative;
    margin-top: 15px;
    margin-bottom: 28px;
}
.prodInfoLeft{
    width: 50%;
    padding-right: 230px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}
.prodInfoRight{
    width: 50%;
    text-align: right;
    padding-left: 230px;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 24px;
}
.prodInfoInner{
    border-radius: 14px;
    background:linear-gradient(90deg,#fff 0%, #f3f3f3 100%);
}
.prodInfoRight .prodInfoInner{
    background:linear-gradient(90deg,#f3f3f3 0%, #fff 100%);
}
.prodInfoInner p{
    margin-bottom: 0;
}
.chatbotImg{
     position: absolute; display: flex; justify-content: center; align-items: center;
     width: 100%; height: 100%; 
} 
.chatbotImg video{
    width: 333px;
    border-radius: 16px;
    -webkit-box-shadow: 0 0 20px 5px rgba(0,0,0,0.18);
    box-shadow: 0 0 20px 5px rgba(0,0,0,0.18);
}
.btnWrapper{ text-align: center;}
.prodInfo .whyboxData h4{
    color: #D70A84;
}
.btnWrapper .btn{
    background: #51127F;
}
.btnWrapper .btn:hover{
    background: #D70A84;
}
.howitWrapper{
    display: flex;
    flex-direction: column; 
    width: 900px;
    max-width: 100%;
    margin: 0 auto;
}
.stepDivInner{
    display: flex; 
    gap: 26px;
    position: relative;
    padding-bottom: 35px;
    padding-left: 30px;
}
.stepDivInner:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background: #ed279d;
    
}
.stepDivInner:last-child{
    padding-bottom: 0;
}
.stepCount{
    width: 70px;
    height: 70px;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: wrap;
    background: #D70A84;
    color: #fff;
    border-radius: 50%;
    position: relative;
}
.stepCount:before{
    content: '';
    position: absolute;
    left: -30px;
    top: 50%;
    width: 26px;
    height: 1px;
    background: #ed279d;
    
}
.stepCount span.counts{    
    font-size: 24px;
    font-weight: 600;
    line-height: 22px;
}
.stepCount span{
    display: block;
    width: 100%;
    text-align: center; 
}
.stepData{
    flex: 1;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    position: relative;
}
.stepData h5{
    color: #d70a84;
    margin-bottom: 16px;
}
.stepData::before {
  content: ''; /* Required for pseudo-elements to render */
  position: absolute;
  top: 35px; /* Center vertically */
  left: -11px; /* Position outside the div */
  transform: translateY(-50%); /* Adjust for vertical centering */
  width: 0;
  height: 0;
  border-top: 10px solid transparent; /* Top border of the triangle */
  border-bottom: 10px solid transparent; /* Bottom border of the triangle */
  border-right: 12px solid #fff; /* The visible part of the arrow, matching the div's background */
}
.stepImg{
    display: block;
    border-radius: 10px;
    border: 1px solid #e7e7e7;
    overflow: hidden;
    margin-bottom: 18px;
}
.stepImg img    {
    display: block;
    max-width: 100%;
}


@media (max-width: 1450px) {
    body{
        font-size: 15px;
    }
    a.btn{ font-size: 15px;}
    .container {
        margin: 0 auto; 
        width: 1280px; max-width: 100%;
    }
    .navbar-toggler .menuIcon{
        width: 28px;
    }
    .logobanner{ width: 180px;}
    .bannerContent h1 {
        font-weight: 600;
        font-size: 40px;
        line-height: 50px;
    }
    .btn img {
        width: 16px; 
    }
    .btn-white img{
        width: 14px;
    }
    .bannerContent { 
        gap: 16px;
    }
    .pageSection {
        padding: 75px 0;
    }
    .pageSection.noTopSpcae{padding-top: 0;}
    .innerHero{
      padding: 75px 0;
    }
    h2 { 
        font-size: 34px; 
    }
    .serviceData h2{
        font-size: 28px;
        margin-bottom: 16px;
    }
    .subHeading {
        font-size: 18px;
        margin-top: 15px;
    }
    .serviceContent h3, .blogContent h3 { 
        font-size: 22px;
    }
    .aboutContent { 
        gap: 18px;
    }
    .blogList{
        margin: 40px 0;
    }
    .serviceList {
        margin: 40px 0;
    }
    .productItem{
        margin-top: 40px;
    }
    .takestepContent p { 
        font-size: 16px;
    }
    footer h4{
        font-size: 20px;
    }
    .footerSocial a { 
        height: 40px;
        width: 40px;
    }
    .footerSocial a img { 
        height: 14px;
    }
    nav.navbar li a { 
        padding: 8px 18px !important;
    }
    .carousel-item .container{
        padding: 0 50px;
    }

}

@media (max-width: 1230px) {
    nav.navbar li a { 
        padding: 8px 14px !important;
    } 
    nav.navbar li a.btn {
        padding: 8px 22px !important;
        margin-left: 6px;
    }
    .innerHero .productRight.proLanding p {
        padding-left: 10%;
        padding-right: 10%;
    }
    .bannerContent h1 { 
        font-size: 38px;
        line-height: 48px;
    }
    .logobanner {
        width: 156px;
    }
    h2 {
        font-size: 32px;
    }
    .serviceData h2{
       font-size: 26px;
       margin-bottom: 14px;
    }
    nav.navbar{
        padding: 15px 0;
    }
}
@media (max-width: 992px) {
    nav.navbar {
        padding: 10px 0;
    }
    .chatbotImg video{
    width: 262px;
    height: auto;
    }
    .prodInfo { 
    min-height: 413px;}
    .prodInfoLeft {
        gap: 6px;
        padding-right: 140px;
    }
      .prodInfoRight{
        gap: 6px;
        padding-left: 140px;
    }
    .whyboxData h4 {
    font-size: 18px;
}
    .chatbotImg video{
    border-radius: 12px;
    -webkit-box-shadow: 0 0 15px 5px rgba(0,0,0,0.06);
    box-shadow: 0 0 15px 5px rgba(0,0,0,0.06);
}
    .innerHero .productRight.proLanding p {
        padding-left: 5%;
        padding-right: 5%;
    }
    .navbar-toggler{
        padding: 10px 0;
    }
    .carousel-control-next, .carousel-control-prev {
        width: 50px;
    }
    .carousel-control-prev .carousel-control-prev-icon{
        width: 24px;
    }
    .carousel-control-next .carousel-control-next-icon{
        width: 24px;
    } 
    .takestepOut{
        flex-direction: column;
        gap: 40px;
    } 
    .takestepContent{
        flex-direction: column;
        gap: 14px;
        text-align: center;
    }
    .takestepContent .divider{
        display: none;
    }
    .footerLeft{
        display: none;
    }
    .copyRight .container{
        flex-direction: column;
        gap: 20px;
    }
    .bannerContent{
        width: 100%;
        padding: 0 5%;
    }
    .bannerContent h1 {
        font-size: 32px;
        line-height: 44px;
        margin-bottom: 0;
        text-align: center;
    }
    h2 {
        font-size: 26px;
    }
    .prodHeading span{
        font-size: 22px;
    }
    .featuresOut { 
    padding: 24px;
    }
    .proKeyPoint b {
    font-size: 17px;
    } 
    .usecaseWrapperInner { 
        padding: 22px 24px;
    }
    .countData .boldText { 
        font-size: 17px;
    }
    .usecaseWrapper, .usecaseWrapperChat { 
        gap: 8px;
    }
    .pageSection {
        padding: 65px 0;
    }
    .prodContent { 
    gap: 60px;
    }
    .serviceData h2{
        font-size: 26px;
    }
    .subHeading {
        font-size: 16px;
        margin-top: 12px;
    }
    .serviceList {
        margin: 34px 0;
    }
    .productItem{
        margin-top: 34px;
    }
    .blogList {
        margin: 34px 0;
    }
    .blogList .blogItem, .imgOut, .serviceList .serviceItem, .blogList .blogItem, .productItem{
        border-radius: 12px;
    }
    .blogImg{
        border-radius: 12px;
    }
    .bannerContent p{
        margin-bottom: 10px;
        text-align: center;
        display: -webkit-box; 
        -webkit-box-orient: vertical; 
        -webkit-line-clamp: 3; 
        overflow: hidden; 
        text-overflow: ellipsis; 
    }
    .flexWrapper {
        gap: 16px;
    }
    .bannerBtn{ text-align: center;}
    .bannerBtn.leftBtn{ text-align: left;}
    .serviceList{  
        grid-template-columns: repeat(1, 1fr);  
    }
    .blogList { 
        grid-template-columns: repeat(1, 1fr);
    }
    .navbar-collapse{
        background: #fff;
        padding: 16px 6px;
        margin-top: 5px;
        -webkit-box-shadow: 0 3px 20px 0 rgba(0,0,0,0.15);
        box-shadow: 0 3px 20px 0 rgba(0,0,0,0.15);
    }
    nav.navbar li a.btn {
        padding: 8px 22px !important;
        margin-left: 16px;
        margin-top: 12px;
        color: #fff !important;
    }
    nav.navbar li a{
        color: #111111 !important;
    }
    nav.navbar li a {
        padding: 6px 14px !important;
    }
    nav.navbar .container{
        padding: 0 !important;
    }
    .navbar-toggler{ 
        margin-right: 20px;
    }
    .logobanner{ margin-left: 20px;}
}
@media (max-width:768px) {
.innerHero .flexWrapper{
    flex-direction: column;
}
.prodInfoInner, .prodInfoRight .prodInfoInner{
    background: #fff;
}
.prodInfo {
    min-height: auto;
    flex-direction: column;
    padding-bottom: 444px;
}
    .innerHero .productRight.proLanding p {
        padding-left:0;
        padding-right:0;
    }
.whyboxData {
    padding: 20px;
}
.prodInfoLeft{
    padding-right: 0; width: 100%; margin-bottom: 8px;gap: 8px;
}
.prodInfoRight{
    padding-left: 0;width: 100%;gap: 8px;
    text-align: left;
}
.chatbotImg { 
    top: 8px;
    align-items: flex-end;}
.productLeft.desktopprodimg{
    display: none;
}
.mobileprodimg{
    display: none;
}
.mobileprodimg img{ 
}
.usecaseWrapper, .usecaseWrapperChat {
    grid-template-columns: repeat(2, 1fr);
}
.productLeft {  
    margin-top: 20px;
}
.productRight{
    text-align: center;
}
.productRight h1{
    text-align: center; 
}
.choosRight img{
    width: 100%;
}
.innerHero .productRight h1 {
    text-align: center;
}
.bannerBtn.leftBtn{
    text-align: center;
}
.innerHero .productRight h2 { 
    font-size: 20px;
    padding: 14px 0;
}
.descdata.mainText {
    padding-top: 14px;
    padding-left: 0;
    padding-right: 0;
}
.whyWraper{
    flex-direction: column;
    gap: 20px;
}
.proKey{
       grid-template-columns: repeat(1, 1fr);
}
.whyboxInn {
    width: 100%;
}
.benefitImg{
    background-image:none;
}
.benefitsOut {
    padding-left: 0;
}
.benefitsOut ul{
    overflow: visible;
    height: auto;
}
#benefits h2.prodHeading {
    color: #fff;
    text-align: left;
}
.stepDiv{
    padding: 55px 0;
}
}

@media (max-width:767px) {
    .pageSection {
        padding: 55px 0;
    } 
    .stepDivInner{
        flex-direction: column;
    }
    .stepData {
        padding: 20px;
    }
    .stepCount{
        width: auto;
        height: auto;
        display: inline-flex;
        border-radius:8px;
        gap: 10px;
        margin-bottom: 22px;
        padding: 10px 14px;
    }
    .stepData::before { 
        top: -7px;
        left: 15px; 
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-bottom: 12px solid #fff;
    }
    .stepCount:before{
        display: none;
    }
    .stepDivInner:before { 
        left: 25px;
    }
    .stepCount span {
        display: inline-block;
        width: auto;
        text-align: center;
        align-items: center;
    }
    .stepDivInner { 
        display: block;
    }
    .stepDivInner{
        padding-left: 0;
    }
    .whyChooseUs {
    gap: 20px;
    grid-template-columns: repeat(1, 1fr);
}
    .usecaseWrapper, .usecaseWrapperChat {
        grid-template-columns: repeat(1, 1fr);
    }
    .contOut{
        flex-direction: column;
    }
    .contOutInnerLeft{
        padding: 0;
    }
    .contOutInnerLeft .InnData{
        padding: 0;
        background: #fff;
    }
    .formWraper{
        background:linear-gradient(90deg,rgb(174 1 105) 0%, rgba(81, 18, 127, 1) 100%);
        border-radius: 0;
        color: #fff;
        padding: 30px 24px 30px;
    }
    .connectUs{
        gap: 14px;
        margin-top: 0;
    }
    .pageSection.noTopSpcae{padding-top: 0;}
    .innerHero{
      padding: 55px 0;
    }
    .aboutContent{
        margin-bottom: 40px;
    }
    .aboutContent p{ margin-bottom: 3px;
    }
    h2{
        text-align: center;
    }
    .bannerContent h1 {
        font-size: 26px;
        line-height: 38px;
    }
    .takestepOut {
        flex-direction: column;
        gap: 32px;
        text-align: center;
    }
    .footerRight .row{
        gap: 24px;
    }
    footer ul li {
        margin-bottom: 4px;
        display: block;
    }
    footer h4 { 
        margin-bottom: 10px;
    }
    br{ 
        display: none;
    }
    .bannerData{ 
        position: relative; color: #595455; 
        padding-top: 55px;
    }
    .hero{
        padding-bottom: 55px;
    }
    .mobileBanner {
        display: block;
    }
    .carousel-item img{
        display: none;
    }
    .bannerContent h1 {
        color: #51127F;
    }
    .carousel-item .container{
        padding: 0 20px;
    }
    .carousel-item .btn {
        padding: 10px 20px;
    }
    .blogList {
        margin: 24px 0;
    }
    .serviceList {
        margin: 24px 0;
    }
    .productItem{
        margin-top: 24px;
    }
    .aboutContent{
     align-items: center;
     text-align: center;   
    }
    .productItem {
        flex-direction: column;
        padding: 20px 20px 24px;
        gap: 28px;
    }
    .productItemInner{
        width: 100%;
    }
    .productItemInner h2{
        margin-bottom: 10px;
    }
    .productItemInner ul {
        margin-bottom: 22px;
    }
    .mobilecategory {
        display: block;
        padding-bottom: 15px;
    }
    .category-all {
        display: none;   
    }
    #featuresOut, #whyWorks, #benefits, #useCases, #howItWorks, #priceplan {
    scroll-margin-top: 85px;
}
}

@media (max-width:600px) {
    body{
        font-size: 14px;
    }
    .stepData{
        font-size: 15px;
    }
    .tikPoint {
        width: 22px;
        height: 50px;
        min-width: 22px; 
        background: transparent;
    }
    .flexWrapper {
        gap: 0;
    }
    .serviceList .serviceItem{
        flex-direction: column;
    }
    .serviceImg{
        width: 100%;
    }
    .serviceContent{
        width: 100%;
        padding: 20px;
        gap: 10px;
    }
    .takestepContent {
        flex-direction: column;
        gap: 10px;
    }
    .takestepOut {
        gap: 24px;
    }
    .btn-white img {
        width: 12px;
    }
    .btn img {
        width: 14px;
    }
    .blogContent { 
        padding: 20px;
    }
    .aboutContent {
        margin-bottom: 30px;
    }
    .tertiaryBtn{
        color: #D70A84;
    }
    .tertiaryBtn img {
        filter: grayscale(0%);
        opacity: 1; 
    }
    .subHeading {
        font-size: 14px;
        margin-top: 10px;
        font-weight: 500;
    } 
    h2 {
        font-size: 23px;
    }
    .prodHeading span {
        font-size: 20px;
    }
    .serviceData h2{
       font-size: 22px;
    }
    .bannerContent h1 {
        font-size: 22px;
        line-height: 26px;
    } 
    .serviceContent h3, .blogContent h3 {
        font-size: 18px;
    }
    .bannerContent {
        width: 100%;
        padding: 0px;
    }
    .btn { 
        gap: 10px; 
        font-size: 14px;
        padding: 8px 24px;
    }
    .carousel-item .btn {
        padding: 8px 22px;
        font-size: 14px;
        letter-spacing: -0.5px;
    }
    .bannerContent {
        gap: 12px;
    }
    a.btn {
        font-size: 14px;
    }
    .logobanner {
        width: 115px;
    }
    nav.navbar {
        padding: 5px 0;
    }
    .navbar-toggler .menuIcon {
        width: 22px;
    }
    .navbar-collapse{
        text-align: center;
    }
    nav.navbar li a {
        padding: 8px 14px !important;
    }
    .productItem { 
        gap: 28px;
    }
    nav.navbar li a.btn{ 
        margin-left: 0 !important;
    }
    .mobileprodimg img{ 
        margin-top:20px;
    }
}

@media (max-width:479px) {
.produtTab {
    
    padding:5px;
    gap: 0;
    overflow: auto;
}
.produtTab a { 
    white-space: nowrap;
    padding: 10px 16px;
}
.produtTab a.activeTab {
     
}
.whyboxInn{
    flex-direction: column;
}
.whyboxInn span{
    width: 100%;
    font-size: 32px;
    padding: 16px;
}
.whyboxData{
    text-align: center;
}
.whyboxData p{
    margin-bottom: 0;
}
}

/* For Firefox */
.thin-scrollbar {
  scrollbar-width: thin; /* Use a thinner scrollbar */
  scrollbar-color: #888 #f1f1f1; /* Color of the thumb and track */
}

/* For WebKit browsers (Chrome, Safari, Edge) */
.thin-scrollbar::-webkit-scrollbar {
  width: 8px; /* Set a fixed width for the vertical scrollbar */
  height: 8px; /* Set a fixed height for the horizontal scrollbar */
}

.thin-scrollbar::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color of the scrollbar track */
}

.thin-scrollbar::-webkit-scrollbar-thumb {
  background-color: #888; /* Color of the scrollbar thumb */
  border-radius: 4px; /* Round the corners of the thumb */
}

.locations {
    display: flex;
    flex-direction: column; 
    border-radius: 12px;
    background: #fff;
    padding: 24px 0;
  }
  .location-card {
    padding: 0 24px;
    /* box-shadow: 0 3px 10px rgba(0,0,0,0.06);
    transition: transform 0.2s ease, box-shadow 0.2s ease; */
  }
  /* .location-card:hover { 
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  } */
   .location-card:nth-child(2){
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    padding-top: 12px;
    padding-bottom: 12px;
    margin: 16px 0;
   }
  .location-card h3 {
    font-size: 22px;
    margin-bottom: 8px;
    color: #53127f;
  }
  .location-card p {
    color: #555;
    margin-bottom: 6px;
  }
  .location-card a {
    color: #333;
    text-decoration: none;
  }