/* Social Icons - Simplified Circular Layout */

/* Define the radius of the circle */
:root {
    --icon-radius: 180px;
    --icon-size: 75px;
}

.social-menu {
    margin: 0;
    padding: 0;
}

/* Simplified circular container */
.social-icons {
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    position: relative;
    width: 360px;
    height: 360px;
}

/* Style for individual list items */
.social-icons li {
    position: absolute;
    width: var(--icon-size);
    height: var(--icon-size);
}

/* Style for the icon links (the white circles) */
.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--icon-size);
    height: var(--icon-size);
    background: #ffffff;
    color: #333;
    border-radius: 50%;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    pointer-events: auto;
}

.social-icons a i {
    font-size: 1.2rem;
}

/* Brand-specific hover colors for circular social icons */

/* Facebook */
.social-icons li:nth-child(1) a:hover {
    background: #1877f2 !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

/* LinkedIn */
.social-icons li:nth-child(2) a:hover {
    background: #0077b5 !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

/* GitHub */
.social-icons li:nth-child(3) a:hover {
    background: #333333 !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

/* Stack Overflow */
.social-icons li:nth-child(4) a:hover {
    background: #f48024 !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

/* Twitter */
.social-icons li:nth-child(5) a:hover {
    background: #1da1f2 !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

/* Instagram */
.social-icons li:nth-child(6) a:hover {
    background: linear-gradient(45deg,
            #f09433 0%,
            #e6683c 25%,
            #dc2743 50%,
            #cc2366 75%,
            #bc1888 100%) !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

/* YouTube */
.social-icons li:nth-child(7) a:hover {
    background: #ff0000 !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

/* MakersWorld */
.social-icons li:nth-child(8) a:hover {
    background: #00ae42 !important;
    color: #ffffff !important;
    transform: scale(1.1);
}

/* Simplified circular positioning using CSS transforms */
.main-social-circle .social-icons li:nth-child(1) {
    transform: translate(0, -193px);
}

.main-social-circle .social-icons li:nth-child(2) {
    transform: translate(127px, -140px);
}

.main-social-circle .social-icons li:nth-child(3) {
    transform: translate(180px, -13px);
}

.main-social-circle .social-icons li:nth-child(4) {
    transform: translate(127px, 114px);
}

.main-social-circle .social-icons li:nth-child(5) {
    transform: translate(0, 177px);
}

.main-social-circle .social-icons li:nth-child(6) {
    transform: translate(-127px, 114px);
}

.main-social-circle .social-icons li:nth-child(7) {
    transform: translate(-180px, -13px);
}

.main-social-circle .social-icons li:nth-child(8) {
    transform: translate(-127px, -140px);
}

/* END of social-icons.css */