.team-section { @media (max-width: 767px) { &.mt-110 { margin-top: 70px; } } } .wc-single-team { box-shadow: 0px 7px 55px rgba(9, 16, 20, 0.08); overflow: hidden; @media (max-width: 991px) { margin-bottom: 30px; } .wc-team-image { position: relative; } .wc-team-content { padding: 30px; @media screen and (max-width: 1024px) { padding: 30px; } .wc-team-title { font-size: 22px; @media screen and (max-width: 1024px) { font-size: 24px; } font-weight: 600; line-height: 1; margin-bottom: 0.6rem; a { color: var(--wc-heading-color); &:hover { color: var(--wc-secondary-color); } } } .wc-team-designation { font-size: 16px; @media screen and (max-width: 1024px) { font-size: 16px; } font-weight: 500; line-height: 1; color: var(--wc-primary-color); font-family: var(--wc-heading-font); margin: 0; } } .wc-team-social-bookmark { display: flex; align-items: center; justify-content: center; margin: 0; position: absolute; left: 50%; top: 50%; padding: 20px; background: var(--wc-primary-color); transform: translate(-50%, -30%); opacity: 0; visibility: hidden; transition: all 0.3s ease; width: auto; a { display: inline-block; } &.wc-bookmark-placement-right { flex-direction: column; padding: 30px 20px; left: auto; right: 0; transform: translate(100%, 30px); li { margin: 16px 0; } } li { margin: 0 18px; a { width: 25px; height: 25px; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--pure-white-color); &:hover { color: var(--wc-secondary-color); } } } } &:hover { .wc-team-social-bookmark { transform: translate(-50%, -50%); opacity: 1; visibility: visible; &.wc-bookmark-placement-right { transform: translate(0, -30px); } } } }