@media only screen and (max-width:1240px) {
  .container {
    max-width: 100% !important;
    padding-left: 40px;
    padding-right: 40px;
}
.heading-96 {
    font-size: 76px;
}
.heading-64 {
    font-size: 54px;
}
.card-inner .gap-24 {
    gap: 2rem;
}
.text-38 {
    font-size: 28px;
}
.marquee-section {
    padding: 60px 0;
}
.ready-for-b2b , .b2b-difference, .benefits-cards-wrapper{
    padding: 120px 0;
}
.agent-section {
    padding: 120px 0 40px 0;
}
 .heading-56 {
    font-size: 46px;
}
.hero-banner {
    padding: 90px 0 370px 0;
}
.benefit-card-inner {
    padding: 0 40px 60px;
}
.agent-card {
    padding: 15px;
}
.agent-card.agent-card-5 {
    top: 13%;
    left: 1%;
}
.icon-box.icon-box-1-1 {
    top: 11%;
    left: 6%;
}
.icon-box.icon-box-1-3 {
    top: 43%;
    left: 0;
}
.icon-box {
    gap: 12px;
    padding: 15px;
    max-width: 300px;
}
.icon-box br{
    display: none;
}
.icon-box.icon-box-2-1 {
    top: 10%;
    right: 10%;
}
.icon-box.icon-box-2-2 {
    top: 19%;
    left: 5%;
}
.icon-box.icon-box-2-4 {
    top: 51%;
    left: 0%;
}
.icon-box.icon-box-2-3 {
    top: 49%;
    right: 1.5%;
}
.icon-box.icon-box-1-2 {
    top: 18%;
    right: 6.5%;
}
}

@media only screen and (max-width:1024px){
.heading-64 {
    font-size: 48px;
}
.text-20 {
    font-size: 18px;
}
.icon-box p {
    font-size: 14px;
}
.icon-box.icon-box-1-2 {
    top: 18%;
    right: 5.5%;
}
.icon-box {
    max-width: 265px;
}
}

@media only screen and (max-width:991px){
.pr-60px {
    padding-right: 10px;
}
.benefit-card-inner {
    padding: 0 20px 20px;
}
.image-margin-bottom {
    margin-bottom: 30px;
}
.headline-margin-bottom {
    margin-bottom: 20px;
}
.progress-container {
    padding-left: 20px;
    width: 5%;
}
.heading-96 {
    font-size: 48px;
    line-height: 1.2em;
}
.text-16 , .nav-desk li, .cta-btn{
    font-size: 15px;
}
.nav-desk li{
   margin-right: 10px !important;
   margin-left: 10px !important;
}
.heading-64 {
    font-size: 38px;
}
.ready-for-b2b, .b2b-difference, .benefits-cards-wrapper, .key-feature, .use-case-section  {
    padding: 80px 0;
}

.text-128 {
    font-size: 86px;
}
.mt-60px {
    margin-top: 40px;
}
.footer {
    padding: 80px 0 20px 0;
}
.agent-section {
    padding: 80px 0 20px 0;
}
.curve-logo{
    width: 75%;
}
.table-wrap {
    padding-top: 20px;
}
.key-feature-image img, .key-feature-image-5 img, .key-feature-image-5{
    height: auto !important;
}
.text-38 {
    font-size: 24px;
}
.heading-56 {
    font-size: 34px;
}
.feature {
    padding: 100px 20px 45px;
}
.hero-banner {
    padding: 60px 0 345px 0;
}
.cta-btn {
    padding: 8px 30px !important;
}
.footer .gap-10 {
    gap: 0;
}
.mt-80px {
    margin-top: 50px;
}
.footer .text-14{
    margin-bottom: 0;
}
.footer .pt-8 {
    padding-top: 20px;
}
.footer .mt-8{
    margin-top: 20px;
}

}

