:root {
    --point-size: 40px;
}

/*Floating icon style 1*/
.mykodehub_social_media_icon_list_container_right,
.mykodehub_social_media_icon_list_container_left {
    position: fixed;
    top:50%;
    right: 0;
    transform: translate(0%,-50%);
    width: 55px;
}
.mykodehub_social_media_icon_list_container_left {
    right: inherit;
    left: 0;
}
.mykodehub_social_media_icon_list_container_right ul,
.mykodehub_social_media_icon_list_container_left ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    transform: translatex(-10px);
}
.mykodehub_social_media_icon_list_container_left ul {
    transform: translatex(-262px);
}
.mykodehub_social_media_icon_list_container_right ul li,
.mykodehub_social_media_icon_list_container_left ul li{
    display: block;
    margin: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    width: 300px;
    text-align: left;
    padding: 10px;
    border-radius: 30px 0px 0 30px;
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
    transition-property: background-color, transform !important;
}
.mykodehub_social_media_icon_list_container_left ul li {
    border-radius: 0 30px 30px 0;
}
.mykodehub_social_media_icon_list_container_right ul li:hover,
.mykodehub_social_media_icon_list_container_left ul li:hover {
    transform: translatex(-150px);
    transition: all 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
}
.mykodehub_social_media_icon_list_container_left ul li:hover {
    transform: translatex(150px);
}
.mykodehub_social_media_icon_list_container_right ul li a,
.mykodehub_social_media_icon_list_container_left ul li a {
    color: white;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}
.mykodehub_social_media_icon_list_container_left ul li a {
    justify-content: end;
}
.mykodehub_social_media_icon_list_container_right ul li:hover .mykodehub_icon{
    transform: rotate(-360deg);
    transition: transform 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
}
.mykodehub_social_media_icon_list_container_left ul li:hover .mykodehub_icon {
    transform: rotate(360deg);
    transition: transform 1s;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -o-transition: all 1s;
    -ms-transition: all 1s;
}

.mykodehub_social_media_icon_list_container_right ul li .mykodehub_icon,
.mykodehub_social_media_icon_list_container_left ul li .mykodehub_icon {
    margin-left: 10px;
    color: #000;
    background: white;
    padding: 10px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    transform: rotate(0deg);
    text-align: center;
    font-size: 20px;
    transition: transform 1s;
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -o-transition: transform 1s;
    -ms-transition: transform 1s;
    display: flex;
    align-items: center;
    justify-content: center
}
.mykodehub_social_media_icon_list_container_left ul li .mykodehub_icon {
    margin-left: inherit;
    margin-right: 10px;
}

