.integrationListSection{background-color:#fff;width:100%;.container{display:flex;flex-direction:column;gap:80px;margin:0 auto;max-width:1439px;padding:150px 32px;width:100%;.top-content{display:flex;gap:24px;width:100%;.left-content{width:calc(31% - 24px);.desc{color:#141414;font-family:Manrope;font-size:"16px";font-style:normal;font-weight:500;line-height:150%;max-width:210px;.highlighted-text{color:#ef6445;font-weight:600}}}.right-content{width:67%;.section-title{color:#141414;font-family:Manrope;font-size:40px;font-style:normal;font-weight:550;letter-spacing:-1.2px;line-height:110%;max-width:560px}}}.main-content{display:flex;gap:24px;width:100%;.sticky-search-and-category-section{display:flex;flex-direction:column;gap:24px;height:fit-content;padding-right:24px;position:sticky;top:10%;width:calc(31% - 24px);.category{display:flex;flex-direction:column;gap:12px;width:100%;.category-item{cursor:pointer;display:flex;justify-content:space-between;width:100%;.category-name,.category-number{color:#858585;font-family:Manrope;font-size:18px;font-style:normal;font-weight:500;line-height:150%}&.active{.category-name,.category-number{color:#141414}}&:hover{.category-name,.category-number{color:#141414}}}}.search-section{display:flex;flex-direction:column;position:relative;width:100%;.search-input{align-items:center;border-bottom:1px solid #ccd2db;display:flex;gap:8px;padding:12px 0;width:100%;&:focus-within{border-bottom-color:#1075dc}.search-icon{align-items:center;display:flex;width:24px;svg{width:100%}}.search-field{width:calc(100% - 24px);input{background-color:transparent;border:none;color:#141414;font-family:Manrope;font-size:16px;font-style:normal;font-weight:600;line-height:150%;outline:none;width:100%;&::placeholder{color:#98a1b2}}}}.search-result{background-color:#fff;border:1px solid #e7e9ed;display:none;height:200px;overflow:scroll;padding:16px;position:absolute;top:55px;width:100%;z-index:2;.result-item{align-items:center;background:rgba(0,0,0,.05);border-radius:4px;cursor:pointer;display:flex;gap:24px;padding:12px;width:100%;.logo{height:48px;width:48px;img{border-radius:4px;height:100%;width:100%}}.name{color:#141414;font-family:Manrope;font-size:16px;font-style:normal;font-weight:600;line-height:150%}}&.active{display:flex;flex-direction:column;gap:16px}}}}.integration-list-section{border-left:1px solid #e7e9ed;border-right:1px solid #e7e9ed;display:flex;flex-direction:column;gap:80px;position:relative;width:67%;.integration-category-group{border-bottom:1px solid #e7e9ed;border-top:1px solid #e7e9ed;display:flex;flex-direction:column;gap:40px;padding:24px;width:100%;.group-info{display:flex;justify-content:space-between;justify-self:flex-end;width:100%;.group-number-and-name{display:flex;flex-direction:column;gap:16px;max-width:410px;width:50%;.group-number{align-items:center;display:flex;gap:8px;.dot{background-color:#ef6445;border-radius:24px;height:16px;width:16px}.number{color:#000;font-family:IBM Plex Mono;font-size:18px;font-style:normal;font-weight:500;line-height:130%;text-transform:uppercase}}.group-name{color:#141414;font-family:Manrope;font-size:24px;font-style:normal;font-weight:600;letter-spacing:-.24px;line-height:140%}}.group-desc{align-self:flex-end;color:#141414;font-family:Manrope;font-size:14px;font-style:normal;font-weight:400;line-height:160%;max-width:260px}}.integration-list{display:flex;flex-wrap:wrap;gap:40px 40px;width:100%;.integration-item{align-items:center;background:rgba(0,0,0,.05);border:2px solid transparent;border-radius:4px;display:flex;gap:24px;padding:16px;width:calc(33.33333% - 26.66667px);&.active{border:2px solid var(--Accent-Accent,#1075dc)}.logo{height:48px;width:48px;img{border-radius:4px;height:100%;width:100%}}.name{color:#141414;font-family:Manrope;font-size:16px;font-style:normal;font-weight:600;line-height:150%;width:calc(100% - 72px)}}}}&:before{left:-3px}&:after,&:before{background-color:#141414;content:"";height:7px;position:absolute;top:-3px;width:7px}&:after{right:-3px}.dot-bottom-left{left:-3px}.dot-bottom-left,.dot-bottom-right{background-color:#141414;bottom:-3px;content:"";height:7px;position:absolute;width:7px}.dot-bottom-right{right:-3px}}}}@media screen and (max-width:600px){.container{gap:56px;padding:56px 16px;.top-content{flex-direction:column;.left-content{width:100%;.desc{max-width:unset}}.right-content{width:100%;.section-title{font-size:32px}}}.main-content{flex-direction:column;.sticky-search-and-category-section{display:none}.integration-list-section{gap:48px;width:100%;.integration-category-group{gap:16px;padding:16px;.group-info{flex-direction:column;gap:16px;.group-number-and-name{gap:16px;width:100%;.group-name{font-size:20px}}.group-desc{align-self:flex-start;max-width:unset;width:100%}}.integration-list{flex-direction:column;gap:16px;.integration-item{width:100%}}}}}}}@media screen and (min-width:600px) and (max-width:1024px){.container{padding:80px 24px;.top-content{.left-content{.desc{font-size:14px;max-width:unset}}.right-content{.section-title{font-size:32px}}}.main-content{.sticky-search-and-category-section{display:none}.integration-list-section{gap:64px;width:100%;.integration-category-group{gap:24px;padding:16px;.group-info{.group-number-and-name{gap:16px;width:100%;.group-name{font-size:20px}}}.integration-list{gap:16px;.integration-item{gap:10px;padding:10px;width:calc(50% - 24px);.name{font-size:14px;width:calc(100% - 58px)}}}}}}}}}