.sort_ftr {
     height: 60px !important;
     overflow-y: auto !important;
 }

 .form-group {
     text-align: center;
     padding: 20px 30px;
 }

 .click-here {
     cursor: pointer;
     padding: 8px 18px;
     border: 1px solid #012840;
     color: #012840;
     border-radius: 2px;
     margin-left: 5px;
     transition: 0.3s ease-in-out;
     font-size: 14px;
     font-weight: 500;
     /* background: #012840; */
     text-transform: capitalize;
     line-height: normal;
 }

 .thm_instl_btn {
     text-align: right;
     margin-top: 0px;
     display: flex;
 }

 .input-submit-btn input {
     cursor: pointer;
     padding: 8px 18px;
     border: 1px solid #012840;
     color: #012840;
     border-radius: 4px;
     margin-left: 5px;
     transition: 0.3s ease-in-out;
     font-size: 14px;
     font-weight: 500;
     /* background: #012840; */
     text-transform: capitalize;
     line-height: normal;
     background: none;
     margin-top: 20px;
 }

 .popup-heading h2 {
     color: #000;
 }

 .input-submit-btn .btn {
     /* cursor: pointer; */
     padding: 8px 18px;
     border: 1px solid #012840;
     color: #012840;
     border-radius: 2px;
     background-color: #012840;

     transition: 0.3s ease-in-out;
     font-size: 14px;
     font-weight: 500;
     /* background: #012840; */
     text-transform: capitalize;
     line-height: normal;
     color: #fff;
 }

 .input-submit-btn .btn:hover {
     background-color: transparent;
     color: #012840;
     font-weight: 500;
 }

 .custom-model-main {
     text-align: center;
     overflow: hidden;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     /* z-index: 1050; */
     -webkit-overflow-scrolling: touch;
     outline: 0;
     opacity: 0;
     -webkit-transition: opacity 0.15s linear, z-index 0.15;
     -o-transition: opacity 0.15s linear, z-index 0.15;
     transition: opacity 0.15s linear, z-index 0.15;
     z-index: -1;
     overflow-x: hidden;
     overflow-y: auto;
 }

 .model-open {
     z-index: 99999;
     opacity: 1;
     overflow: hidden;
 }

 .custom-model-inner {
     -webkit-transform: translate(0, -25%);
     -ms-transform: translate(0, -25%);
     transform: translate(0, -25%);
     -webkit-transition: -webkit-transform 0.3s ease-out;
     -o-transition: -o-transform 0.3s ease-out;
     transition: -webkit-transform 0.3s ease-out;
     -o-transition: transform 0.3s ease-out;
     transition: transform 0.3s ease-out;
     transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
     display: inline-block;
     vertical-align: middle;
     width: 600px;
     margin: 30px auto;
     max-width: 97%;
 }

 .custom-model-wrap .form-control {
     font-size: 0.9rem;
 }

 .custom-model-wrap {
     display: block;
     width: 100%;
     position: relative;
     background-color: #fff;
     border: 1px solid #999;
     border: 1px solid rgba(0, 0, 0, 0.2);
     border-radius: 10px;
     -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
     box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
     background-clip: padding-box;
     outline: 0;
     text-align: left;
     padding: 20px;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     box-sizing: border-box;
     max-height: calc(100vh - 70px);
     overflow-y: auto;
 }

 .model-open .custom-model-inner {
     -webkit-transform: translate(0, 0);
     -ms-transform: translate(0, 0);
     transform: translate(0, 0);
     position: relative;
     z-index: 999;
 }

 .model-open .bg-overlay {
     background: rgba(0, 0, 0, 0.6);
     z-index: 99;
 }

 .bg-overlay {
     background: rgba(0, 0, 0, 0);
     height: 100vh;
     width: 100%;
     position: fixed;
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     z-index: 0;
     -webkit-transition: background 0.15s linear;
     -o-transition: background 0.15s linear;
     transition: background 0.15s linear;
 }

 .close-btn {
     position: absolute;
     right: 0;
     top: -30px;
     cursor: pointer;
     z-index: 99;
     font-size: 30px;
     color: #fff;
 }

 .step-section {
     padding: 60px 0px;
     background: #f9f9f9;
     border-radius: 10px;
     margin-top: 60px;
 }

 .custom-alert {
     border-radius: 10px;
     border-width: 2px;
     color: #012840;
     font-size: 1.25rem;
     font-weight: 500;
     text-align: center;
 }

 .step-main-heading h2 {
     font-size: 40px;
     margin-bottom: 50px;
     text-align: center;
 }

 .install-steps-box {
     height: 100%;
     padding: 50px;
     border-radius: 10px;
     border: 1px solid #ddd;
     box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.03);
 }

 .install-steps-box h2 {
     font-size: 40px;
     margin-bottom: 20px;
 }

 .install-steps-box h3 {
     font-size: 24px;
     color: black;
     font-weight: 500;
 }

 .install-steps-box h2 {
     font-size: 40px;
 }

 .install-steps-box p {
     font-size: 16px;
     line-height: 26px;
     margin-top: 16px;
 }

 .slick-dots li button {
     font-size: 0;
     line-height: 0;
     display: block;
     width: 20px;
     height: 20px;
     padding: 5px;
     cursor: pointer;
     color: transparent;
     border: 0;
     outline: 0;
     background: 0 0;
 }

 ul.slick-dots {
     display: flex;
     justify-content: center;
     align-items: center;
     opacity: 0;
     transition: 0.3s all ease-in;
 }

 .marketplace-slider:hover ul.slick-dots {
     opacity: 1;
 }

 .marketplace-slider img {
     width: 100%;
     /* height: 200px; */
 }

 /* .mpl_pro_cnt {
    padding-top: 0px;
} */

 .mpl_pro_cnt h3 {
     margin: 0px 0px 10px;
     display: block;
 }

 button.slick-prev.slick-arrow {
     border: none;
     position: absolute;
     font-size: 0px;
     top: 37%;
     left: 0;
     z-index: 99;
     width: 24px;
     height: 50px;
     background-size: 12px !important;
     border-radius: 0 4px 4px 0;
     background: url("<?= $url; ?>images/marketplace-left-arrow.webp") center center no-repeat rgb(255 255 255 / 49%);
     transition: 0.3s all ease-in;

     transform: translate(-110%, 0px);
 }

 button.slick-next.slick-arrow {
     border: none;
     position: absolute;
     font-size: 0px;
     top: 37%;
     right: 0;
     z-index: 99;
     width: 24px;
     height: 50px;
     background-size: 12px !important;
     border-radius: 4px 0px 0px 4px;
     background: url("<?= $url; ?>images/marketplace-right-arrow.webp") center center no-repeat rgb(255 255 255 / 49%);
     /* transform: translate(); */
     transform: translate(110%, 0px);
     transition: 0.3s all ease-in;


 }

 button.slick-next.slick-arrow:hover {
     background-color: rgb(255 255 255 / 70%);
 }

 button.slick-prev.slick-arrow:hover {
     background-color: rgb(255 255 255 / 70%);
 }

 .marketplace-slider:hover button.slick-next.slick-arrow {
     transform: translate(0px, 0px);

 }

 .marketplace-slider:hover button.slick-prev.slick-arrow {
     transform: translate(0px, 0px);
 }

 .slick-dots li {
     color: #999;
 }

 li.slick-active {
     color: #30CFF2;
 }

 .mrktplc_hero_ctn.text-center {
     max-width: 700px;
     margin: 0 auto;
 }

 @media (max-width:991px) {
     .install-steps-box h2 {
         font-size: 36px;
     }

     .step-main-heading h2 {
         font-size: 38px;
         margin-bottom: 40px;
     }
 }

 @media (max-width:768px) {
     .step-main-heading h2 {
         font-size: 32px;
         margin-bottom: 40px;
     }

     .install-steps-box {
         padding: 30px;
     }
 }

 @media screen and (min-width:800px) {
     .custom-model-main:before {
         content: "";
         display: inline-block;
         height: auto;
         vertical-align: middle;
         margin-right: -0px;
         height: 100%;
     }
 }

 @media screen and (max-width:799px) {
     .custom-model-inner {
         margin-top: 45px;
     }
 }


 .logo-header ul {
     display: flex;
     justify-content: center;
     margin: 10px 0 40px;
     align-items: center;
     list-style: none;
     gap: 20px;
 }

 .mrktplcL2_hero_banner_md .container {
     position: relative;
 }

 .right-logo {
     position: absolute;
     right: -90px;
 }

 .left-logo {
     position: absolute;
     left: -50px;
     bottom: -30px;
 }

 .banner-bg-shape {
     position: absolute;
     top: 0px;
     left: 0;
 }



 .mrktplcL2_hero_banner_md {
     background-size: cover !important;
     position: relative;
     background: url(https://www.transfunnel.com/images/hubpsot-theme-banner-bg.png) top left no-repeat #f9f9f9;
     width: 100%;
     height: 613px;
     /* background-color: lightblue; */
     transform: scale(1);
     transform-origin: top;
 }

 .icon-new-marketplace {
     position: relative;
     margin-bottom: 20px;
 }

 /* outer container that visually matches your screenshot (thin blue border) */


 .layout {
     /* display: flex;
     gap: 20px;
     align-items: flex-start; */
     position: relative;
 }

 /* left yellow card */
 .frame {
     height: 440px;
     margin: 70px 0;
     transform: scale(1);
     transform-origin: top;
 }

 .left-card {
     background: rgba(255, 222, 29, 1);
     border-radius: 14px;
     padding: 38px 45px;
     max-width: 400px;
     box-shadow: 0 0 0 rgba(0, 0, 0, 0.04);
     display: flex;
     flex-direction: column;
     justify-content: center;
     gap: 12px;
     width: 100%;
 }

 .small-title {
     font-weight: 600;
     font-size: 28px;
     color: #083244;
 }

 .logo-wrap {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .logo-wrap img {
     height: 48px;
     /* change as needed */
     width: auto;
     display: block;
 }

 .logo-text {
     font-weight: 800;
     font-size: 36px;
     color: #083244;
     line-height: 1;
 }

 .left-sub {
     color: rgba(1, 40, 64, 1);
     font-weight: 600;
     margin-top: 6px;
     font-size: 28px;
 }

 /* big dark card on right */
 .big-card {
     background: linear-gradient(180deg, #062532 0%, #052731 100%);
     color: #d7f3ff;
     border-radius: 16px;
     padding: 40px 50px 40px;
     flex: 1;
     box-shadow: 0 6px 18px rgba(2, 18, 28, 0.25);
     display: flex;
     gap: 30px;
     align-items: flex-start;
     position: absolute;
     right: 0;
     width: 976px;
     top: 90px;
 }

 .col {
     flex: 1;
 }

 .col.right-col {
     margin-left: 90px;
 }

 .col .heading {
     font-size: 32px;
     font-weight: 700;
     color: #ffffff;
     margin-bottom: 26px;
     line-height: normal;
 }

 .feature-list {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 12px;
 }

 .feature-list li {
     display: flex;
     align-items: flex-start;
     gap: 12px;
     color: #FFFFFF;
     font-weight: 400;
 }

 /* check icon circle */
 .check {
     min-width: 25px;
     height: 25px;
     border-radius: 50%;
     background: linear-gradient(180deg, #06b9d9, #04a4c2);
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }

 .check svg {
     width: 14px;
     height: 14px;
     display: block;
 }

 /* center lightning image area */
 .middle {
     width: 50px;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .middle img {
     max-width: 100%;
     height: auto;
     display: block;
     position: relative;
     top: -12px;
 }

 /* right small list styles */
 .right-col .heading {
     /* font-size: 20px;
     text-align: left; */
 }

 .right-col .feature-list li {
     color: #bff3ff;
 }

 /* responsive */
 @media (max-width:900px) {
     .layout {
         flex-direction: column;
     }

     .big-card {
         padding: 20px;
         flex-direction: column;
         gap: 18px;
     }

     .middle {
         order: 2;
         display: block;
         width: 100%;
         display: flex;
         justify-content: center;
     }
 }


 .testimonial-row {
     max-width: 950px;
     margin: auto;
 }

 .testimonial-content-bx {
     border: 1px solid #878787;
     border-radius: 10px;
     height: 100%;
 }

 .testimonial-content p {
     height: 320px;
     font-weight: 500;
 }

 .testimonial-content-bx {
     padding: 40px;
 }

 .cta-strip-contentwith-img {
     background: linear-gradient(180deg, #062532 0%, #052731 100%);
     border-radius: 10px;
     box-shadow: 0px 4px 42px 0px #00000024;
 }

 .cta-strip-content {
     padding-left: 60px;
 }

 .cta-strip-content h2 {
     color: #ffffff;
     font-weight: 600;
     margin-bottom: 0;
 }

 .cta-strip-content p {
     color: #fff;
 }

 .cta-strip-btn a {
     padding: 12px 35px;
     color: #012840;
     background: #fff;
     border-radius: 30px;
     margin-top: 20px;
     display: inline-block;
     font-weight: 500;
 }

 .cta-strip-contentwith-img .row {
     align-items: center;
 }

 .cta-strip-img {
     position: relative;
     top: 23px;
 }


 @media (min-width:300px) and (max-width:767px) {
     .right-logo {
         display: none;
     }

     .left-logo {
         display: none;
     }

     .mrktplcL2_hero_banner_md {
         height: auto;
     }

     .mrktplcL2_hero_banner_md {
         padding: 60px 0px 50px;
     }

     .type-tabs {
         margin: 50px auto 10px;
     }

     .big-card {
         position: relative;
         width: 100%;
         top: inherit;
         border-radius: 0px;
     }

     .frame {
         height: auto;
     }

     .col.right-col {
         margin-left: 0;
         margin-top: 20px;
     }

     .middle {
         display: none;
     }

     .left-card {
         border-radius: 0;
     }

     .testimonial-content p {
         height: auto;
     }

     .testimonial-row {
         gap: 40px;
     }

     .cta-strip-content {
         padding-left: 0px;
     }

     .cta-strip-contentwith-img {
         padding: 30px 30px 0;
     }

     .cta-strip-img {
         top: 14px;
     }
 }

 @media (min-width:768px) and (max-width:991px) {

     .right-logo,
     .left-logo {
         display: none;
     }

     .type-tabs {
         margin: 70px auto 10px;
     }

     .mrktplcL2_hero_banner_md {
         height: 573px;
     }

     .install-steps-box {
         padding: 40px;
     }
 }

 @media (min-width:768px) and (max-width:1100px) {
     .right-logo {
         max-width: 150px;
         right: 0;
     }

     .right-logo img {
         width: 100%;
     }

     .left-logo {
         max-width: 150px;
         left: 0;
     }

     .left-logo img {
         width: 100%;
     }

     .big-card {
         width: 100%;
         top: 30px;
         position: relative;
     }

     .frame {
         height: auto;
     }

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

     .testimonial-content p {
         height: auto;
     }

     .cta-strip-content {
         padding: 40px 50px;
     }

     .cta-strip-img {
         display: none;
     }

     .col .heading {
         font-size: 22px;
     }
 }

 @media (min-width:1100px) and (max-width:1199px) {
     .big-card {
         width: 680px;
     }

     .col .heading {
         font-size: 22px;
     }

     .col.left-col {
         flex: 0 0 40%;
     }

     .col.right-col {
         margin-left: 50px;
     }
 }