.integration-listing { width:100%; position:relative; background:#fff; padding:100px 0;}
.message-div {width:100%; text-align:center;display:none;color:#000; margin-top:25px;}
.integration-listing .flexy { display:flex; align-items:flex-start; flex-wrap:wrap;}
.integration-listing .flexy .left { width: 35%;}
.integration-listing .flexy .left .categories { padding-top:25px;}
.integration-listing .flexy .left .categories .categories-title {color: var(--Text-primary, #212121);font-family: Montserrat;font-size: 24px;font-style: normal;font-weight: 700;line-height: 100%; /* 24px */}
.integration-listing .flexy .left .categories .catout { display:flex; flex-wrap:wrap; }
.integration-listing .flexy .left .categories ul li a { width:100%;}
.integration-listing .flexy .left .categories ul li a  { width:100%; transition:all 400ms ease; margin-top:10px; padding:5px; max-width:100%; width:max-content; display:inline-block;color: var(--Text-primary, #212121);font-family: Montserrat;font-size: 16px;font-style: normal;font-weight: 500;line-height: 100%; /* 16px */letter-spacing: -0.16px; }
.integration-listing .flexy .left .categories ul li a:hover { background: #56189E; color:#fff; max-width:100%; width:max-content; padding:5px; border-radius: 6px;background: #56189E; }
.integration-listing .flexy .left .categories ul li a.selected { background: #56189E; color:#fff; max-width:100%; width:max-content; padding:5px; border-radius: 6px;background: #56189E; }


.integration-listing .flexy .right .search-right { max-width:50%;margin-bottom:56px;}
.integration-listing .flexy .right input {border-radius: 40px;background: #F6F6F6; }

.integration-listing .flexy .left .links {padding-bottom;50px; display:flex; flex-wrap:wrap;}
.integration-listing .flexy .left .links .link-title { width:100%; color: var(--Text-primary, #212121);font-family: Montserrat;font-size: 24px;font-style: normal;font-weight: 700;line-height: 100%; /* 24px */}
.integration-listing .flexy .left .links .link-inner { width:100%; padding:5px 0;}
.integration-listing .flexy .left .links a {color: var(--Text-primary, #212121);font-family: Montserrat;font-size: 16px;font-style: normal;font-weight: 500;line-height: 100%; /* 16px */letter-spacing: -0.16px;}
.integration-listing .flexy .left .links { width:100%;}
.integration-listing .flexy .left .links a { width:100%; transition:all 400ms ease; margin-top:10px; padding:5px; max-width:100%; width:max-content; display:inline-block;color: var(--Text-primary, #212121);font-family: Montserrat;font-size: 16px;font-style: normal;font-weight: 500;line-height: 100%; /* 16px */letter-spacing: -0.16px; }
.integration-listing .flexy .left .links a:hover { background: #56189E; color:#fff; max-width:100%; width:max-content; padding:5px; border-radius: 6px;background: #56189E; }
.integration-listing .flexy .left .links a.selected { background: #56189E; color:#fff; max-width:100%; width:max-content; padding:5px; border-radius: 6px;background: #56189E; }

.integration-listing .flexy .right { width:65%;}
.integration-listing .flexy .right .inner-title h3 {color: #212121;font-family: Montserrat;font-size: 32px;font-style: normal;font-weight: 600;line-height: 130%; /* 41.6px */letter-spacing: -0.32px;}
.integration-listing .flexy .right .inner-content { color: #212121;font-family: Montserrat;font-size: 16px;font-style: normal;font-weight: 400;line-height: 160%; /* 25.6px */letter-spacing: -0.16px; }
.integration-listing .flexy .right .features { padding-bottom:50px;}
.integration-listing .flexy .right .demo { padding-bottom:50px;}
.integration-listing .flexy .right .about { padding-bottom:50px;}
.integration-listing .flexy .right ul {list-style-type:disc;padding-left:15px;}
.integration-listing .flexy .right ul li {list-style-type:disc;padding:3px 0;}
.integration-listing .flexy .right ul li::marker { color:#56189e;}
.integration-listing .right .cards-outer { display:flex; align-items:center; flex-wrap:wrap; text-align:left;}
.integration-listing .right .cards-outer .cards-inner { transition:all 400ms ease; display:flex;align-items:center; width: calc(100% / 2 - 30px); margin:15px; padding:25px; border-radius: 16px;background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(0deg, #FAFAFA 0%, #FAFAFA 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;border-radius: 16px;border: 2px solid #E7E7E7;background: linear-gradient(0deg, #FFF 0%, #FFF 100%), linear-gradient(0deg, #FAFAFA 0%, #FAFAFA 100%), url(<path-to-image>) lightgray 50% / cover no-repeat;}
.integration-listing .right .cards-outer .cards-inner:hover { box-shadow: 0px 131px 37px 0px rgba(136, 136, 136, 0.00), 0px 84px 33px 0px rgba(136, 136, 136, 0.01), 0px 47px 28px 0px rgba(136, 136, 136, 0.05), 0px 21px 21px 0px rgba(136, 136, 136, 0.09), 0px 5px 11px 0px rgba(136, 136, 136, 0.10);}
.integration-listing .right .cards-outer .cards-inner .flexy { display:flex; align-items:center;flex-wrap:nowrap;}
.integration-listing .right .cards-outer .cards-inner .flexy .left { width:25%;}
.integration-listing .right .cards-outer .cards-inner .flexy .right { width:75%;}
.integration-listing .right .cards-outer .cards-inner .flexy .right .card-title { text-align:left; color: #212121;font-family: Montserrat;font-size: 24px;font-style: normal;font-weight: 700;line-height: 100%; /* 24px */padding-bottom:10px;}
.integration-listing .right .cards-outer .cards-inner .flexy .right .card-content { color: #212121;font-family: Montserrat;font-size: 16px;font-style: normal;font-weight: 400;line-height: 160%; /* 25.6px */  letter-spacing: -0.16px;}
.integration-listing .filter span {display:none;}


@media (max-width:1199px) {

}
@media (max-width:991px) {
  .integration-listing .flexy .left { width: 100%;}
  .integration-listing .flexy .right { width:100%; padding-top:25px;}
  .integration-listing .flexy .right .search-right { max-width:100%;}
  .integration-listing .flexy .right input {border-radius: 40px;background: #F6F6F6; }
  .integration-listing .right .cards-outer .cards-inner{ width:100%;margin-left:0; margin-right:0;}
  .integration-listing .filter span { text-align:center; display:inline-block; background-color: #fff; position: relative; display: inline-block; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); border-radius: 50px; width: 100%;/*width: 190px;*/ padding: 13px 25px; color: #272525; letter-spacing: 0.5px; font-size: 16px; text-transform: uppercase; cursor: pointer; padding-right: 40px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
  .integration-listing .filter { position: relative; width:100%; }
  .integration-listing .filter ul { position: absolute; top: calc(100% - 6px); left: 0; right: 0; z-index: 100; background-color: #fff; margin: 0; list-style: none; padding: 0; box-shadow: 0px 8px 12px rgb(0 0 0 / 10%); border-radius: 10px; max-height: 180px; overflow: auto; /* opacity: 0; visibility: hidden; */ }
  .integration-listing .filter ul li a { display: block; font-size: 15px; padding: 9px 15px; border-bottom: 1px solid #e4e4e4; color: #272525; }
  .integration-listing .filter ul li a:hover { background-color: #ce0000; color: #fff; }
  .integration-listing .filter span:before { content: '\f107'; position: absolute; top: 0; bottom: 0; right: 20px; font-family: 'fontawesome'; font-size: 25px; font-weight: 400; height: 22px; margin: auto; color: #E0E0E0; }
  .integration-listing .filter ul {width:100%!important; left:auto!important; right:auto!important;}
  .integration-listing .filter ul { display:none; overflow:auto!important; border-radius:25px!important; text-align:center;}
  /* .rooms-filter-wrapper .filter:hover ul { opacity: 1; visibility: visible; } */
  .integration-listing .flexy .left .categories .categories-title { padding-bottom:20px; width:100%; text-align:center;}
  .integration-listing .flexy .left .links .link-title { padding-bottom:20px; width:100%; text-align:center;}
}

@media (max-width:767px) {
}