/* Google Fonts Import Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

.stp0 {
    position: inherit;
    padding-top: 10px;
}

.sidebar {
    /*margin-right: -25px;
    margin-left: -40px;*/
    background-color: #1a181099;
    height: 540px;
    width: 260px;
    z-index: 100;
    transition: all 0.5s ease;
    align-self: auto;
    border-radius: 25%;
    margin-bottom: 50px;
}

.circle-palette {
    margin-top: 15px;
    margin-left: 15px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: inline-block;
}

    .sidebar.close {
        width: 107px;
    }

.sidebar-right.close {
    
}
.sidebar .right-nav{padding: 40px 0 50px 0 !important}
.sidebar .nav-links {
    height: 100%;
    padding: 0px 0px 0px 0px;
    overflow: auto;
}
.outfit-palette {
    position: relative;
    padding: 0px 0px 0px 0px !important;
    column-count: 2 !important;
    column-gap: 10px !important;
}
.outfit-palette .noHover {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

.outfit-palette ul{
    display: grid;
    transform: translateX(-15px);
}
.outfit-palette ul li{
    margin-top: -10px;
}

.outfit-palette button{
    margin-bottom: -40px;
}

.color-palette {
    text-align:center;
    
}
.sidebar.close .nav-links {
    overflow: visible;
}

.eye-zoom {
    overflow: hidden;
    display: inline-block;
}

    .eye-zoom img {
        transform: scale(1); /* Adjust the scale value to zoom in or out */
        margin: -50%; /* Adjust the margin value based on the scale */
    }

.mouth-zoom {
    overflow: hidden;
    display: inline-block;
}

    .mouth-zoom img {
        transform: scale(3.2); /* Adjust the scale value to zoom in or out */
        margin-top: -100%; /* Adjust the margin value based on the scale */
        margin-bottom: 80%;
        margin-left: -20%;
        margin-right: -20%;
    }


.stickers-palette ul{
    margin-top: 20px;
}
.stickers-palette button{
    margin-top: -40px;
}
.sticker-zoom {
    overflow: hidden;
    display: inline-block;
    transform: translateX(30%);
    
}

    .sticker-zoom img {
        transform: scale(2.5);
        transition: transform 2.0s ease-out;
        /* Specify that the scaling should happen from the top-left corner */
        transform-origin: top left;
        margin-bottom: -25%;
        
    }

    .sidebar .nav-links::-webkit-scrollbar {
        display: none;
    }

.sidebar-right .nav-links li {
    padding: 0px !important;
    break-inside: avoid-column !important;
    margin-bottom: 20px !important;
}
.sidebar .nav-links li {
    position: relative;
    list-style: none;
    transition: all 0.4s ease;
    padding: 17px;
}

        .sidebar .nav-links li:hover {
            background: #276129;
            border-radius: 40px;
        }

        .sidebar .nav-links li .iocn-link {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

    .sidebar.close .nav-links li .iocn-link {
        display: block
    }

    .sidebar .nav-links li i {
        height: 70px;
        min-width: 78px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
.img-outfit {
    margin-bottom: 20%; /* Shift the image up from bottom */
    scale: calc(1.3);
    margin-left: 30%;
    width: 50px !important;
    height: 150px;                  /* half height */
    object-fit: cover;
    object-position: bottom;
}

.outfit-palette  .img-outfit {
    scale: calc(0.7);
    margin-left: 10%;
    height: 220px;                  /* half height */
    width: 130px !important;
}


.sidebar .nav-links li.showMenu i.arrow {
    transform: rotate(-180deg);
}

    .sidebar.close .nav-links i.arrow {
        display: none;
    }

    .sidebar .nav-links li a {
        display: flex;
        align-items: center;
        text-decoration: none;
    }

        .sidebar .nav-links li a .link_name {
            font-size: 18px;
            font-weight: 400;
            color: #fff;
            transition: all 0.4s ease;
        }

    .sidebar.close .nav-links li a .link_name {
        opacity: 0;
        pointer-events: none;
    }

    .sidebar .nav-links li .sub-menu {
        padding: 6px 6px 14px 80px;
        margin-top: -10px;
        background: #98958799;
        display: none;
    }
    
    .sidebar .nav-links li .sub-menu > li > a > span {
        width: 50px !important;
        height: 50px !important;
    }

    .sidebar .nav-links li.showMenu .sub-menu {
        display: block;
    }

    .sidebar .nav-links li .sub-menu a {
        color: #fff;
        font-size: 15px;
        padding: 5px 0;
        white-space: nowrap;
        opacity: 0.6;
        transition: all 0.3s ease;
    }

        .sidebar .nav-links li .sub-menu a:hover {
            opacity: 1;
        }

.sidebar.close .nav-links li .sub-menu {
    position: absolute;
    left: 100%;
    top: -10px;
    margin-top: 0;
    padding: 10px 20px;
    border-radius: 0 6px 6px 0;
    opacity: 0;
    display: inline-flex;
    pointer-events: none;
    transition: 0s;
}

    .sidebar.close .nav-links li:hover .sub-menu {
        top: 0;
        opacity: 1;
        pointer-events: auto;
        transition: all 0.4s ease;
    }

.sidebar-right.close .nav-links li .sub-menu {
    /* push sub-menu to the LEFT of its parent */
    left: auto; /* override “left: 100%” from base rule          */
    right: 100%; /* new position                                 */
    border-radius: 6px 0 0 6px; /* round opposite corners                 */
}

/* Optional: add a small “tail” effect when hovering, like the left bar */
/*
.sidebar-right.close .nav-links li:hover .sub-menu {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
}
*/
.sidebar.close .nav-links li.showMenu .sub-menu {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
    display: inline-flex;
}

.sidebar-right.close .nav-links li.showMenu .sub-menu {
    top: 0;
    opacity: 1;
    pointer-events: auto;
    transition: all 0.4s ease;
    display: inline-flex;
}

/* Keep the hover effect for the li background color */
.sidebar .nav-links li:hover {
    background: #276129;
    border-radius: 40px;
}

/* Optional: Add a visual indicator when menu is open 
.sidebar .nav-links li.showMenu {
    background: #276129;
    border-radius: 40px;
}

/* Optional: Change cursor to pointer for clickable items */
.sidebar .nav-links li .iocn-link {
    cursor: pointer;
}


    .sidebar .nav-links li .sub-menu .link_name {
        display: none;
    }

    .sidebar.close .nav-links li .sub-menu .link_name {
        font-size: 18px;
        opacity: 1;
        display: block;
        padding-block: inherit;
    }

    .sidebar .nav-links li .sub-menu.blank {
        opacity: 1;
        pointer-events: auto;
        padding: 3px 20px 6px 16px;
        opacity: 0;
        pointer-events: none;
    }

    .sidebar .nav-links li:hover .sub-menu.blank {
        top: 50%;
        transform: translateY(-50%);
    }


.home-section {
    position: relative;
    left: 260px;
    top:-70px;

    width: calc(100% - 260px);
    transition: all 0.5s ease;
    display: flex;
    flex: 1;
    justify-content: center;
}

#home-background {
    top: -90px;

    width: calc(100% - 260px);
    transition: all 0.5s ease;

    background-size: 100% 100%;  /* Stretch the image to fill the container */
    background-repeat: no-repeat;
    background-position: center center; /* Center the image */
    
    /* Optional, for visual effect */
    transform: translateY(50px); 
    
    /* Set a fixed height for the section */
    height: 555px;
    background-color: white;
}

.home-section  img {
    height: 450px;

    padding-top: 20px;
}

.sidebar.close ~ .home-section {
    left: 0px;
    width: calc(100% - 78px);
}

.home-section .home-content {

    display: inline-block;
    align-items: center;
}

    .home-section .home-content .bx-menu,
    .home-section .home-content .text {
        color: #11101d;
        font-size: 35px;
    }

    .home-section .home-content .bx-menu {
        margin: 0 15px;
        cursor: pointer;
    }

    .home-section .home-content .text {
        font-size: 26px;
        font-weight: 600;
    }

@media (max-width: 400px) {
    .sidebar.close .nav-links li .sub-menu {
        display: none;
    }

    .sidebar {
        width: 78px;
    }

        .sidebar.close {
            width: 0;
        }

    .home-section {
        left: 78px;
        width: calc(100% - 78px);
        z-index: 100;
    }

    .sidebar.close ~ .home-section {
        width: 100%;
        left: 0;
    }
}



img.zoom-center {
     /* Adjust zoom level (e.g., 2 for 2x zoom) */
    --x: 50%; /* X center */
    --y: 0%; /* Y center */
    width: 70px; /* Your desired display size */
    height: 55px;
    object-fit: cover;
    transform: scale(1.9);
    transform-origin: var(--x) var(--y);
    clip-path: inset( calc((1 - 1/var(--zoom)) * (var(--y))) calc((1 - 1/var(--zoom)) * (100% - var(--x))) calc((1 - 1/var(--zoom)) * (100% - var(--y))) calc((1 - 1/var(--zoom)) * (var(--x))) );
}

img.zoom-center-mouth {
     /* Adjust zoom level (e.g., 2 for 2x zoom) */
    --x: 45%; /* X center */
    --y: 50%; /* Y center */
    width: 720px; /* Your desired display size */
    height: 140px;
    object-fit: cover;
    transform-origin: var(--x) var(--y);
    clip-path: inset( calc((1 - 1/var(--zoom)) * (var(--y))) calc((1 - 1/var(--zoom)) * (100% - var(--x))) calc((1 - 1/var(--zoom)) * (100% - var(--y))) calc((1 - 1/var(--zoom)) * (var(--x))) );

}
.noHover:hover {
    background: none !important;
}


#next_button_main_screen {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    position: relative;
    top: -20px;
    right: 20px;
  }

#next_button_main_screen img {
    width: 140px;
    
}

.hair-palette-youself{
    position: relative;
    padding: 0px 0px 0px 0px !important;
    column-count: 2 !important;
    column-gap: 10px !important;
    width: 220px !important;
    display: flex;
}

.mouth-zoom {
    margin-top: 40px !important;
}

.mouth-palette{
    position: relative;
    padding: 0px 0px 0px 0px !important;
    column-count: 2 !important;
    column-gap: 10px !important;
    width: 180px !important;
    display: flex;
}

.mouth-palette li.noHover {
    margin-top: 25px !important;
}
.mouth-palette #next_button_main_screen {
    transform: translateY(50px);
    transform: translateX(-40px);
}

.hair-palette-youself > ul {
    margin-top: 40px !important;
}


.hair-palette .nav-links .link_name{
    padding: 20px 0px 10px 20px !important;
    width: 1230px !important;
}


#scientist-avatar-svg-object{
    margin-top: -35px;
}



#collaborator-avatar-svg-object{
    transform: translateY(-33px);
    margin-left: 100px !important;
}


#first_scientist{
    display: flex;
    width: 340px;
    transform: translateY(-33px);
    margin-left: 100px !important;
}