html {
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

body {
  overflow-x: hidden;
  font-family: 'Futura PT', 'Futura', 'Arial', sans-serif;
  font-family: var(--body-font);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);;
  color: var(--body-font-color);
  padding: 0;
  line-height: 1.9em;
  word-spacing: 0px;
}




    .banner-btn{
      background: red;
    padding: 10px 20px;
    color: #fff;
    border-radius: 7px;
    font-size: 17px;
    }


    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes float {

      0%,
      100% {
        transform: translateY(0px);
      }

      50% {
        transform: translateY(-20px);
      }
    }

    @keyframes pulse {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.5;
      }
    }

    @keyframes slideInFromRight {
      from {
        opacity: 0;
        transform: translateX(20px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes slideInFromLeft {
      from {
        opacity: 0;
        transform: translateX(-20px);
      }

      to {
        opacity: 1;
        transform: translateX(0);
      }
    }

    @keyframes shimmer {
      0% {
        background-position: -1000px 0;
      }

      100% {
        background-position: 1000px 0;
      }
    }

    @keyframes bounce {

      0%,
      100% {
        transform: translateY(0);
      }

      50% {
        transform: translateY(-10px);
      }
    }

    @keyframes rotate {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    .animate-fade-in-up {
      animation: fadeInUp 0.8s ease-out forwards;
    }

    .animate-float {
      animation: float 3s ease-in-out infinite;
    }

    .animate-pulse-slow {
      animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    }

    .animate-bounce-slow {
      animation: bounce 2s ease-in-out infinite;
    }

    .animate-shimmer {
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      background-size: 1000px 100%;
      animation: shimmer 2s infinite;
    }

    .message-slide-in-right {
      animation: slideInFromRight 0.5s ease-out forwards;
    }

    .message-slide-in-left {
      animation: slideInFromLeft 0.5s ease-out forwards;
    }

    .gradient-bg {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    }

    .gradient-text {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .card-hover {
      transition: all 0.3s ease;
    }

    .card-hover:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    }

    .btn-primary {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      transition: all 0.3s ease;
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    }

    .focus-outline:focus-visible {
      outline: 2px solid #667eea;
      outline-offset: 2px;
    }

    .typing-indicator {
      display: inline-flex;
      gap: 4px;
    }

    .typing-dot {
      width: 8px;
      height: 8px;
      background-color: #9ca3af;
      border-radius: 50%;
      animation: typing 1.4s infinite;
    }

    .typing-dot:nth-child(2) {
      animation-delay: 0.2s;
    }

    .typing-dot:nth-child(3) {
      animation-delay: 0.4s;
    }

    @keyframes typing {

      0%,
      60%,
      100% {
        transform: translateY(0);
        opacity: 0.7;
      }

      30% {
        transform: translateY(-10px);
        opacity: 1;
      }
    }

    .platform-transition {
      transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .slider-container {
      position: relative;
      overflow: hidden;
    }

    .slider-slide {
      display: none;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .slider-slide.active {
      display: block;
      opacity: 1;
    }

    .slider-indicator {
      transition: all 0.3s ease;
    }

    .slider-indicator.active {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      transform: scale(1.2);
    }

    .conversation-gallery-container {
      position: relative;
      overflow: hidden;
    }

    .conversation-slide {
      display: none;
      opacity: 0;
      transition: opacity 0.5s ease-in-out;
    }

    .conversation-slide.active {
      display: block;
      opacity: 1;
    }

    .conversation-indicator {
      transition: all 0.3s ease;
    }

    .conversation-indicator.active {
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      transform: scale(1.2);
    }

    .icon-hover {
      transition: all 0.3s ease;
    }

    .icon-hover:hover {
      transform: scale(1.1) rotate(5deg);
    }

    @media print {
      section[style*="page-break-before"] {
        page-break-before: always;
      }
    } 


/* Chat Agent */

h1,h2,h3,h4,h5,h5{
  font-family: "Jost", sans-serif;
}
p{
  font-family: "Jost", sans-serif;
}
ul li{
  font-family: "Jost", sans-serif;
}
a{
  font-family: "Jost", sans-serif;
}

.jost-<uniquifier> {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}


/* Small Laptop */
@media (max-width: 1199px) {
  /* styles below 1200px */
}

/* Tablet */
@media (max-width: 991px) {
  /* tablet styles */

  .banner-section {
    height: 30%;
    padding-top: 20px !important;
  }


.banner-section .list-banner span{
  font-size: 13px!important;
}

  .banner-section .flex {
    display: block;
    #margin-bottom: 20px;
        #margin-top: 20px;
}

 .banner-section h1{
font-size: 23px!important;
margin-bottom: 5px!important;
}

.banner-section a{margin-right: 10px;font-size: 10px!important;}

.banner-right-content .right-conent{
      margin-top: -308px !important;
        right: -145% !important;
}

.ready-to-transform-right .list-chat-white h4, .banner-right-content .list-chat-white h4 {
  font-size: 10px!important;
}
.ready-to-transform-right .list-chat-white h4, .banner-right-content .list-chat-white p{
  font-size: 9px!important;
}

.client-details h3{font-size: 13px!important}
.client-details p{font-size: 11px!important}
.title-h3{font-size: 24px!important}
.performance-highlights-content h3{
  font-size: 40px!important;
  margin-bottom: -20px!important;
}

.Features-section .tab-select .nav-link h4{font-size: 13px !important;}
.Features-section .tab-select .nav-link p {
    font-size: 8px!important;
}
.powerful-fea-section h3{padding: 6px 25px!important;font-size: 12px!important}
.powerful-fea-section .tab-content-second{
  margin-top: -174px!important;
}
.work-content .work-content-des h4{font-size: 15px!important;}
.work-content .work-content-des p{font-size: 13px!important}
.work-content .work-content-des ul li{
  line-height: 20px!important;
    color: #F59933;
    font-size: 9px!important;
}
.customer-exp-section h3{
  font-size: 22px!important;
    line-height: 36px!important;
}
.customer-exp-section p{font-size: 9px!important;padding-bottom: 1px!important;
    padding-top: 1px!important; line-height: 12px!important}
.customer-exp-section a.text-lg {
  font-size: 10px!important;
  line-height: 12px!important;
}

.work-content .work-content-des ul li i{
  padding: 2px 3px!important;
    font-size: 6px!important;
}
.analytics-sec h3{
  padding: 11px 26px!important;
  font-size: 15px!important;
}
.banner-right-content .left-content {
    margin-left: 89%!important;
    margin-top: -60%!important;
}
.ready-to-transform-right .list-chat-white.mb-20, .ready-to-transform-right .list-chat-ay.mb-10{margin-bottom: 20px!important;}
.ready-to-transform-right .list-chat-ay h4, .banner-right-content .list-chat-ay h4 {font-size: 11px!important}
.ready-to-transform-right .list-chat-ay h4, .banner-right-content .list-chat-ay p{ font-size: 6px !important;line-height: 9px !important; }

.banner-right-content .right-conent .mb-150, .banner-right-content .left-content .mb-100{
  margin-bottom: 30px;
}

.banner-right-content {
      margin-top: 20px!important;
}

.banner-section p{
  font-size: 12px!important;
  margin-bottom: 11px!important;
}

.whatsapp-ag-feature-sec p{
  font-size: 10px!important;
}
.whatsapp-ag-feature-sec .sub-key-feature h4
{
  font-size: 9px !important;
        margin-bottom: 5px !important;
}

.whatsapp-ag-feature-sec .sub-key-feature{
  padding: 11px!important;
  height: 41%!important;
  margin-top:11px!important;
}
.whatsapp-ag-feature-sec .sub-key-feature p{
  font-size: 8px!important;
}

.whatsapp-agent-section h1{
  font-size: 19px;
          margin-bottom: 10px;
    text-align: left;
}

.whatsapp-agent-section a, .customer-exp-section a{
  margin-right: 8px!important;
    font-size: 10px;
    line-height: 11px;
}

.whatsapp-agent-section p{
  font-size: 10px;
    text-align: left;
    margin-bottom: 10px;
}

.whatsapp-ag-work-sec .work-content .work-content-des h4 {
        font-size: 14px !important;
    }

}

/* Mobile */
@media (max-width: 767px) {
  /* mobile styles */

.banner-section .list-banner span i{
  padding: 1px!important;
  font-size: 6px!important;
}

.banner-section .list-banner{
    top: -20px !important;
        position: relative;
}

  .powerful-fea-section .tab-content-second{
    width: 37%!important;
    float: right;
    margin-top: -115px!important;
  }

.work-content{
  margin-bottom: 20px;
}

  .powerful-fea-section h3
{
  margin-left: 1%!important;
    padding: 9px!important;
}

.banner-section{
  height: 24%!important;
  padding-top: 10px!important;

}

.banner-section .top-banner-text{
  padding: 5px 10px;
}

.banner-section h1{
font-size: 15px!important;
margin-bottom: 5px!important;
}

.customer-exp-section h3{
  font-size: 21px!important;
    line-height: 28px!important;
}
.customer-exp-section p{
  font-size: 10px!important;
}
.ready-to-transform-right .list-chat-white{
  margin-top: 20px!important;
}

.banner-section p{
  font-size: 6px!important;
  margin-bottom: 5px!important;
}

.banner-section .mb-8{
  margin-bottom: 3px!important;
}

.whatsapp-agent-section a {
 font-size: 10px !important;
        padding: 10px !important;
        line-height: 10px;
}

.whatsapp-agent-section h1 {font-size: 22px!important;}


.banner-section .list-banner span{
  font-size: 7px!important;
}

.banner-section .flex, .customer-exp-section .flex {
    display: block;
    line-height: 10px;
}
.banner-section a, .customer-exp-section a{
  font-size: 8px !important;
        padding: 6px 7px !important;
        margin-right: 5px!important;
}
.pt-20{
  padding-top: 10px!important;
}
.mb-20 {
  margin-bottom: 20px!important;
}

.mb-10{
  margin-bottom: 20px!important;
}

.performance-highlights-content {
  padding: 20px!important;
}

.performance-highlights-content h3{
  padding: 1px!important;
}

.Features-section .tab-select .nav-link{
  font-size: 18px!important;
}

.banner-right-content{
  display: none;
}

.border-right-1{
  border-right: none!important;
  border-block: 1px solid #ddd!important;
}

.analytics-sec-img-2{
  width: 58%!important;
    left: -21%!important; 
    top: -110px!important;
}

.analytics-sec-img-1{
  width: 99%!important;
    right: -6%!important;
}

.analytics-sec h3{
  font-size: 18px!important;
margin-left: 10%!important;
  padding: 6px 21px!important;
  top: 9px!important;
}

.language-ai-sec-img-2 .img-ai-1{
  width: 26%!important;
  top: 20px!important;
}

.language-ai-sec-img-2 .img-ai-2{
  top: -123px!important;
    width: 76%!important;
    right: -89px!important;
    left: 91px !important;
}

.performance-highlights-content p{margin-top: 19px!important}

}

.chat-agent-bg{
  background-image: url("../images/banner-bg.webp");
  background-size: cover;        /* cover full area */
  background-position: center;   /* center image */
  background-repeat: no-repeat;
}

 

.client-details {
  background: linear-gradient(135deg, #7354AF 0%, #6876DF 100%);
  padding: 20px 20px;
}

.client-details h3
{
  color: #fff;
  font-size: 24px;
  margin-top: 20px;
   font-family: "Jost", sans-serif;
}
.client-details p{
  color: #fff;
  margin-top: 10px;
   font-family: "Jost", sans-serif;
}

.client-details .client-logo img{
  width: 100%;
  height: 90px;
  object-fit: contain;
}

.performance-highlights {
  background: #FFFFFF;
  padding: 30px 30px;
}
.border-right-1 {

  border-right: 1px solid #ddd;
}

.title-h3{
  color: #4DAC74; 
  font-size: 32px;
  font-weight: 500;
    
}
.performance-highlights-content h3{
  font-size: 55px;
    font-weight: bold;
    color: #F59933;
    padding: 20px;
     font-family: "Jost", sans-serif;
}

.performance-highlights-content p{
  color: #626262;
   font-family: "Jost", sans-serif;
}


/fonts/
  FuturaPT-Light.woff2
  FuturaPT-Regular.woff2
  FuturaPT-Medium.woff2
  FuturaPT-Bold.woff2


  @font-face {
  font-family: 'Futura PT';
  src: url('../fonts/FuturaPT-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'Futura PT';
  src: url('../fonts/FuturaPT-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Futura PT';
  src: url('../fonts/FuturaPT-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'Futura PT';
  src: url('../fonts/FuturaPT-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}


.Features-section {
  background: #F4F5FF80;
  padding: 30px 30px;
}

.works-section {
  background: #FFFFFF;
  padding: 30px 30px;
}

.work-content{
  border-radius: 15px;
}

.work-content .work-content-img img{
   border-top-left-radius: 15px;
   border-top-right-radius: 15px;
}
.work-content .work-content-des {
  padding: 20px;
    background: #F9FAFF;
}
.work-content .work-content-des h4{
  padding-bottom: 20px;
    font-size: 24px;
    font-weight: 500;
    color: #7354AF;
}

.work-content .work-content-des p{
  padding-bottom: 10px;
  color: #626262;
}

.work-content .work-content-des ul li{
  line-height: 35px;
  color: #F59933;
}

.work-content .work-content-des ul li i{
  border: 1px solid #7354AF;
   padding: 3px 4px;
    font-size: 10px;
    border-radius: 40px;
    color: #7354AF;
}

.customer-exp-section {
  background: #F9FAFF;
  padding: 30px 30px;
}

.customer-exp-section h3{
     color: #4DAC74;
    font-size: 38px;
    line-height: 53px;
    font-weight: bold;
    font-family: 'Futura PT', sans-serif !important;
}
.customer-exp-section p{ 
  color: #626262;
  padding-bottom: 10px;
  padding-top: 10px;

}

.btn-primary-purple {
  background: linear-gradient(135deg, #7354AF 10%, #6876DF 90%);
}

.border-radius-6 {
  border-radius: 6px;
}
.font-16{
  font-size: 16px;
}

.font-23 {
  font-size: 23px;
}

.mb-100 {
  margin-bottom: 100px;
}

.mb-150 {
  margin-bottom: 150px;
}

 .Features-section .tab-select .nav-link.active {
  text-align: left;
    color: #ffffff;
    background: linear-gradient(135deg, #7354AF 10%, #6876DF 90%);
 }

 .tab-content .tab-content-inner{
  padding-left: 20px;
 }

 .powerful-fea-section .tab-content-second{
  width: 25%;
    float: right;
    margin-top: -268px;
    z-index: 000;
    position: relative;
 }

 .Features-section .tab-select .nav-link
 {
  text-align: left;
    color: #A2A2A2;
    padding: 20px;
    font-size: 20px;
    border-radius: 8px;
 }

  .Features-section .tab-select .nav-link h4{
    font-weight: 400;
    margin-bottom: 8px; 
  }

  .Features-section .tab-select .nav-link p{
    font-size: 14px;
  }



.bg-purple-color{
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

.ready-to-transform-right {
      background: #fff;
    padding: 20px;
    border-radius: 10px;
}

.ready-to-transform-right img{
  width: 180px;
}

.ready-to-transform-right .list-chat-ay, .banner-right-content .list-chat-ay {
  background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
  padding: 10px;
  border-radius: 6px;
}

.banner-right-content {
  margin-top: 120px;
    position: absolute;
}

.banner-right-content .left-content {
  margin-left: -20px;
  margin-top: -30px;
}

.banner-right-content .right-conent{
  margin-top: -120px;
    position: relative;
    right: -163px;
}

.ready-to-transform-right .list-chat-ay h4, .banner-right-content .list-chat-ay h4{
  color: #fff;
  font-size: 18px ;
      font-weight: 500;
      padding-bottom: 10px;
}

.ready-to-transform-right .list-chat-ay p, .banner-right-content .list-chat-ay p{
  line-height: 19px;
  font-size: 15px;
  color: #fff;
}

.ready-to-transform-right .list-chat-white, .banner-right-content .list-chat-white {
  background: #fff;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 6px;
}

.ready-to-transform-right .list-chat-white h4, .banner-right-content .list-chat-white h4{
 color: #6974DC!important;
  font-size: 18px ;
      font-weight: 500;
      padding-bottom: 10px;
}

.ready-to-transform-right .list-chat-white p, .banner-right-content .list-chat-white p{
  color: #787878;
  font-size: 15px;
}

.powerful-fea-section h3{
  padding: 20px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    margin: 0;
    display: inline-block;
    border-radius: 8px;
    margin-left: 58%;
    z-index: 999;
    position: relative;
}

 .top-banner-text {
  padding: 9px 20px;
    color: #fff;
    font-size: 15px;
    text-align: center;
    margin: 0;
    display: inline-block;
    z-index: 999;
    position: relative;
    border-radius: 50px;
}



.circle-2 {
  width: 36% !important;
    height: 50%;
    top: 19px;
    z-index: -11;
    right: -103px !important;
}

.circle-1 {
  width: 21% !important;
    height: 29%;
    bottom: 128px;
    z-index: -11;
    right: 477px !important;
    background-color: #EBEDFF!important;

}

.analytics-sec-img-1 {
  width: 70%;
    right: -40%;
    position: relative;
}

.analytics-sec-img-2 {
  width: 50%; 
    left: 10%;
    position: relative;
    top: -210px;
}

.analytics-sec h3{
  padding: 15px 33px;
    color: #fff;
    font-size: 20px;
    text-align: center;
    margin: 0;
    display: inline-block;
    border-radius: 8px;
    margin-left: 51%;
    z-index: 999;
    position: relative;
    top: 30px;
}

.analytics-sec .circle-2 {
    width: 16% !important;
    height: 21%;
    top: 40px;
    z-index: -11;
    right: -28px !important;
    background-color: #EBEDFF !important;
}

.language-ai-sec-img .img-ai-1 {
      width: 89%;
    z-index: 9;
    position: relative;
}

.language-ai-sec-img-2 .img-ai-1 {
  width: 30%;
    left: 8%;
    position: relative;
    top: -85px;
}

.language-ai-sec-img-2 .img-ai-2{
  position: relative;
    top: -65px;
    left: -110px;
}

.language-ai-sec .circle-1 {
    width: 21% !important;
    height: 37%;
    bottom: 73px;
    z-index: -11;
    right: 399px !important;
    background-color: #EBEDFF !important;
}

.language-ai-sec .circle-2{
  width: 13% !important;
    height: 21%;
    top: 71px;
    z-index: -11;
    left: 57% !important;
}
.banner-section .flex-col{
  flex-direction: row;
}

.whatsapp-ag-work-sec {
  padding: 20px;
}
.whatsapp-ag-work-sec .title-h3, .whatsapp-ag-feature-sec .title-h3 {
  font-size: 28px;
  margin-bottom: 20px!important;
}
.whatsapp-ag-work-sec .work-content-des {
    padding: 20px;
    background: #F9FAFF;
}

.whatsapp-ag-work-sec .work-content-des h4{
  padding-bottom: 20px;
    font-size: 24px;
    font-weight: 500;
    color: #F59933;
}

.whatsapp-ag-feature-sec {
  background: #F9FAFF;
    padding: 30px 30px;
}

.whatsapp-ag-feature-sec .sub-key-feature{
  padding: 20px;
    background: #fff;
    margin-top: 20px;
    height: 42%;
     border-radius: 10px;
}

.whatsapp-ag-feature-sec .sub-key-feature h4{
  color: #7354AF;
  font-size: 22px;
  margin-bottom: 10px;
  font-weight: 500;
}

.whatsapp-ag-feature-sec .right-content-whatsapp .image-1 img{
  padding: 20px;
}

.whatsapp-ag-feature-sec .right-content-whatsapp .image-2 img{
 width: 37%;
    margin-top: -67%;
    position: relative;
}

.whatsapp-ag-feature-sec .image-box-fade img{
 position: absolute;
    width: 5%;
    top: -16px;
    right: 51%;
}

.banner-section h1{
  font-size: 40px;
}

.banner-section h1 span{
   background: linear-gradient(90deg, #7354AF, #6876DF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.banner-section p span{
   background: linear-gradient(90deg, #7354AF, #6876DF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.whatsapp-agent-section a, .customer-exp-section a{
  margin-right: 20px;
}

.banner-section {
  padding-top: 50px;
}

.banner-section a{
  margin-right: 15px;
}

.banner-section .list-banner {
  padding-top: 15px;
}

.banner-section .list-banner span i{
      color: #6d66c8;
    padding: 2px 3px;
    border: 2px solid #6d68cb;
    border-radius: 10px;
    font-size: 13px;
}

.banner-section .list-banner span{
  color: #6d66c8;
  font-size: 20px;
  font-weight: 500;
  font-family: "Jost", sans-serif;

}

.border-purple-600 {
    --tw-border-opacity: 1;
    border-color: #7354AF!important;
}

.text-purple-600 {
    /* --tw-text-opacity: 1; */
    color: #7354AF!important;
}