/* Social */
.social { margin: 30px 0; position: relative; }
.social .center { position: relative; height: 100px; overflow-y: hidden; }

.social .arrow { position: absolute; display: none; visibility: hidden; top: 18px; width: 24px; height: 24px; padding: 16px; border-radius: 12px; background-color: white; background-image: url('https://well-home.com.ua/images/ico/arrow-left.svg'); background-repeat: no-repeat; background-position: center center; background-size: 20px 20px; -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px); cursor: pointer; transition: .4s easy-out; z-index: 2; }
.social:hover .arrow {  display: inline; visibility: visible; }
.social .arrow:hover { background-size: 24px 24px; }
.social .arrow.arrow-left { left: 5px; box-shadow: 0px 3px 12px -5px rgba(0,0,0,.3); }
.social .arrow.arrow-right { right: 5px; transform: rotate(180deg); box-shadow: 0px -3px 12px -5px rgba(0,0,0,.3); }

.social .card-wrap { display: flex; gap: 8px; min-width: 100%; min-height: 265px; overflow-x: auto; overflow-y: hidden; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; }
.social .card { position: relative; flex-shrink: 0; width: 170px; height: 50px; padding: 20px; border-radius: 18px; background-color: #F6F6F6; color: var(--darkblue); user-select: none; }
.social .card div { position: absolute; left: 80px; width: 90px; height: 50px; display: flex; flex-direction: column; justify-content: center; }
.social .card:before { content: ''; position: absolute; width: 24px; height: 24px; right: 12px; bottom: 12px; background-image: url('https://well-home.com.ua/images/ico/arrow-left.svg'); transform: rotate(180deg); background-repeat: no-repeat; background-position: center center; background-size: 100% 100%; cursor: pointer; transition: .2s ease-out; }
.social .card.dark { background-color: var(--darkblue); color: white; }
.social .card.dark:before { background-image: url('https://well-home.com.ua/images/ico/arrow-left-white.svg'); }
.social .card:hover:before { right: 8px; }
.social .card:first-child { margin-left: 20px; }
.social .card:last-child { margin-right: 20px; }

.social .card .avatar { position: absolute; width: 46px; height: 46px; top: 50%; margin-top: -23px; left: 20px; border-radius: 23px; }
.social .card .name { font-size: 14px; font-weight: bold; }
.social .card .description { font-size: 13px; color: var(--softblue); }

@media screen and (max-width: 1400px) {
.social .center { width: calc(100% + 40px); margin-left: -20px; }
}