/* Social icon style two  */
.mykodehub_radial .mykodehub_triggerButton {
    position: absolute;
    z-index: 99;
    left: 50%;
    top: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    border: none;
    color: #fff;
    font-size: 20px;
    border-radius: 50%;
    text-decoration: none;
    background-color: #4b40cc;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 4px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease-in-out;
    transform: translate(-50%, -50%);
}
.mykodehub_radial .mykodehub_triggerButton .mykodehub_btn_icon {
    transition: all 0.2s ease-in-out;
    display: flex;
}
.mykodehub_radial .mykodehub_radialMenu {
    --width: 200px;
    width: var(--width);
    height: var(--width);
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 0;
    margin: 0;
    transform: translate(-50%, -50%);
}
.mykodehub_radial .mykodehub_radialItem {
    list-style: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--point-size);
    height: var(--point-size);
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}
.mykodehub_radial .mykodehub_radialItem a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #fff;
    border-radius: 50%;
    background-color: #232e50;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 4px 8px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    transition: 0.25s;
}
.mykodehub_radial .mykodehub_radialItem a:hover {
    transition-delay: 0s;
    background-color: #1b243e;
}
.mykodehub_radial.active .mykodehub_triggerButton .mykodehub_btn_icon {
    transform: rotateZ(135deg);
}
.mykodehub_radial.active .mykodehub_radialItem {
    --angle: 0deg;
    --star-angle: 0deg;
    --countItem: 8;
    /* we subtract the point size to place point inside circle */
    --radius: calc((var(--width) / 2) - (var(--point-size) / 2));
    --x: calc(var(--radius) * cos(var(--angle) + var(--star-angle)));
    --y: calc(var(--radius) * sin(var(--angle) + var(--star-angle)));
    /* position point at center of circle with radius. We add x and y values to move to edge of circle. */
    top: calc(var(--radius) + var(--y) + (var(--point-size) / 2));
    left: calc(var(--radius) + var(--x) + (var(--point-size) / 2));
/*    width: var(--point-size);*/
/*    height: var(--point-size);*/
}
.mykodehub_radial {
    position: fixed;
    z-index: 99;
}
.mykodehub_radial.right_quarter {
    left: 100px;
    bottom: 100px;
}
.mykodehub_radial.left_quarter {
    right: 100px;
    bottom: 100px;
}
.mykodehub_radial .mykodehub_social_icon_2 i {
    font-size: 16px;
    color: #fff;
}
.mykodehub_radial .mykodehub_social_icon_2 {
    display: flex;
    align-items: center;
    justify-content: center;
}
.mykodehub_radial .mykodehub_social_icon_2 svg,.mykodehub_radial .mykodehub_triggerButton .mykodehub_btn_icon svg{
    width: 16px;
    height: 16px;
    fill: #fff;
}
.mykodehub_radial.right_quarter.active .mykodehub_radialItem {
    --angle: 0deg;
    --star-angle: 270deg;
    --countItem: 8;
/*    width: var(--point-size);*/
/*    height: var(--point-size);*/
}
.mykodehub_radial.right_quarter.active .mykodehub_radialItem:nth-child(1) {
    --angle: calc((360deg / var(--countItem)) * 0);
    transition-delay: 0.05s;
}
.mykodehub_radial.right_quarter.active .mykodehub_radialItem:nth-child(2) {
    --angle: calc((360deg / var(--countItem)) * 1);
    transition-delay: 0.1s;
}
.mykodehub_radial.right_quarter.active .mykodehub_radialItem:nth-child(3) {
    --angle: calc((360deg / var(--countItem)) * 2);
    transition-delay: 0.15s;
}
.mykodehub_radial.right_quarter.active .mykodehub_radialItem:nth-child(4) {
    --angle: calc((360deg / var(--countItem)) * 3);
    transition-delay: 0.2s;
}
.mykodehub_radial.right_quarter .mykodehub_triggerButton {
/*    background-image: linear-gradient(-45deg, #009245, #d9e021);*/
}
.mykodehub_radial .mykodehub_radialItem a {
    transform: scale(1.1);
    background: #6009f0;
/*    background-image: linear-gradient(135deg, #25aae1, #2bb673);*/
}
.mykodehub_radial .mykodehub_radialItem a:hover {
    transform: scale(0.8);
}
.mykodehub_chat-bubble {
    cursor: pointer;
    position: relative;
}
.mykodehub_chat-bubble .mykodehub_bubble {
    transition: transform 500ms cubic-bezier(0.17, 0.61, 0.54, 0.9);
    transform-origin: 50%;
}
.mykodehub_chat-bubble .line {
    fill: none;
    stroke: #ffffff;
    stroke-width: 2.75;
    stroke-linecap: round;
    transition: stroke-dashoffset 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mykodehub_chat-bubble .mykodehub_circle {
    fill: #ffffff;
    stroke: none;
    transform-origin: 50%;
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.mykodehub_chat-bubble .line1 {
    stroke-dasharray: 60 90;
    stroke-dashoffset: -20;
}
.mykodehub_chat-bubble .line2 {
    stroke-dasharray: 67 87;
    stroke-dashoffset: -18;
}
.mykodehub_radial.active .mykodehub_bubble {
    transform: translateX(24px) translateY(4px) rotate(45deg);
}
.mykodehub_radial.active .line1 {
    stroke-dashoffset: 21;
}
.mykodehub_radial.active .line2 {
    stroke-dashoffset: 30;
}
.mykodehub_radial.active .mykodehub_circle {
    transform: scale(0);
}
.mykodehub_radial.left_quarter.active .mykodehub_radialItem {
    --angle: 0deg;
    --star-angle: 180deg;
    --countItem: 8;
    width: var(--point-size);
    height: var(--point-size);
}
.mykodehub_radial.left_quarter.active .mykodehub_radialItem:nth-child(1) {
    --angle: calc((360deg / var(--countItem)) * -1);
    transition-delay: 0.05s;
}
.mykodehub_radial.left_quarter.active .mykodehub_radialItem:nth-child(2) {
    --angle: calc((360deg / var(--countItem)) * 0);
    transition-delay: 0.1s;
}
.mykodehub_radial.left_quarter.active .mykodehub_radialItem:nth-child(3) {
    --angle: calc((360deg / var(--countItem)) * 1);
    transition-delay: 0.15s;
}
.mykodehub_radial.left_quarter.active .mykodehub_radialItem:nth-child(4) {
    --angle: calc((360deg / var(--countItem)) * 2);
    transition-delay: 0.20s;
}

@media screen and (max-width: 991px) {
    /* Varient 1 */
    .ea-hover-tabs {
        display: inherit;
    }
    .ea-hover-tab.tab-active::after {
        display: none;
    }
    /* Varient 2 */
    .ea-hover-tabs-varient-2 .ea-hover-col-image {
        display: none;
    }
    /* Image Accordion */ 
    .mykodehub-image-accordion-col-image {
        align-self: center;
    }
    .mykodehub-image-accordion {
        grid-template-columns: 40% 57%;
        justify-content: center;
    }
}
@media screen and (max-width: 767px) {
    /* Varient 1 */
    .ea-hover-tabs-varient-1 .ea-hover-tab-header {
        gap: 10px;
    }
    .ea-hover-tab-footer {
        margin-top: 15px;
    }
    .ea-hover-tab-header p {
        width: 80px;
        text-align: center;
    }

    /* Image Accordion */ 
    .mykodehub-image-accordion {
        display: inherit;
    }
    .mykodehub-image-accordion-col-image {
        display: none;
    }

    /* Accordion */
    .mykodehub-accordion-item-body {
        margin: 10px 0 10px 0;
    }
    .mykodehub-accordion-item-header-icon::before, .mykodehub-accordion-item-header-icon::after {
        border-width: 9px;
        left: -7px;
    }
    .mykodehub-accordion-item-header-icon::after {
        left: -2px;
    }

}