@media only screen and (max-width:880px){
.icon-box {
    max-width: 230px;
    padding: 12px;
    gap: 10px;
    align-items: flex-start;
}
.icon-box.icon-box-1-3 {
    top: 57%;
    left: 0;
}
.icon-box.icon-box-1-4 {
    top: 75%;
    right: 0%;
}
.icon-box.icon-box-1-2 {
    top: 34%;
    right: -0.5%;
}
.icon-box.icon-box-1-1 {
    top: 7%;
    left: 6%;
}
.icon-box.icon-box-2-1 {
    top: 8%;
    right: 7%;
}
.icon-box.icon-box-2-2 {
    top: 17%;
    left: 0%;
}
.icon-box.icon-box-2-4 {
    top: 67%;
    left: 0%;
}
.icon-box.icon-box-2-3 {
    top: 43%;
    right: 0;
}
.agent-card {
    width: 260px;
}
.agent-card.rolebase-agent-card-1 {
    top: -10%;
    right: 31%;
}
.agent-card.rolebase-agent-card-6 {
    top: 9%;
    left: 0%;
}
.agent-card.rolebase-agent-card-2 {
    top: 9%;
    right: 0%;
}
.agent-card.rolebase-agent-card-4 {
    bottom: 8%;
    left: 31%;
}
.agent-card.rolebase-agent-card-5 {
    bottom: 28%;
    left: 0%;
}
.agent-card.rolebase-agent-card-3 {
    bottom: 28%;
    right: 0%;
}
.agent-card.agent-card-1 {
    top: -10%;
    left: 31%;
}
.agent-card.agent-card-5 {
    top: 9%;
    left: 0%;
}
.agent-card.agent-card-2 {
    top: 9%;
    right: 0%;
}
.agent-card.agent-card-4 {
    bottom: 27%;
    left: 0%;
}
.agent-card.agent-card-3 {
    bottom: 27%;
    right: 0%;
}
.agent-card.execution-agent-card-3 {
    bottom: 8%;
    left: 31%;
}
.agent-card.execution-agent-card-4 {
    bottom: 28%;
    left: 0%;
}
.agent-card.execution-agent-card-2 {
    bottom: 28%;
    right: 0%;
}
.agent-card.execution-agent-card-5 {
    top: 9%;
    left: 0%;
}
.agent-card.execution-agent-card-1 {
    top: -5%;
    right: 4%;
}
.card-inner .text-16 {
    font-size: 14px;
    margin-bottom: 0;
}
.card-inner .px-4 {
    padding-left: 1rem;
    padding-right: 0rem;
}
.card-inner {
    top: 60px;
    margin-top: 50px;
}

}

@media only screen and (max-width: 767px) {
            .responsive-table thead {
                display: none; 
            }
            .responsive-table tbody,
            .responsive-table tr,
            .responsive-table td {
                display: block;
                width: 100%;
            }
            .responsive-table tr {
                margin-bottom: 1.5rem;
                border: 1px solid #e5e7eb; 
                border-radius: 0.5rem;
                overflow: hidden;
                box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            }
            .responsive-table td {
                text-align: right;
                padding-left: 40%; 
                position: relative;
                border-bottom: 1px solid #e5e7eb; 
            }
            .responsive-table td:last-child {
                border-bottom: 0;
            }
 .responsive-table td:before {
                content: attr(data-label);
                position: absolute;
                left: 0;
                width: 45%;
                padding-left: 1rem;
                padding-right: 1rem;
                font-weight: 600;
                text-align: left;
                color: #4b5563; 
            }
            /* First column (Feature) becomes the card header */
            .responsive-table td.feature-cell {
                text-align: left;
                padding-left: 1rem;
                padding-top: 1rem;
                padding-bottom: 1rem;
                background-color: #f9fafb; 
                font-size: 1rem;
                font-weight: 700;
                color: #111827; 
                border-bottom: 1px solid #e5e7eb;
            }
            .responsive-table td.feature-cell:before {
                content: "";
            }
.svg-radial-red, .svg-radial-blue{
display: none;
}
.agent-card {
    width: 100%;
    position: relative !important;
    bottom: unset !important;
    top: unset !important;
    left: unset !important;
    right: unset !important;
    margin-bottom: 20px;
}
.tab-content {
    display: block !important;
    position: relative !important;
}
.tab-content.hidden{
    display: none !important;
}
.center-content {
    margin-bottom: 40px;
}
.tab-buttons {
    margin-bottom: 40px;
}
.agent-section {
    padding: 80px 0 80px 0;
}
.feature{
    border: none;
     padding: 30px 0 0;
}
.feature-section{
    padding: 80px 0;
}
.icon-box {
    max-width: 100%;
    width: 100%;
    padding: 20px;
    gap: 15px;
    position: relative !important;
    left: unset !important;
    right: unset !important;
    top: unset !important;
    bottom: unset !important;
    margin-top: 20px ;
    align-items: center;
}
.tabs-menu {
    flex-wrap: nowrap !important;
    white-space: nowrap;
    overflow: scroll;
    width: 100%;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
    padding-bottom: 20px;
}
.triagle-tabs-button {
    overflow: scroll;
    width: 100%;
}
.triangle-tab-section {
    padding-top: 10px;
}

.text-38 br{
    display: none;
}
.table-logo-content {
    padding: 20px !important;
    text-align: left !important;
}
.table-logo-content .flex{
justify-content: flex-start;
}
/* mobile menu 8888888888888888888888*/
.hidden#mobile-menu {
  transform: translateX(100%);
}
button#mobile-menu-button {
    position: relative;
    z-index: 100;
}
.mobile-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 75%;
    background: white;
    z-index: 99;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    box-shadow: 2px -4px 15px 0px rgba(0, 0, 0, 0.05), -2px 4px 15px -1px rgba(0, 0, 0, 0.05);
    padding: 100px 30px;
}

