main.kaloop {
    --white80: rgba(255, 255, 255, 0.8);
    --Gray110: rgba(110, 110, 110, 0.8);
    --Gray114: rgba(114, 144, 114, 0.8);
    --Gray69: rgba(69, 69, 69, 0.8);
    --primary: #3687f2;
    --dblack: #1e1e1e;
    --dblack80: rgba(30, 30, 30, 0.8);
    --skyLight: #dfecfd;
 }

 main.kaloop p {
    line-height: 1.3;
    font-size: 16px !important;
    color: var(--Gray69) !important;
 }

 main.kaloop .text-white p {
    color: var(--white80) !important;
 }

 main.kaloop .color-white > p {
    color: var(--white80) !important;
 }

 main.kaloop .bg-primary {
    background-color: var(--primary) !important;
 }

 main.kaloop h1,
 main.kaloop h2 {
    line-height: 1.1;
 }

 main.kaloop h2 {
    font-weight: 600;
    font-size: 44px;
 }

 .banner-v2 .banner-text-hub {
    & > .sub-content {
       margin: 0 0 10px;
       font-weight: 500;
    }
    p {
       opacity: unset;
    }
 }

 .fs-28 {
    font-size: 28px !important;
 }

 .banner-text-hub > p {
    max-width: 475px;
 }

 .grow-unset .site-btn {
    flex-grow: unset;
    justify-content: start;
 }

 main.kaloop .site-btn {
    padding-left: 30px;
    padding-right: 30px;
 }

 .k-inline-list.m {
    ul {
       margin: 0;
    }
 }

 .k-inline-list ul {
    padding: 0;
    display: flex;
    align-items: start;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 5px;
    color: var(--white80);
    margin-top: 35px;
    & li {
       display: flex;
       align-items: center;
       gap: 7px;
    }
    & li::before {
       content: "";
       background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.25 2.25L6.25 10.25C6 10.5 5.6875 10.625 5.375 10.625C5.0625 10.625 4.71875 10.5 4.5 10.25L0.5 6.25C0 5.75 0 4.96875 0.5 4.46875C0.96875 4 1.75 4 2.25 4.46875L5.375 7.59375L12.5 0.46875C12.9688 0 13.75 0 14.25 0.46875C14.75 0.96875 14.75 1.75 14.25 2.25Z' fill='white'/%3E%3C/svg%3E%0A");
       background-size: 100% 100%;
       width: 16px;
       height: 16px;
    }
 }

 main.kaloop .banner-v2 {
    padding: 120px 0 0;
 }

 main.kaloop .avtar-v2 {
    flex-shrink: 0;
 }

 main.kaloop .k-static-card {
    flex-direction: unset;
    justify-content: unset;
    gap: 16px;
    &.flex-strech {
       display: flex;
       height: 100%;
       flex-direction: column;
       justify-content: space-between;
       gap: 20px;
    }
    .avtar-v2 {
       min-width: unset;
       i {
          font-size: 30px;
       }
    }
    &.flex {
       display: flex;
       align-items: center;
    }
 }

 .static-card > .text.font-16 h4 {
    font-size: 16px;
 }

 .static-card > .text.h-space h4 {
    margin-top: 20px;
 }

 .static-card > .text.h-space-small h4 {
    margin-top: 10px;
 }

 .k-appel-sec {
    background-image: linear-gradient(90deg, #3687f2 0%, var(--primary) 100%);
    padding: 30px 32px;
    border-radius: 12px;
    margin-top: 30px;
    h2 {
       font-size: 28px !important;
       font-weight: 600;
    }
    p {
       max-width: 710px;
       font-size: 20px;
       color: var(--white80);
       margin-top: 5px;
       line-height: 1.3;
    }
 }

 .btn-black-white {
    background-color: white;
    color: black;
    border-color: transparent;
    &:hover {
       color: white;
       border-color: var(--black);
       background-color: transparent;
    }
    &::before {
       background-color: var(--black);
    }
 }

 main.kaloop .sales-page .wrapper {
    max-width: 1170px;
 }

 .sales-page .k-title {
    flex-wrap: wrap;
    gap: 20px;
    h2 {
       font-size: 44px;
    }
    p {
       font-size: 16px;
    }

    .subtitle {
       margin: 0 0 10px;
    }
 }

 @media (min-width: 1200px) {
    main.kaloop .section-1-v2 .inner-wrapper .col-xl-3 {
       width: 27%;
    }

    .sec-col-49 .col-lg-6 {
       flex: 0 0 auto;
       width: 48%;
    }
 }

 .text-cards-sec .k-static-card-2 {
    padding: 20px 150px 20px 20px;
    position: relative;
    h5 {
       color: var(--Gray110);
       font-size: 18px;
       font-weight: 400;
       margin-top: 5px;
    }
    p {
       margin-top: 8px;
    }

    img {
       position: absolute;
       width: auto;
       max-width: 155px;
       top: 0;
       right: 5px;
       height: 100%;
       object-fit: cover;
    }
 }

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

 .stand-alone-btn {
    margin-top: 50px;
 }

 main.kaloop .two-column-content .k-content p {
    font-size: 15px !important;
    color: #656565 !important;
 }

 .k-content {
    &:not(:last-child) {
       margin-bottom: 20px;
    }
    h4 {
       font-weight: 600;
       margin-bottom: 5px;
    }
 }

 .badge-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 26px;
    span {
       background-color: #e0e8fc;
       display: inline-flex;
       align-items: center;
       gap: 12px;
       border-radius: 100px;
       padding: 7px 18px;
       font-size: 20px;
       font-weight: 500;
       color: var(--black);
       i {
          font-size: 17px;
          width: 16px;
          color: var(--primary);
       }
    }
 }

 footer .footer-pages .tittle p {
    font-size: 20px !important;
    color: white !important;
 }

 .mw-545 {
    max-width: 545px;
 }

 main.kaloop .subtitle {
    margin-bottom: 6px;
    &.fs-28 {
       line-height: 1.1;
    }

    &.font-20 {
       font-size: 20px;
    }
 }

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

 main .k-appel-sec .content.p-small p {
    font-size: 16px !important;
 }

 /* hao page  */
 @media (min-width: 1200px) {
    .multi-rows-sec .col-xl-6 {
       flex: 0 0 auto;
       width: 46%;
    }
    .multi-rows-sec .col-10 {
       width: 49%;
    }
 }

 .orderd-list {
    --dimantion: 8px;
    li {
       padding-left: 17px;
       position: relative;

       &:not(:last-child) {
          margin-bottom: 3px;
       }

       &::before {
          content: "";
          background-color: #3687f2;
          border-radius: 50%;
          width: var(--dimantion);
          height: var(--dimantion);
          position: absolute;
          top: 0;
          left: 0;
          bottom: 0;
          margin: auto;
       }
    }
 }

 .big-info-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
    font-weight: 600;
    background-color: #dfecfd;
    i {
       color: var(--primary);
    }
 }

 .info-alert.light-v2 {
    background-color: #dfecfd;
    box-shadow: 0px 4px 30px 0px rgba(30, 30, 30, 0.06);
    border-radius: 12px;
 }

 .light-card-info .info-alert {
    background-color: #f0f7ff !important;
 }

 .multi-rows-sec .two-column-content h2 {
    font-size: 44px;
 }

 .multi-rows-sec .two-column-content h4 {
    font-size: 20px;
 }

 .mt-40 {
    margin-top: 35px;
 }

 .multi-rows-sec .inner-row-wrapper {
    display: flex;
    flex-direction: column;
    gap: 50px;
 }

 .multi-rows-sec .inner-row-wrapper > div:nth-child(even) {
    flex-direction: row-reverse;
 }

 /* manigiment table */

 .section-top h2 {
    margin-bottom: 15px;
 }

 .section-title {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
 }

 .section-subtitle {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin: 0;
 }

 .support-badge {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.24);
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-size: 20px;
    font-weight: 600;
    display: inline-block;
    white-space: nowrap;
 }

 .table-wrapper {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
 }

 .custom-table {
    margin: 0;
    color: #252849;
    font-weight: 500;
    font-size: 16px;
 }

 .custom-table thead {
    background-color: #ebedf0;
 }

 .custom-table th {
    padding: 18px 22px;
    border: none;
    font-weight: 500;
    white-space: nowrap;
 }

 .custom-table td {
    padding: 14px 22px;
    border-top: 1px solid #e0e0e0;
    white-space: nowrap;
 }

 .custom-table tbody tr:last-child td {
    border-bottom: none;
 }

 .table-wrapper {
    margin-top: 50px;
 }

 .abs-cards-sec-v2 .abs-center-content-2 > img {
    max-width: 365px;
 }

 .mw-p-unset,
 .mw-p-unset p {
    max-width: unset !important;
 }

 .k-appel-sec .content > p {
    font-size: 20px !important;
 }

 .k-appel-sec .content.mw-p-unset p {
    margin-top: 8px;
    font-size: 20px !important;
 }

 .counter-reset {
    counter-reset: counting;
 }

 .k-counter-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: #dfecfd;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    color: #3687f2;
    h4 {
       counter-increment: counting;
       font-size: 32px;
       font-weight: 600;
       &::before {
          content: counter(counting);
       }
    }
    &.v2 {
       width: 70px;
       height: 70px;
       flex-direction: column;
       h4 {
          line-height: 1;
       }
       span {
          color: var(--dblack);
          font-size: 14px;
       }
    }
 }

 .text h5 {
    margin-bottom: 5px;
 }

 .k-stat-card {
    height: 100%;
    .title-card {
       display: flex;
       align-items: center;
       gap: 20px;
       h4 {
          font-weight: 600;
       }
    }
    .static-body > p {
       margin: 10px 0 20px;
    }
    .k-content h4 {
       font-size: 18px;
    }
 }

 .k-icon-list ul {
    padding: 0;
    li {
       font-size: 16px !important;
       display: flex;
       align-items: center;
       gap: 10px;
       color: var(--Gray69);
       i {
          color: var(--primary);
          font-size: 18px;
       }
       &:not(:last-child) {
          margin-bottom: 15px;
       }
    }
 }

 .k-icon-list.color-dblack-80 ul li {
    color: var(--dblack80);
 }

 .k-icon-list.gap-24 ul li {
    gap: 24px;
 }

 .k-icon-list.small-space ul li:not(:last-child) {
    margin-bottom: 10px;
 }

 .avatar-small {
    --dim: 50px;
    width: var(--dim);
    height: var(--dim);
    min-width: var(--dim);
 }

 .k-static-card .text > h5 {
    margin-bottom: 5px;
 }

 .k-small-card .static-card {
    padding: 34px 10px;
    h4 {
       font-size: 16px;
    }
 }

 .h2-small h2 {
    font-size: 43px !important;
 }

 main.kaloop .abs-cards-wrapper .abs-center-content img {
    width: auto;
    height: auto;
    max-width: 400px;
    max-height: 100%;
 }

 .large-gap {
    row-gap: 170px !important;
 }

 .medium-gap {
    row-gap: 120px !important;
 }

 .abs-cards-sec .large-gap .bg-card {
    padding: 22px;
 }

 @media (min-width: 1200px) {
    .abs-cards-sec .large-gap .col-lg-5 {
       width: 39%;
    }
 }

 .k-flex-card {
    display: flex;
    align-items: center;
    padding: 20px;
    gap: 10px;
    h4 {
       margin: 0 0 8px;
    }
 }

 .k-sky-bg {
    background: #dfecfd !important;
 }

 main.kaloop section.faq-sec-v2 .accordion-button::after {
    background-position: center center;
 }

 main.kaloop section.faq-sec .accordion-item {
    background: unset;
    padding: 0 20px;
 }

 .phone {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    .inner-wrapper-cont {
       display: flex;
       gap: 10px;
       align-items: center;
       h3 {
          font-size: 20px;
          font-weight: 600;
          color: #1e1e1e;
          margin: 0;
       }
    }
    .color-primary i {
       color: var(--primary) !important;
    }
 }

 /* header style  */

 .main-header .navbar-nav {
    gap: 24px;
 }

 main.kaloop .main-header .nav-item {
    & > a {
       padding-left: 0;
    }
    .dropdown-menu {
       left: -1px;
    }
    &:hover {
       .dropdown-menu {
          top: 35px;
       }
    }
 }

 main.kaloop .main-header .nav-item.active > a {
    color: white;
 }
 main.kaloop .main-header .nav-item.active a {
    border-bottom: 2px solid white;
    font-weight: 600;

    &::after {
       border-width: 2px;
    }
 }

 main.kaloop .main-header .dropdown-menu {
    padding: 8px 0;
    gap: 0;
    min-width: 190px;
    border-radius: 0 8px 8px 8px;
    li {
       border: unset;
       padding: 0;
       a {
          padding: 8px 17px;
          font-weight: 400 !important;
          &.active {
             font-weight: 600 !important;
             background-color: rgba(54, 135, 242, 0.1);
             color: var(--dblack);
          }
          &:hover {
             background-color: rgba(54, 135, 242, 0.1);
             color: var(--dblack);
          }
       }
    }
 }

 .content-sec-v2 .text.h-style h5 {
    color: #1e1e1e;
    margin: 20px 0 20px;
 }

 .k-price-card {
    position: relative;
    h4 {
       font-size: 24px;
       font-weight: 600;
       color: var(--dblack);
    }
    .head-card {
       display: flex;
       align-items: center;
       gap: 20px;
       margin-bottom: 15px;
       i {
          font-size: 27px;
       }
    }

    .k-icon-list ul li {
       gap: 20px;
    }
    .body-card h4 {
       margin: 15px 0;
       span {
          color: var(--Gray69);
          font-size: 16px;
          font-weight: 400;
       }
    }

    .card-foot {
       margin-top: 20px;
    }
 }

 .pop-badge {
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    margin: auto;
    width: max-content;
    height: max-content;
    border-radius: 70px;
    padding: 8px 14px;
    color: var(--dblack);
    background-color: var(--skyLight);
    font-size: 16px;
 }

 .color-gray69 {
    color: var(--Gray69) !important;
 }

 .plan-list {
    margin-top: 35px;
    & > div.d-flex:not(:last-child) {
       margin-bottom: 20px;
    }

    .avtar-v2 i {
       font-size: 28px;
    }

    &.small-space {
       margin-top: 15px;
    }

    &.small-space > div.d-flex:not(:last-child) {
       margin-bottom: 15px;
    }
 }

 .k-price-card-v2 {
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    height: 100%;
    transition: 0.3s all ease;
    &:hover {
       transform: translateY(-3px) scale(1.02);
    }
    .avtar-v2 i {
       font-size: 28px;
    }
    .title-card {
       justify-content: space-between;
       align-items: center;
       display: flex;
       margin-bottom: 15px;
    }

    .title-card h5 {
       font-size: 16px;
       font-weight: 400;
       color: var(--Gray69);
       strong {
          color: rgb(30, 30, 30, 0.7);
          font-size: 20px;
       }
    }

    .text-2 {
       h4 {
          font-weight: 600;
          font-size: 20px;
          color: var(--dblack);
       }
       p {
          margin: 10px 0;
       }
    }

    .foot-card a {
       color: var(--primary);
       font-size: 20px;
    }
 }

 .k-price-card-v2.active {
    background-color: var(--primary);
    .avtar-v2 {
       background-color: white;
    }
    .text h5,
    .text-2 p,
    .text h5 strong {
       color: rgba(255, 255, 255, 0.8) !important;
    }

    .foot-card a,
    .text-2 h4 {
       color: white;
    }
 }

 .max-w-315 img {
    max-width: 315px !important;
 }

 .abs-cards-wrapper.align-center .text-card {
    align-items: center;
    height: 100%;
 }

 .dif-card {
    padding: 20px;
    .head-card {
       display: flex;
       align-items: center;
       gap: 12px;
       margin-bottom: 15px;
    }
    .body-card {
       display: flex;
       flex-direction: column;
       span {
          display: flex;
          align-items: center;
          gap: 10px;
          color: var(--Gray69);
          background-color: var(--skyLight);
       }
       span i {
          color: var(--primary);
          font-size: 18px;
       }
    }
    &.red {
       .avtar-v2 {
          color: #f05642;
          background-color: #fdeeec;
       }
       h4 {
          font-size: 20px;
          font-weight: 500;
          color: var(--dblack);
       }
       .body-card span {
          background-color: #fdeeec;
          i {
             color: #f05642;
          }
       }
    }

    &.small {
       .head-card h4 {
          font-size: 20px;
       }
    }
 }

 .margin-p p {
    margin-top: 5px;
 }

 .dblack-text {
    color: var(--dblack) !important;
 }

 .fw-medium {
    font-weight: 500 !important;
    opacity: 1;
 }

 .opacity-1 {
    opacity: 1 !important;
 }

 .content-sec-v2 .k-inner-wrapper .static-card {
    padding: 20px;
    height: 100%;
    h4 {
       font-size: 20px;
       font-weight: 600;
       color: var(--dblack);
    }
    p {
       color: var(--Gray69);
       margin: 8px 0 15px;
    }

    a {
       color: var(--primary);
       font-size: 20px;
    }
 }

 .big-font i {
    font-size: 28px;
 }

 .fw-samibold {
    font-weight: 600 !important;
 }

 main.kaloop section .t-white {
    color: white !important;
 }

 .k-price-card.v3 {
    height: 100%;
    h4 {
       font-size: 20px;
    }

    .k-icon-list {
       margin-top: 20px;
       li {
          gap: 5px;
          &:not(:last-child) {
             margin-bottom: 10px;
          }
       }
    }

    .body-card p {
       min-height: 60px;
       line-height: 1.2;
    }

    .body-card.minh-unset p {
       min-height: unset;
    }

    .card-foot {
       border-top: 1px solid #cecece;
       padding-top: 15px;
       span {
          color: var(--dblack80);
       }
    }

    .head-card .text h5 {
       font-size: 18px;
       font-weight: 600;
       color: var(--Gray69);
       margin-top: 5px;
    }

    .inline-check-list ul {
       justify-content: start;
    }
 }

 .font-18 {
    font-size: 18px !important;
 }

 .sky-e-light {
    background-color: #f0f7ff !important;
 }

 .k-text-style-2 p {
    margin-top: 5px;
 }

 .k-text-style-2 h4 {
    font-size: 20px;
 }

 .bg-red {
    background: rgb(240, 86, 66, 0.12) !important;
 }

 .k-inner-title {
    margin-bottom: 35px;
    text-align: center;
    h3 {
       font-size: 28px;
       font-weight: 500;
       color: var(--dblack);
       margin-bottom: 10px;
    }
 }

 .abs-cards-sec-v2 .abs-align-center .text-card {
    align-items: center;
 }

 .k-bottom-text {
    h2 {
       margin-bottom: 10px;
    }
 }

 .k-divider {
    opacity: 1;
    background-color: transparent;
    border-top: 1px solid #8ebfff;
    margin: 0;
    height: unset;
 }

 .dif-card-v2 .body-card > div {
    align-items: first baseline;
    &:not(:last-child) {
       margin-bottom: 15px;
    }
    i {
       color: var(--primary);
    }
    .content h5 {
       margin-bottom: 3px;
    }
 }

 .dif-card-v2.red .body-card > div i {
    color: #f05642;
 }

 .cards-height-100 .static-card {
    height: 100%;
 }

 .k-sml-wrapper {
    max-width: 900px;
    margin: auto;
 }

 .k-flat-btn {
    padding: 0;
    margin: 0;
    outline: unset !important;
    box-shadow: unset !important;
 }

 .k-sml-wrapper .title-inner > h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--dblack);
    margin-bottom: 15px;
 }

 .k-outline-card {
    padding: 9px;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
 }

 .cst-badge-small {
    font-size: 10px;
    color: #252849;
    padding: 4px 10px;
 }

 .left-dropmenu {
    &.btn-group > button {
       padding: 0 5px !important;
    }
    &.btn-group .dropdown-menu {
       right: 0 !important;
       left: auto;
       z-index: 999;
       li {
          font-size: 12px;
       }
    }
 }

 .indcater {
    display: flex;
    align-items: center;
    gap: 5px;
 }

 .k-team-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 13px;
    background-color: #f4f6f9;
    border-radius: 5px;
    border: 2px solid transparent;
    transition: 0.3s all ease;
    cursor: pointer;
    & * {
       transition: 0.3s all ease;
    }
    &:not(:last-child) {
       margin-bottom: 3px;
    }
    .member {
       display: flex;
       align-items: center;
       gap: 6px;
    }

    .member .text {
       display: flex;
       flex-direction: column;
       justify-content: center;
    }

    .member .text h3 {
       font-size: 12px;
       font-weight: 500;
       color: var(--dblack);
    }

    .member .text span {
       color: #585858;
       font-size: 10px;
    }

    .member-img {
       display: flex;
       max-width: 28px;
       aspect-ratio: 1;
    }

    &.active,
    &:hover {
       border: 2px solid var(--primary);
    }

    &.active .member .text,
    &:hover .member .text {
       h3 {
          color: var(--primary);
          font-weight: 700;
       }
       span {
          color: var(--primary);
       }
    }
 }

 .gradient-text {
    background: linear-gradient(270deg, #3687f2 0%, #f05642 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 500;
 }

 .ratio-100 {
    flex-shrink: 0;
    --ratio: 100px;
    img {
       width: var(--ratio);
       height: var(--ratio);
       border-radius: 50%;
    }
 }

 .two-column-content.v2 {
    & > div.d-flex {
       margin-bottom: 20px;
    }
    & > div.d-flex .text {
       display: flex;
       flex-direction: column;
       justify-content: center;
       span {
          color: var(--primary);
          font-weight: 500;
          font-size: 20px;
       }
    }

    .innner-title p {
       margin: 10px 0;
    }
 }

 .circle-list.k-icon-list {
    & > p {
       margin-top: 10px;
    }
    li {
       line-height: 1.2;
    }
    li:not(:last-child) {
       margin-bottom: 5px;
    }
    i {
       font-size: 8px;
    }
 }

 @media (min-width: 1200px) {
    .k-stat-two-col .col-lg-6 {
       width: 47%;
    }
 }

 .k-count-section .inner-wrapper:nth-child(odd) .row {
    flex-direction: row-reverse;
 }

 .k-count-section .inner-wrapper .counts-items {
    top: 35px;
 }

 .k-count-section .inner-wrapper .row {
    align-items: center !important;
    .text {
       max-width: unset;
       min-height: 266px;
    }
    .text h2 {
       max-width: unset;
       font-size: 31px;
       color: var(--dblack);
    }

    .text .subtitle,
    .text p,
    .text .k-icon-list li {
       font-size: 16px;
       color: var(--dblack80) !important;
    }

    .text p {
       margin: 12px 0;
    }

    .text .subtitle {
       margin-bottom: 0;
    }

    .mockup img {
       margin: auto;
    }
 }

 .width-max-content {
    width: max-content;
 }

 .bg-sky-blue {
    background-color: var(--skyLight) !important;
 }

 .k-bg-white {
    background: white !important;
 }

 .lg-padding {
    padding: 30px !important;
 }

 .outline-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 22px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid white;
    border-radius: 75px;
 }

 .primary-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: transparent;
    border-color: var(--primary);
    width: max-content;
    i {
       font-size: 30px;
       color: var(--primary) !important;
    }

    h4 {
       display: flex;
       flex-direction: column;
       gap: 2px;
       margin: 0;
       color: var(--Gray69) !important;
       font-size: 14px;
       font-weight: 400;
       span {
          color: var(--dblack) !important;
          font-size: 16px;
          font-weight: 500;
       }
    }
 }
 .gap-y-20 {
    row-gap: 25px;
 }

 .bg-card-sky {
    background-color: #f1f4fc;
    padding: 22px 24px;
    border-radius: 12px;
 }

 main.kaloop .title-smal-v2 h2 {
    font-size: 28px;
    font-weight: 600;
 }

 .pad-32 {
    padding: 32px;
 }

 .center-text-card {
    text-align: center;
    h3 {
       margin: 10px 0;
       font-size: 20px;
       font-weight: 600;
       color: var(--dblack);
    }
 }

 .k-static-card-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
 }

 .k-static-card-wrapper .static-card {
    padding: 0;
    box-shadow: unset;
 }

 .inline-check-list {
    flex-grow: 1;
    max-width: 700px;
    ul {
       display: flex;
       justify-content: space-between;
       gap: 10px;
       flex-wrap: wrap;
       li {
          height: 100%;
          display: flex;
          align-items: center;
          gap: 10px;
          color: var(--dblack80);
          i {
             color: var(--primary);
             font-size: 18px;
          }
       }
    }

    &.check-only ul {
       li {
          flex-basis: 48%;
          color: #656565;
          i {
             font-size: 15px;
          }
       }
    }
 }
 .v-hr {
    background-color: #dedede;
    height: 100%;
    border: unset;
    opacity: 1;
    margin: 0;
    width: 1px;
    min-height: 20px;
 }

 .hor-hr {
    background-color: rgb(30, 30, 30, 0.1);
    height: 1px;
    border: unset;
    opacity: 1;
    margin: 40px 0;
    width: 100%;
 }

 .k-icon-list.inline-list ul {
    display: flex;
    flex-wrap: wrap;
    flex-direction: unset;
    column-gap: 10px;
    li {
       font-size: 16px !important;
    }

    li:last-child {
       margin-bottom: 15px;
    }

    & li:nth-child(odd) {
       flex-basis: 38%;
    }
    & li:nth-child(even) {
       flex-basis: auto;
    }
 }

 .content-sec-v2 .k-icon-list.inline-list {
    li {
       color: var(--dblack80);
       i {
          color: var(--primary);
       }
    }

    ul li {
       flex-basis: 32%;
    }
    &.base-48 ul li {
       flex-basis: 48%;
    }
 }

 .content-sec .text p,
 .content-sec .text li {
    opacity: 1;
 }

 .max-width-unset {
    max-width: unset !important;
 }

 .xl-info {
    border-radius: 16px;
    padding: 16px 24px;
 }

 .static-card-title {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
    height: 100%;
    gap: 10px;
 }

 .map-chart {
    position: relative;
    z-index: 1;
    height: 100%;
    &::before {
       content: "";
       position: absolute;
       z-index: -1;
       background-color: #dbe4f7;
       border-radius: 14px;
       bottom: -5px;
       right: -11px;
       width: 100%;
       height: 100%;
    }
    iframe {
       width: 100%;
       height: 100%;
       border-radius: 14px;
       min-height: 500px;
    }
 }

 .strech-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: start;
    gap: 15px;
    justify-content: space-between;
    .head-card {
       gap: 17px;
       align-items: start;
       margin-bottom: 0;
    }
    .body-card ul li {
       i {
          font-size: 16px;
       }
    }
    .body-card > p {
       font-weight: 600;
    }

    &.p-20 {
       padding: 20px 18px;
       .head-card {
          gap: 15px;
       }
    }
 }

 .h5-sps h5 {
    font-weight: 600;
    color: var(--dblack);
    margin: 15px 0 10px;
 }
 .h5-sps.smal-apace h5 {
    margin-bottom: 5px;
 }

 .size-60 {
    width: 60px;
    height: 60px;
 }

 .inline-check-list.inner-style {
    max-width: 370px;
    margin: 5px auto 0;
    ul {
       column-gap: 30px;
       justify-content: start;
    }
    ul li {
       min-width: 120px;
    }
 }

 .p-16 {
    padding: 16px 14px !important;
    .text p {
       font-size: 14px !important;
    }
 }

 main.kaloop .k-static-card.p-16 {
    gap: 10px;
 }

 .size-40 {
    width: 40px;
    height: 40px;
 }

 main.kaloop .avtar-v2.size-40 {
    i {
       font-size: 18px;
    }
 }

 .abs-title {
    position: relative;
    padding-right: 90px;
    .cst-badge {
       position: absolute;
       height: max-content;
       top: 0;
       bottom: 0;
       margin: auto;
       right: 0;
    }

    h2 {
       margin-bottom: 10px;
    }
 }

 .cst-badge.v2 {
    color: var(--primary);
    padding: 2px 14px;
 }

 .k-icon-list.icon-sml ul li i {
    font-size: 16px;
 }

 .col-content.v2.visit-btn {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 15px;
 }

 main.kaloop .banner-v2 .banner-text p.font-20 {
    font-size: 20px !important;
 }

 .flex-column-strech {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
 }

 .k-appel-sec .content.text-small {
    h2 {
       font-size: 20px !important;
    }
    p {
       font-size: 16px !important;
       margin-top: 12px;
    }
 }

 .k-appel-sec.v2 {
    padding: 22px 24px;
    border-radius: 16px;
 }

 .content-sec-v2 .visit-btn .btn-black-white:hover {
    color: white;
    border-color: var(--dblack);
 }

 .custom-search-container {
    background-color: #ffffff;
    border-radius: 50rem;
    padding: 12px 12px 12px 24px;
    width: 100%;
    max-width: 571px;
    color: var(--primary);
    i {
       font-size: 20px;
    }
    button {
       min-width: 125px;
       font-size: 20px;
       padding-block: 9px;
    }
 }

 .custom-search-input {
    border: none;
    color: var(--dblack);
    text-overflow: ellipsis;
    overflow: hidden;
    &::placeholder {
       color: #adadad;
    }
    &:focus {
       box-shadow: unset;
    }
 }

 /* filter section  */

 .scroll-container {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 0.5rem;
 }
 .scroll-container::-webkit-scrollbar {
    height: 3px;
 }
 /* .scroll-container::-webkit-scrollbar-track{
    background-color: ;
 } */
 .scroll-container::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 5px;
 }

 .btn-category {
    background-color: #e2eaf8;
    color: var(--dblack);
    border: none;
    outline: unset !important;
    border-radius: 50rem;
    padding: 10px 20px;
    font-weight: 500;
    font-size: 20px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s ease;
 }
 .btn-category i {
    color: var(--primary);
    transition: all 0.2s ease;
 }
 .btn-category.active,
 .btn-category:hover {
    background-color: #2b82f6;
    color: #ffffff;
    i {
       color: white;
    }
 }

 /* Filter Select Inputs */
 .filter-select {
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 50rem;
    font-weight: 600;
    min-width: 180px;
    background-color: transparent;
    padding: 10px 40px 10px 25px;
    height: 54px;
    background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2212%22%20viewBox%3D%220%200%2020%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M9.79688%2011.125C9.41016%2011.125%209.06641%2010.9961%208.80859%2010.7383L0.558594%202.48828C0%201.97266%200%201.07031%200.558594%200.554688C1.07422%20-0.00390625%201.97656%20-0.00390625%202.49219%200.554688L9.79688%207.81641L17.0586%200.554688C17.5742%20-0.00390625%2018.4766%20-0.00390625%2018.9922%200.554688C19.5508%201.07031%2019.5508%201.97266%2018.9922%202.48828L10.7422%2010.7383C10.4844%2010.9961%2010.1406%2011.125%209.79688%2011.125Z%22%20fill%3D%22%233687F2%22%2F%3E%3C%2Fsvg%3E");
    background-position: right 20px center;
 }
 .filter-select:focus {
    border-color: #2b82f6;
    box-shadow: none;
 }

 /* Vendor Card Design */
 .vendor-card {
    height: 100%;
    transition: 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
 }
 .vendor-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
 }

 .vendor-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #e2eaf8;
    color: #2b82f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
 }

 .vendor-name {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 0;
    color: var(--dblack);
 }

 .rating-badge {
    background-color: #dfecfd;
    border-radius: 50rem;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 18px;
    height: max-content;
    margin: auto;
    color: var(--dblack);
    display: flex;
    align-items: center;
    gap: 3px;
 }

 .rating-badge i {
    color: #ffb400;
    font-size: 16px;
 }
 .vendor-specialty {
    font-weight: 500;
    color: var(--dblack);
    font-size: 16px;
 }
 .vendor-desc {
    color: #656d76;
    font-size: 0.875rem;
    line-height: 1.5;
 }

 .tag-badge {
    background-color: #dfecfd;
    color: var(--dblack);
    border-radius: 50rem;
    padding: 5px 12px;
    font-size: 15px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    height: 35px;
 }

 .location-text {
    color: #454545;

    i {
       color: var(--primary);
    }
 }

 .not-found-msg {
    display: none;
    text-align: center;
    padding: 3rem;
    background: #ffffff;
    border-radius: 1rem;
 }
 .not-found-msg i {
    font-size: 3rem;
    color: var(--primary);
 }

 .gap-12 {
    gap: 12px;
 }

 .h-m-0 h4 {
    margin-top: 0;
 }

 .height-100-card .k-static-card {
    height: 100%;
 }

 .light-blue-v3 {
    background-color: #f6f8fd !important;
 }

 .rounded-12 {
    border-radius: 12px !important;
 }

 /* Card Container */
 .lead-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    h5 {
       color: var(--dblack);
       margin-bottom: 1px;
    }
 }

 /* Profile Image Container */
 .profile-container {
    width: 130px;
    aspect-ratio: 1;
    border-radius: 50%;
    margin-bottom: 12px;
 }

 .profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
 }

 .social-container {
    display: flex;
    gap: 14px;
    margin: 10px 0 20px;
 }

 .icon-btn {
    width: 35px;
    aspect-ratio: 1;
    background-color: #dfecfd;
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    transition:
       background-color 0.2s ease,
       color 0.2s ease,
       transform 0.1s ease;
 }

 .icon-btn:hover {
    background-color: #3b82f6;
    color: #ffffff;
    transform: translateY(-2px);
 }

 .bio-text {
    text-align: left;
    margin-bottom: 20px;
    letter-spacing: -0.1px;
 }

 .line-clamp,
 .bio-text {
    display: -webkit-box;
    -webkit-line-clamp: 7;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }

 .show-more {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
 }

 .show-more i {
    font-size: 10px;
 }

 .k-long-card {
    display: flex;
    justify-content: space-between;
    height: 100%;
    flex-direction: column;
 }

 .k-long-card {
    .head-card {
       display: flex;
       align-items: center;
       gap: 15px;
       margin-bottom: 16px;
       h4 {
          font-size: 20px;
       }
       .avtar-v2 i {
          font-size: 28px;
       }
    }
    .k-icon-list .d-flex {
       margin-bottom: 15px;
       gap: 12px;
       h5 {
          font-size: 18px;
          color: var(--dblack80);
          margin-bottom: 2px;
       }
       span {
          color: var(--Gray114);
       }
       i {
          font-size: 18px;
          color: var(--primary);
       }
    }
 }

 .dblack80-text {
    color: var(--dblack80) !important;
    line-height: 1.3;
    display: inline-block;
 }

 .abs-cards-wrapper.small-cotainer {
    max-width: 1100px;
    margin: auto;
 }

 .banner-v7 .image.small-img {
    max-width: 382px;
    margin: auto;
 }

 .card-foot .btn-black-white {
    border-color: var(--dblack);
 }

 .heading-fw-600 .k-long-card .head-card h4 {
    font-weight: 600;
 }

 .fw-600 {
    font-weight: 600;
 }

 .primary-color {
    color: var(--primary);
 }

 .static-card.text-center .text.v2 h4 {
    margin: 10px 0 12px;
 }

 /* contact form  */
 .contact-form-wrapper {
    .form-label {
       font-size: 16px;
       font-weight: 400;
       color: var(--dblack);
    }
    input,
    textarea {
       border: 1px solid #dedede;
       border-radius: 6px;
       color: var(--dblack);
       padding: 10px 16px;
       box-shadow: unset !important;
    }

    input::placeholder,
    textarea::placeholder {
       color: #d4d4d4;
    }
 }

 /* blog-section */
 .blog-section {
    padding: 80px 0;
 }

 .blog-section .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    h4 {
       font-size: 24px;
       color: var(--dblack);
       font-weight: 500;
    }
    a {
       display: inline-flex;
       align-items: center;
       gap: 5px;
       font-size: 16px;
       color: var(--primary);
    }
 }

 .sidebar-blog {
    border-right: 1px solid #ddd;
    padding-right: 20px;
    position: sticky;
    top: 140px;
 }

 .filter-item {
    margin-bottom: 22px;
    display: flex;
    gap: 10px;
    align-items: center;
    label {
       font-size: 16px;
       font-weight: 400;
       color: var(--dblack);
    }
 }

 .filter-item input {
    width: 22px;
    height: 22px;
    border-color: var(--dblack);
    border-radius: 3px;
    box-shadow: unset !important;
    background-color: transparent;
    margin: 0;
    &:checked {
       background-color: var(--primary);
       border-color: var(--primary);
    }
 }

 .blog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
 }

 .blog-header h2 {
    font-weight: 700;
    margin: 0;
 }

 .view-all {
    color: #2f80ed;
    text-decoration: none;
    font-weight: 600;
 }

 .blog-card {
    margin-bottom: 35px;
    img {
       width: 100%;
       max-height: 220px;
       object-fit: cover;
       border-radius: 8px;
    }
    h4 {
       font-size: 18px;
       font-weight: 600;
       margin: 15px 0 5px;
       color: var(--dblack);
    }
    .learn-more {
       font-size: 16px;
       font-weight: 500;
       color: var(--primary);
       display: inline-flex;
       align-items: center;
       gap: 7px;
       margin-top: 10px;
    }
 }

 .pagination-wrapper {
    margin-top: 30px;
    ul {
       display: flex;
       gap: 10px;
       .page-item .page-link {
          color: rgba(30, 30, 30, 0.7);
          display: inline-flex;
          justify-content: center;
          align-items: center;
          height: 100%;
          padding: 2px 5px;
          min-width: 28px;
          border-radius: 3px;
          font-size: 16px;
          font-weight: 400;
          border: 1px solid #000000;
          background-color: transparent;
          i {
             font-size: 14px;
          }
       }
       li.disabled .page-link {
          opacity: 0.45;
       }

       li.active .page-link {
          background-color: var(--primary);
          color: white;
          border-color: var(--primary);
       }
    }
 }

 .pagination .page-link {
    color: #333;
 }

 .pagination .active .page-link {
    background: #2f80ed;
    border-color: #2f80ed;
 }

 .cust-list-spay {
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-right: 1px solid #dbdbdb;
 }

 .cust-scrollspy {
    position: sticky;
    top: 80px;
 }

 .cust-scrollspy .cust-list-spay .list-group-item {
    border: unset;
    padding: 0;
    border-radius: 0;
    background-color: transparent !important;
    color: rgba(30, 30, 30, 0.6);
    max-width: 230px;
    margin-right: 10px;
    line-height: 1.3;
 }

 .cust-list-spay .list-group-item.active,
 .cust-list-spay .list-group-item:hover {
    color: var(--primary);
    font-weight: 500;
    transition: 0.3s all ease;
 }

 .spay-scroll-content p {
    color: rgba(0, 0, 0, 0.5);
 }

 .spay-scroll-content p:not(:last-of-type) {
    margin-bottom: 20px;
 }

 .spay-scroll-content h4 {
    margin: 25px 0 10px;
 }

 .spay-scroll-content .main-img {
    margin: 20px 0;
    img {
       border-radius: 12px;
    }
 }

 .share-links {
    border-radius: 8px;
    background-color: #e3eefe;
    padding: 20px;
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 20px;
 }

 .blog-soc-links {
    display: flex;
    gap: 15px;
 }

 .blog-soc-links a {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    width: 35px;
    height: 35px;
    border: 1px solid var(--primary);
    border-radius: 4px;
    font-size: 20px;
    transition: 0.3s all ease;
 }

 .blog-soc-links a:hover {
    background-color: #0a66c2;
    color: var(--white);
 }

 .input-copy {
    display: flex;
    gap: 8px;
    border: 1px solid #dbdbdb;
    border-radius: 5px;
    padding: 12px;
    align-items: center;
    background-color: var(--white);
 }

 .input-copy span:first-child i {
    transform: rotate(-45deg);
 }

 .input-copy span:last-child i {
    font-size: 20px;
    cursor: pointer;
 }

 .input-copy input {
    background-color: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
    color: rgba(0, 0, 0, 0.6);
    border: unset;
    outline: unset !important;
 }

 .share-links .title h3 {
    font-size: 24px;
    font-weight: 500;
 }

 main.kaloop .blog-banner {
    padding: 145px 0 50px;
 }

 .blog-banner .title {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: space-between;
    align-items: center;
 }

 .k-user-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    img {
       border-radius: 50%;
       width: 48px;
       aspect-ratio: 1;
       flex-shrink: 0;
       object-fit: cover;
       border: 2px solid white;
    }

    h6 {
       font-size: 16px;
       font-weight: 600;
    }

    span {
       color: rgb(215, 231, 252, 0.8);
       font-size: 14px;
    }
 }

 .blog-details-section h4 {
    color: var(--dblack);
    font-size: 28px;
    font-weight: 500;
 }

 .k-steps {
    display: flex;
    justify-content: center;
    align-items: center;

    .avtar-v2 {
       background-color: #e0e8fc;
       font-size: 20px;
       font-weight: 500;
       color: var(--dblack);
       width: 43px;
       aspect-ratio: 1;
       flex-shrink: 0;
       height: unset;
    }

    hr {
       max-width: 45px;
       margin: 0;
       background-color: #656565;
    }
    .step {
       display: flex;
       align-items: center;
       gap: 15px;
       h5 {
          color: var(--dblack);
       }

       &.active .avtar-v2 {
          background-color: var(--primary);
          color: white;
       }
    }
 }

 .center-card-space {
    height: 100%;
    h4 {
       margin: 10px 0 2px;
       font-size: 20px;
       font-weight: 500;
       color: var(--dblack);
    }

    p {
       margin-bottom: 20px;
    }
 }

 .value-list li {
    gap: 10px;
    color: #ffffff;
    span {
       font-size: 24px !important;
       font-weight: 500;
    }
    &::before {
       display: none;
    }
 }

 /* Table Styles */

 .k-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
    background-color: white;
    border-radius: 6px;
    overflow: hidden;
    white-space: nowrap;
 }

 .k-comparison-table thead {
    background-color: #ebedf0;
 }

 .k-comparison-table th {
    font-size: 16px;
    font-weight: 400;
    text-align: left;
    padding: 14px 22px;
    color: #252849;
 }

 .k-comparison-table td {
    padding: 20px 24px 7px;
    border-top: 1px solid #e0e0e0;
    font-size: 16px;
    color: #252849;
    font-weight: 400;
 }

 .k-comparison-table .table-icon-cell {
    display: flex;
    align-items: center;
    gap: 15px;
 }

 .k-comparison-table strong {
    font-size: 20px;
    font-weight: 600;
    color: var(--dblack);
 }

 .abs-left {
    position: absolute;
    top: 18px;
    right: 14px;
 }

 .abs-left + .head-card {
    padding-right: 150px;
    flex-wrap: wrap;
 }

 .base-unset ul {
    gap: 20px !important;
    li {
       flex-basis: unset !important;
       margin: 0 !important;
    }
 }

 .off-white .dif-card .body-card .info-alert {
    background-color: #f0f7ff;
 }

 /* media query  */
 @media (max-width: 1199px) {
    .main-header .navbar .navbar-nav {
       gap: 15px;
    }
    .k-price-card {
       padding: 15px;
       h4 {
          font-size: 20px;
       }
    }

    .banner-v2 .lg-small-text h1 {
       font-size: 40px;
       br {
          display: none;
       }
    }

    main.kaloop .lg-small-text .subtitle.fs-28 {
       font-size: 20px !important;
    }

    .k-count-section .inner-wrapper .row {
       .text h2 {
          font-size: 24px;
       }

       .text .k-icon-list li:not(:last-child) {
          margin-bottom: 10px;
       }

       .mockup {
          max-width: 350px;
          margin: auto;
       }
    }

    .banner-v7 h1 br {
       display: none;
    }

    .sec-col-49.two-column-sec-v2 .title-v2 h2 {
       font-size: 30px;
    }

    .sec-col-49.two-column-sec-v2 {
       .subtitle {
          font-size: 20px;
       }
       .plan-list h5 {
          font-size: 16px;
       }
       .plan-list .info-alert span {
          font-size: 16px;
       }
    }

    .width-max-content {
       width: unset;
    }

    .k-icon-list.inline-list ul {
       li {
          align-items: first baseline;
          i {
             flex-shrink: 0;
          }
       }
       & li:nth-child(even) {
          flex-basis: 48%;
       }
       & li:nth-child(odd) {
          flex-basis: 48%;
       }
    }

    .col-content.v2.visit-btn .site-btn {
       flex-grow: 1;
    }

    .badge-wrapper {
       gap: 18px;
    }
 }

 @media (max-width: 991px) {
    /* header  */
    .main-header .navbar .dropdown-toggle::after {
       display: none;
    }

    .main-header .navbar .dropdown-toggle {
       display: flex;
       justify-content: space-between;
       align-items: center;
       padding-right: 0;
       .dropdown-btn {
          font-size: 12px;
          transition: 0.3s all ease;
          outline: unset;
          padding: 0;
          border-radius: 50%;
          display: inline-flex;
          justify-content: center;
          align-items: center;
          width: 20px;
          height: 20px;
          background-color: white;
       }
    }

    .main-header .navbar .nav-item.show .dropdown-toggle .dropdown-btn {
       transform: rotate(90deg);
    }

    main.kaloop .text-cards-sec-v2 .static-card .text {
       text-align: start;
    }

    main.kaloop .main-header .dropdown-menu li {
       padding: 0 !important;
       a {
          padding-inline: 0;
       }
    }

    main.kaloop .main-header .nav-item.active a {
       border-bottom: unset;
    }

    .large-gap {
       row-gap: 40px !important;
    }

    .large-gap .text-card .text-title {
       flex-direction: column;
    }

    .k-stat-two-col .image {
       margin: 0;
    }
    .k-count-section .inner-wrapper .row .mockup {
       max-width: 500px;
    }

    .k-count-section .inner-wrapper .row {
       .text {
          min-height: unset;
       }
    }

    .sec-col-49 .row {
       flex-direction: column-reverse !important;
    }
    .inline-check-list.inner-style ul {
       max-width: unset;
       column-gap: 15px;
    }

    .map-chart iframe {
       min-height: 300px;
    }

    .medium-gap {
       row-gap: 30px !important;
    }

    .height-mob-100 {
       height: 100% !important;
    }

    .blog-details-section h4 {
       font-size: 20px;
    }

    .sidebar-blog {
       top: 100px;
    }

    .filter-item {
       margin-bottom: 10px;
    }
 }

 @media (max-width: 767px) {
    main.kaloop p {
       font-size: 14px !important;
    }

    main.kaloop h2 {
       font-size: 30px;
    }

    .h2-small h2 {
       font-size: 30px !important;
    }

    .mt-40 {
       margin-top: 25px;
    }

    .abs-cards-sec .large-gap .bg-card {
       padding: 15px;
    }

    .k-small-card .static-card {
       padding: 20px 15px;
    }

    .large-gap {
       gap: 20px !important;
    }

    main.kaloop .banner-v2 {
       padding-top: 90px;
    }
    main.kaloop .k-static-card .avtar-v2 i {
       font-size: 20px;
    }

    .k-appel-sec {
       padding: 20px 15px;
       h2 {
          font-size: 20px !important;
       }
    }

    main.kaloop .k-appel-sec .content p {
       font-size: 14px !important;
    }

    .sales-page .k-title {
       h2 {
          font-size: 30px;
       }
    }

    .text-cards-sec .k-static-card-2 {
       padding: 15px 130px 15px 15px;
    }

    .text-cards-sec .k-static-card-2 img {
       max-width: 130px;
    }

    .stand-alone-btn {
       margin-top: 30px;
    }

    .badge-wrapper {
       gap: 15px;
       span {
          flex-basis: 47%;
          font-size: 16px;
       }
    }

    .sales-page .section-1-v2 .counter-icon h4 {
       font-size: 25px;
    }

    .sales-page .section-1-v2 .counter-icon {
       min-width: 50px;
       height: 50px;
    }

    .custom-table th,
    .custom-table td {
       font-size: 14px;
       padding: 14px;
    }

    .multi-rows-sec .two-column-content h2 {
       font-size: 30px;
    }

    .big-info-alert {
       font-size: 14px;
       gap: 5px;
    }

    .support-badge {
       font-size: 16px;
    }

    .k-flex-card {
       h4 {
          margin-bottom: 5px;
       }
    }

    main.kaloop section.faq-sec .accordion-item {
       padding: 0;
    }

    main.kaloop section.faq-sec .accordion-button {
       text-align: start;
       align-items: center;
       padding-block: 15px;
       gap: 10px;
       &::after {
          width: 15px;
          height: 15px;
       }
    }

    .content-sec-v2 .text.h-style h5 {
       margin: 10px 0;
    }

    .k-price-card .head-card i,
    .plan-list .avtar-v2 i,
    .k-price-card-v2 .avtar-v2 i,
    .big-font i {
       font-size: 20px;
    }

    .k-icon-list ul li:not(:last-child) {
       margin-bottom: 10px;
    }

    .k-price-card {
       .k-icon-list ul li {
          gap: 10px;
       }
    }

    .dif-card,
    .content-sec-v2 .k-inner-wrapper .static-card {
       padding: 15px;
    }

    .d-flex.flex-md-nowrap.flex-wrap .avtar-v2 + .text h5 {
       font-size: 18px;
    }

    .k-price-card-v2 {
       gap: 0;
    }

    section.faq-sec .title {
       margin-bottom: 25px;
    }

    .k-price-card.v3 .body-card p {
       min-height: unset;
    }

    .col-mob-style {
       .row {
          flex-direction: column-reverse;
       }
       .image {
          margin: 0;
       }
    }

    .k-inner-title h3 {
       font-size: 22px;
    }

    .banner-v2 .lg-small-text h1 {
       font-size: 31px;
    }

    .k-team-card {
       padding: 8px;
    }

    .ratio-100 {
       --ratio: 50px;
    }

    .two-column-content.v2 {
       & > div.d-flex .text {
          span {
             font-size: 14px;
          }
       }
    }

    h5.dblack-text {
       font-size: 18px;
    }

    .sec-col-49 .row .image {
       margin: 0;
    }

    .k-price-card .head-card {
       gap: 10px;
    }

    .gap-y-20 {
       row-gap: 15px;
    }

    .pad-32 {
       padding: 15px;
    }

    main.kaloop .title-smal-v2 h2 {
       font-size: 20px;
    }

    .lg-padding {
       padding: 20px 15px !important;
    }

    .primary-badge {
       i {
          font-size: 20px;
       }
    }

    .inline-check-list {
       & ul {
          li:has(hr) {
             display: none;
          }
       }
    }

    .k-icon-list.inline-list ul {
       flex-direction: column;
       li {
          flex-basis: unset;
          font-size: 14px !important;
          i {
             font-size: 16px;
          }
       }
    }

    .static-card > .text.h-space h4 {
       margin-top: 10px;
    }

    .map-chart::before {
       right: -5px;
       bottom: 1px;
    }

    .xl-info {
       border-radius: 8px;
       padding: 16px;
    }

    .abs-title {
       padding-right: 75px;
       .cst-badge {
          margin: unset;
       }
    }

    main.kaloop .k-static-card.p-16 {
       flex-direction: column;
       align-items: start;
    }

    .k-counter-icon {
       &.v2 {
          width: 55px;
          height: 55px;
          flex-direction: column;
          h4 {
             font-size: 21px;
             font-weight: 800;
          }
          span {
             font-size: 12px;
          }
       }
    }

    main.kaloop .banner-v2 .banner-text p.font-20 {
       font-size: 16px !important;
    }
    /* main.kaloop .content-sec .row .col-auto {
       width: 100%;
    }
    main.kaloop .content-sec .visit-btn.col-content .site-btn {
       width: 100%;
    } */

    .k-appel-sec.v2 {
       padding: 15px;
       border-radius: 8px;
    }

    .filter-select {
       width: 100% !important;
       height: 45px;
    }

    .rating-badge {
       font-size: 16px;
       i {
          font-size: 14px;
       }
    }

    .tag-badge {
       font-size: 14px;
    }

    .btn-category {
       font-size: 16px;
       padding: 8px 15px;
    }

    .scroll-container {
       gap: 5px;
    }

    .custom-search-container {
       padding: 8px 8px 8px 15px;
       button {
          padding-block: 5px;
          font-size: 16px;
       }
    }

    .not-found-msg i {
       font-size: 25px;
    }

    .not-found-msg {
       padding: 20px;
    }

    .map-chart iframe {
       min-height: 250px;
    }

    .profile-container {
       width: 100px;
    }

    .bio-text {
       margin-bottom: 10px;
    }

    .text-cards-sec .static-card a.font-20 {
       font-size: 16px !important;
       margin-top: 10px !important;
    }

    .k-long-card {
       & .head-card {
          .avtar-v2 i {
             font-size: 20px;
          }
       }
       .k-icon-list .d-flex {
          margin-bottom: 10px;
       }
    }

    .cust-list-spay {
       gap: 15px;
    }

    .cust-scrollspy .cust-list-spay .list-group-item {
       font-size: 14px;
       max-width: 300px;
    }

    .spay-scroll-content p:not(:last-of-type) {
       margin-bottom: 10px;
    }

    .blog-details-section h4 {
       margin: 20px 0 10px;
    }
    .blog-section .title {
       margin-bottom: 20px;
       &:has(.blog-filter-btn) h4 {
          display: none;
       }
       .blog-filter-btn {
          display: flex;
          gap: 10px;
          align-items: center;
          justify-content: space-between;
          font-size: 18px;
          font-weight: 500;
          width: 100%;
          padding: 10px;
          border-radius: 4px;
          box-shadow: 0px 0px 20px 0px rgba(30, 30, 30, 0.08);
          border: unset;
          outline: unset !important;
       }
    }

    .pagination-wrapper {
       margin-top: 0;
    }

    .blog-card .learn-more {
       margin-top: 5px;
    }

    .k-steps {
       .step {
          gap: 8px;
          h5 {
             color: var(--dblack);
             font-size: 16px;
          }
          .avtar-v2 {
             width: 30px;
             font-size: 16px;
          }
       }
    }

    .value-list li {
       font-size: 14px !important;
       span {
          font-size: 18px !important;
       }
    }

    .strech-card .body-card .k-icon-list li {
       font-size: 14px !important;
    }

    .two-column-sec .inline-check-list ul {
       flex-direction: column;
    }

    .k-comparison-table strong {
       font-size: 16px;
    }
    .k-comparison-table small,
    .k-comparison-table td {
       font-size: 14px;
    }

    .abs-left + .head-card {
       padding-right: 130px;
    }
 }