@charset "utf-8";
.works__img--item{
    filter: drop-shadow(0 1px 3px #848484);
}
.veiwButton__group{
    width: 100%;
    /* justify-content: flex-end; */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin: 64px 0 1.9167vh;
    gap: 32px;
}
.veiwButton__tiktok{
    position: relative;
    width: 230px;
    height: 60px;
    /* background-color: #ff7bbb; */
    border-radius: 500px;
    font-size: 1.6rem;
    border: solid 1px var(--primary-black);
}
.veiwButton__youtube{
    position: relative;
    width: 230px;
    height: 60px;
    /* background-color: #ff7bbb; */
    border-radius: 500px;
    font-size: 1.6rem;
    /* margin-right: 40px; */
    border: solid 1px var(--primary-black);
}
.veiwButton__text{
    padding: 4px 0;
    display: block;
    position: absolute;
    z-index: 100;
    top: 50%;
    left: 24px;
    transform: translate(0%,-50%);
    /* background-color: var(--primary-white); */
    font-size: 1.6rem;
}
.works__img--container{
    position: relative;
    height: 100vh;
    width: 100%;
}
.veiwButton__arrow{
    width: 8px;
    height: 8px;
    border-bottom: solid 2px var(--primary-black);
    border-right: solid 2px var(--primary-black);
    transform: rotate(-45deg);
    margin-right: 4px;
}
.veiwButton__circle{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    right: 6px;
    transform: translate(0%,-50%);
    width: 50px;
    height: 50px;
    /* border: solid 1px var(--primary-black); */
    /* border: solid 1px green; */
    /* background-color: var(--primary-black); */
    background: linear-gradient(-45deg, #dedede, #FDFDFD);
    border-radius: 500px;
    transition: 0.4s;
}
.veiwButton__youtube:hover .veiwButton__circle{
   opacity: 0.2;
}
.veiwButton__tiktok:hover .veiwButton__circle{
   opacity: 0.2;
}
.sticky--container--below{
    
}
.showcaseContainer__video{
    position: relative;
}
.works__mockUp--tiktok{
    position: absolute;
    width: 41%;
    left: 12%;
    top: 14%;
}
.works__mockUp--youtube{
    position: absolute;
    width: 55%;
    right: 13%;
    top: 20%;
}

@media screen and (max-width:1000px) {
    .works__mockUp--container {
        height: 88vh;
    }
    .copy{
        /* display: none; */
    }
    .veiwButton__group{
        width: 96%;
        position: fixed;
        align-items: flex-end;
        top:60%;
        gap: 16px;
    }
    .veiwButton__tiktok{
        width: 190px;
        height: 50px;
        transform: none;
    }
    .veiwButton__youtube{
        width: 190px;
        height: 50px;
    }
    .veiwButton__arrow{
        width: 8px;
        height: 8px;
        border-bottom: solid 2px var(--primary-black);
        border-right: solid 2px var(--primary-black);
        transform: rotate(-45deg);
        margin-right: 4px;
    }
    .veiwButton__circle{
        width: 40px;
        height: 40px;
        right: 4px;
    }
        .veiwButton__youtube:hover .veiwButton__circle{
        opacity: 1;
    }
        .veiwButton__tiktok:hover .veiwButton__circle{
        opacity: 1;
    }
        .veiwButton__text{
        left: 20px;
        font-size: 1.4rem;
    }
        .works__mockUp--youtube{
        position: absolute;
        width: 71%;
        right: 0%;
        top: 20%;
    }
        .works__mockUp--tiktok{
        position: absolute;
        width: 80%;
        left: -14%;
        top: 35%;
    }
}