.mobile-menu.active {
  transform: translateX(0);
}
.round-b-corner {
    border-radius: 12px;
}
.benefit-card-inner {
    padding: 20px 20px 20px;
     --top-offset: 0px !important;
}
.benefits-cards-container {
    padding-left: 0;
    padding-top: 30px;
    overflow: unset !important;
}
.benefit-card {
    height: auto;
    position: sticky;
    top: 20px;
    margin-bottom: 20px;
}

}

@media only screen and (max-width: 575px){
    .ready-for-b2b, .b2b-difference, .benefits-cards-wrapper, .key-feature, .agent-section,
    .feature-section, .use-case-section , .marquee-section     {
    padding: 40px 0;
}
.container {
    max-width: 100% !important;
    padding-left: 25px;
    padding-right: 25px;
}
.footer {
    padding: 40px 0 20px 0;
}
.mt-80px {
    margin-top: 30px;
}
.footer .gap-8 {
    gap: 0;
}
.footer .heading-56 {
    margin-bottom: 0;
}
.mb-40px {
    margin-bottom: 30px !important;
}
.hero-banner {
    padding: 40px 0 20px 0;
}
/* .feature-grid{
    margin-top: 30px;
} */
.agent-section .tab-buttons {
    margin-bottom: 30px;
    white-space: nowrap;
    overflow-x: scroll;
    /* justify-content: flex-start; */
}
.card-inner {
    top: 30px;
    margin-top: 30px;
    padding-top: 0 !important;
}
.card-inner .gap-24 {
    gap: 20px;
}
.key-feature-card {
    padding: 20px;
}
.key-feature-img {
    padding: 7px !important;
}
.text-20 {
    font-size: 16px;
}
.text-38{
    font-size: 22px;
}
.card-inner .text-38 {

    margin-bottom: 15px;
}
.card-inner .text-20 {
    font-size: 14px;
    margin-bottom: 10px;
}
.card-inner .px-4 {
    padding-left: 6px;
    padding-right: 0rem;
}
.card-inner .mt-10px{
    margin-top: 8px;
}
img.icon-li {
    width: 22px;
    height: 22px;
}
.view-more.cta-btn{
    margin-bottom: 0;
}
.heading-64 {
    font-size: 28px;
    margin-bottom: 20px;
}
.heading-96 {
    font-size: 33px;
    margin-bottom: 20px;
}
.mt-60px {
    margin-top: 30px;
}
.cta-btn {
    margin-bottom: 20px !important;
}
.curve-logo {
    width: 100%;
}
.text-128 {
    font-size: 42px;
    padding-left: 10px;
    padding-right: 0;
}
.dashboard-media{
    background-color: #fff !important;
    padding-bottom: 40px;
}
.dashboard-media .-mt-72 {
    margin-top: 0;
}
.heading-56 {
    font-size: 28px;
}
.card-inner .text-16 {
    font-size: 12px;
    margin-bottom: 0;
}
.feature{
    padding: 0px 0 0;
}
.mb-md-0 {
    margin-bottom: 0;
}
.mobile-menu {
    width: 90%;
    padding: 100px 20px 100px 10px;
}



}

@media only screen and (max-width: 499px){
.agent-section .tab-buttons {
    justify-content: flex-start !important;
} 

}