.social-platforms {
    margin-top: 36px;
    margin-bottom: 10px;
    display: flex;
    background-color: #74747413;
    border-radius: 20px;
    padding: 15px;
    backdrop-filter: blur(2px2);
}

.sp-btn {
    background: aliceblue;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin: 0 16px 0 8px;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.sp-btn .sp-img {
    background: #343434;
    padding: 5px 8px;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    position: relative;
    justify-content: center;
    align-items: center;
    position: relative;
    left: -8px;
    z-index: 10;
    box-shadow: none;
    transition: all 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.sp-btn .sp-img img {
    width: 22px;
    height: 22px;
    position: relative;
    top: 0px;
    margin: 3px 0;
}

.sp-btn .sp-img::before {
    content: "";
    width: 10px;
    height: 10px;
    background-color: inherit;
    transform: translate(50%, -50%) rotate(45deg);
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
}

.sp-btn p {
    padding: 0 12px 0 10px;
    font-size: 1.1vw;
    display: flex;
    color: #000;
    transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.sp-btn:hover .sp-img {
    background: #2a2a2a;
}

.leetcode:hover .sp-img {
    box-shadow: rgb(255, 189, 67, 0.75) 0px 25px 20px -12px;
}

.leetcode:hover {
    background: #e7a41f;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
        rgba(0, 0, 0, 0.3) 0px 8px 16px -8px, -10px -10px 40px #ff700361 inset;
}

.leetcode:hover p {
    color: #312e3b;
}

.github:hover .sp-img {
    box-shadow: rgba(239, 177, 255, 0.75) 0px 20px 20px -12px;
}

.github:hover {
    background: #6e5494;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
        rgba(0, 0, 0, 0.3) 0px 8px 16px -8px, -10px -10px 40px #7003ff61 inset;
}

.github:hover p {
    color: #fff;
}

/* Download Button  */

.download-resume {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(155deg, #0ba24f, #212121);
    /* background: #0ba24f; */
    padding: 0 12px;
    margin-left: 40px;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.d-icons {
    position: relative;
    background-color: #fff;
    width: 22px;
    height: 22px;
    margin: 6px 0;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.d-icons .icons {
    position: absolute;
    top: 162%;
    left: 54%;
    transform: translate(-50%, -50%);
    transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.download-resume:hover {
    box-shadow: 10px 10px 40px #0000007b inset, rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.download-resume:hover .d-icons {
    background-color: #c5ffdf;
}

.download-resume:hover .icons {
    top: -50%;
}

.d-content {
    padding: 0 4px 0 14px;
    color: #fff;
    font-size: 1.1vw;
}