:root {
    --sin30: calc(1/2);
    --sin45: calc(sqrt(2) / 2);
    --sin60: calc(sqrt(3) / 2);

    --cos30: calc(sqrt(3) / 2);
    --cos45: calc(sqrt(2) / 2);
    --cos60: calc(1/2);

    --tan30: calc(sqrt(3) / 3);
    --tan45: 1;
    --tan60: calc(sqrt(3));
}

.services-header {
    position: relative;
    min-height: calc(100vh - (var(--navbar-height)));
}

#dropCanvas {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

.wwd {
    display: flex;
    flex-direction: column;
}

.wwd span {
    display: flex;
    align-items: center;
    color: var(--text-white);
    font-size: clamp(1rem, calc(1.5vw + 0.01rem), 1.5rem);
    font-weight: 100;
    margin-bottom: 2rem;
}

.wwd span::before {
    display: inline-block;
    content: '';
    width: 16px;
    height: 16px;
    border-radius: 999px;
    margin-right: 12px;
    background: var(--primary-color);
}

.wwd-detail {
    width: 100%;
    display: flex;
    /* flex: 1; */
    justify-content: flex-end;
    align-items: flex-end;
    /* height: 100%; */
    height: 50vh;
    /* position: absolute; */
    bottom: 5%;
    right: 5%;
}

.wwd-detail span {
    position: relative;
    width: 50%;
}

.wwd-detail span > p {
    color: var(--text-white);
    
    font-size: clamp(0.75rem, calc(1.325vw + 0.01rem), 1.325rem);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.wwd-detail span::before {
    --width: max(12px, 2.35vw);
    position: absolute;
    content: '';
    display: block;
    width: var(--width);
    height: auto;
    aspect-ratio: 1 / 5.625;
    /* transform: rotateZ(30deg); */
    background: var(--white);
    /* translate: 0 calc((var(--sin30) * var(--width)) * (-1)); */
    /* translate: 0 calc((var(--sin60) * var(--width)) * (-1)); */
    translate: 0 0;
    transform: rotateZ(60deg);
    left: calc(((var(--cos30) * (var(--width) * (-5.625))) / 2 ) + (((var(--width) * var(--tan60) * (-1)) / var(--tan60))) / 1);
    top: calc((var(--width) * (-1)) * var(--tan60));
    animation: translateTopToDefault 3s cubic-bezier(0.55, 0.37, 0.63, 0.83) 1 2s;
}

/* .wwd-detail p::before {
    --width: max(20px, 2.35vw);

    content: '';
    position: absolute;
    right: calc(100% - 8px);
    bottom: 0;

    width: var(--width);
    aspect-ratio: 1 / 5.625;
    background: var(--white);

    transform-origin: bottom center;
    transform: rotate(30deg);

    animation: dropBounce 1.6s cubic-bezier(.19,1,.22,1) forwards;
}

/* canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: calc(100vh - var(--navbar-height));
} */

/* @keyframes translateTopToDefault {
    from {translate: 0 -100vh;}
    to {translate: 0 0;}
} */

@keyframes translateTopToDefault {
    0% {
        translate: 0 -100vh;
        transform: rotateZ(30deg);
        left: calc(((var(--cos30) * (var(--width) * (-5.625))) / 2 ) + (((var(--width) * (1)) / var(--tan30))) / 2);
        top: calc(var(--width) * (-2));
    }

    50% {
        translate: 0 calc((var(--sin30) * var(--width)) * (-1));
        transform: rotateZ(30deg);
        left: calc(((var(--cos30) * (var(--width) * (-5.625))) / 2 ) + (((var(--width) * (1)) / var(--tan30))) / 2);
        top: calc(var(--width) * (-2));
        
    }
    /* 70% {
        translate: 0 calc((var(--sin45) * var(--width)) * (-1));
        transform: rotateZ(45deg);
        left: calc(((var(--cos45) * (var(--width) * (-5.625))) / 2 ) + (((var(--width) * (1)) / var(--tan45))) / 2);
        top: calc(var(--width) * (-2));
        
    } */
    100% {
        translate: 0 0;
        transform: rotateZ(60deg);
        left: calc(((var(--cos30) * (var(--width) * (-5.625))) / 2 ) + (((var(--width) * var(--tan60) * (-1)) / var(--tan60))) / 1);
        top: calc((var(--width) * (-1)) * var(--tan60));
    }
}

@keyframes dropBounce {
    0% {
        transform: translateY(-120vh) rotate(0deg);
    }
    60% {
        transform: translateY(0) rotate(30deg);
    }
    75% {
        transform: translateY(-24px) rotate(26deg);
    }
    90% {
        transform: translateY(0) rotate(32deg);
    }
    100% {
        transform: translateY(0) rotate(30deg);
    }
}

.webdesign {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
}

.webdesign-filter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    margin-block: 2rem;
    position: relative;
}

.webdesign-filter button {
    position: relative;
    z-index: 2;
    background: transparent;
    border: none;
    font-size: clamp(0.75rem, calc(1.25vw + 0.01rem), 1.25rem);
    color: var(--text-white);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 200;
    cursor: pointer;
    white-space: nowrap;
    text-wrap: nowrap;
}

.filter-indicator {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--primary-color);
    border-radius: 999px;
    z-index: 1;
    transition:
        transform 0.6s cubic-bezier(0.19, 1, 0.22, 1),
        width 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* .banner-webdesign-warpper {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
} */

.banner-webdesign-warpper {
    position: relative;
    overflow-x: hidden;
    overflow-y: hidden;
    scrollbar-width: none;
    touch-action: pan-x;
    scroll-snap-type: x mandatory;
    clip-path: polygon(0px 0px, 350% 0px, 350% 100%, 0px 100%);
    transition: clip-path 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}


.banner-webdesign-warpper::-webkit-scrollbar {
    display: none;
}
/* 
.banner-webdesign-warpper.is-closed {
    clip-path: polygon(0px 250%, 350% 100%, 350% 200%, 0px 350%);
} */

.banner-webdesign-group {
    scroll-snap-align: center;
    flex-shrink: 0;
    /* position: absolute; */
    position: relative;
    inset: 0;
    width: max-content;
    display: flex;
    gap: 3rem;
    pointer-events: auto;
}

/* .banner-webdesign-group {
    display: flex;
    flex-direction: row;
    gap: 3rem;
    height: max-content;
    width: max-content;
} */



/* .banner-webdesign-group.is-active {
    pointer-events: auto;
    position: relative;
} */


.banner-webdesign {
    position: relative;
    aspect-ratio: 16 / 10;
    width: 60vw;
    height: auto;
    border-radius: 12px;
}

.banner-webdesign img {
    left: 0;
    top: 0;
    position: absolute;
    border-radius: 12px;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -o-object-fit: cover;
}

/* .banner-webdesign::before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 2;
    left: 0;
    top: 0;
    border-radius: 12px;
} */

.banner-meta {
    left: 2rem;
    top: 1rem;
    position: absolute;
    z-index: 3;
    width: 50%;
}

.banner-meta h2 {
    font-size: clamp(0.8rem, calc(2vw + 0.01rem), 2rem);
    font-weight: 600;
    color: var(--text-white);
}

.banner-meta p {
    margin-top: 0.5rem;
    font-size: clamp(0.5rem, calc(1vw + 0.01rem), 1rem);
    font-weight: 300;
    color: var(--text-white);
}

.banner-webdesign-indicator {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.banner-webdesign-indicator span {
    --bg-color: rgba(255,255,255,0.3);
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background:var(--bg-color);
    overflow: hidden;
    position: relative;
    /* transform: scale(1); */
    transition: transform .6s cubic-bezier(0.19, 1, 0.22, 1), background .6s cubic-bezier(0.19, 1, 0.22, 1), width .6s cubic-bezier(0.19, 1, 0.22, 1);
}

.banner-webdesign-indicator span {
    cursor: pointer;
}

.banner-webdesign-indicator span.active {
    width: 50px;
}

.banner-webdesign-indicator span::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-color);
    transform: scaleX(0);
    transform-origin: left;
}

.banner-webdesign-indicator span.active::before {
    animation: indicatorProgress 4.8s linear forwards;
    animation-delay: 0.1s;
}

@keyframes indicatorProgress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

.banner-webdesign-indicator span:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}

.wsdev {
    display: flex;
    flex-direction: column;
    /* gap: 3rem; */
    position: relative;
}


.wsdev .wsdev-service {
    background: transparent;
    border: none;
    outline: none;
    text-align: start;
    cursor: pointer;
}

.wsdev .wsdev-top, .wsdev .wsdev-service{
    display: grid;
    grid-template-columns: repeat(2 , minmax(0, 1fr));
    grid-template-rows: 1fr;
    column-gap: 1rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid #757575;
}

.wsdev .wsdev-service:last-child {
    border: none;
}

.wsdev .wsdev-top .wsdev-detail {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.wsdev .wsdev-top .wsdev-detail h3 {
    font-size: clamp(1.25rem, calc(1.75vw + 0.01rem), 1.75rem);
}

.wsdev .wsdev-top .wsdev-detail p {
    font-size: clamp(1rem, calc(1.25vw + 0.01rem), 1.25rem);
}

.wsdev .wsdev-top .wsdev-detail .wsdev-tag-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wsdev .wsdev-top .wsdev-detail .wsdev-tag-group .wsdev-tag {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    align-items: center;
    justify-content: center;
    width: max-content;
}

.wsdev .wsdev-top .wsdev-detail .wsdev-tag-group .wsdev-tag svg,
.wsdev .wsdev-top .wsdev-detail .wsdev-tag-group .wsdev-tag svg path{
    fill: var(--white);
    width: 32px;
    height: 32px;
}
.wsdev .wsdev-top .wsdev-detail .wsdev-tag-group .wsdev-tag span {
    color: var(--text-white);
}

.wsdev .wsdev-top .wsdev-img {
    position: relative;
    width: 100%;
}
.wsdev .wsdev-top .wsdev-img img {
    position: absolute;
    height: 100%;
    bottom: 0;
}

.wsdev .wsdev-top .wsdev-img img.macbook {
    height: 75%;
    left: 50%;
}

.wsdev .wsdev-top .wsdev-img img.mac {
    height: 100%;
    left: 25.5%;
}

.wsdev .wsdev-top .wsdev-img img.phone {
    height: 55%;
    left: 26%;
}

.wsdev .wsdev-top .wsdev-img img.tablet {
    height: 70%;
    left: 10%;
}

.wsdev .wsdev-service .wsdev-detail {
    padding-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wsdev .wsdev-service .wsdev-detail span {
    font-size: 1rem;
    color: #FFFFFFCC;
    transition: all .6s cubic-bezier(.22, .31, 0, 1);
    position: relative;
}

.wsdev .wsdev-service .wsdev-detail h2 {
    font-size: clamp(1.375rem, calc(2vw + 0.01rem), 2rem);
    transition: all .6s cubic-bezier(.3, .3, .3, 1);
}

.wsdev .wsdev-service .wsdev-detail p {
    transition: all .6s cubic-bezier(.3, 0, .3, 1);

    color: #FFFFFF99;
}

.wsdev .wsdev-service:hover .wsdev-detail span, 
.wsdev .wsdev-service:hover .wsdev-detail h2, 
.wsdev .wsdev-service:hover .wsdev-detail p {
    translate: 2rem 0;
}

.wsdev .wsdev-service .wsdev-detail span::before  {
    position: absolute;
    width: 16px;
    height: 12px;
    top: 50%;
    translate: 0 -50%;
    left: -2rem;
    content: '';
    display: inline-block;
    background: var(--white);
    transition: all .6s cubic-bezier(.22, .31, 0, 1);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M10 12L8.6 10.55L12.15 7H0V5H12.15L8.6 1.45L10 0L16 6L10 12Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M10 12L8.6 10.55L12.15 7H0V5H12.15L8.6 1.45L10 0L16 6L10 12Z'/%3E%3C/svg%3E") no-repeat center / contain;
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

.wsdev .wsdev-service:hover .wsdev-detail span::before {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.wsdev .wsdev-service .wsdev-img img,
.wsdev .wsdev-service .wsdev-img video {
    width: 100%;
    height: auto;
    aspect-ratio: 8 / 5;
    object-fit: cover;
    -o-object-fit: cover;
    border-radius: 12px;
}

.wsdev .wsdev-aside {
    position: fixed;
    width: min(100vw, 600px);
    height: 100vh;
    z-index: 9999;
    background: var(--white);
    top: 0;
    right: -200%;
    transition: all 1.2s cubic-bezier(0.19, 1, 0.22, 1);
}

.wsdev-aside.show {
    right: 0%;
}

.wsdev-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    z-index: -1;
}

.wsdev-overlay.show {
    z-index: 9998;
    opacity: 1;
    pointer-events: auto;
}

.wsdev .wsdev-aside .wsdev-aside-warpper {
    height: 100%;
    width: 100%;
    position: relative;
}

.wsdev .wsdev-aside .wsdev-aside-warpper .close-btn {
    position: absolute;
    width: 3.5rem;
    height: 3.5rem;
    background-color: var(--black);
    outline: none;
    border: none;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.wsdev .wsdev-aside .wsdev-aside-warpper .close-btn:hover {
    background: var(--primary-color);
}

.wsdev .wsdev-aside .wsdev-aside-warpper .close-btn svg,
.wsdev .wsdev-aside .wsdev-aside-warpper .close-btn svg path {
    width: 1rem;
    height: 1rem;
    fill: var(--white);
}

.wsdev .wsdev-aside .wsdev-aside-warpper video {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    object-fit: cover;
    -o-object-fit: cover;
}

.wsdev .wsdev-aside .wsdev-aside-warpper .wsdev-aside-content {
    padding: 5%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wsdev .wsdev-aside .wsdev-aside-warpper .wsdev-aside-content p {
    font-size: clamp(1rem, calc(1.25vw + 0.01rem), 1.25rem);
    line-height: clamp(1.5rem, calc(2vw + 0.01rem), 2rem);;
}

.wsdev .wsdev-aside .wsdev-aside-warpper .wsdev-aside-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    list-style-position: inside;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.wsdev .wsdev-aside .wsdev-aside-warpper .wsdev-aside-content ul li {
    font-size: clamp(1rem, calc(1.25vw + 0.01rem), 1.25rem);
    position: relative;
    padding-left: 1.75rem;
}

.wsdev .wsdev-aside .wsdev-aside-warpper .wsdev-aside-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.45rem;
    width: 16px;
    height: 12px;
    background: var(--black);

    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M10 12L8.6 10.55L12.15 7H0V5H12.15L8.6 1.45L10 0L16 6L10 12Z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M10 12L8.6 10.55L12.15 7H0V5H12.15L8.6 1.45L10 0L16 6L10 12Z'/%3E%3C/svg%3E") no-repeat center / contain;
}

.abstract-holograph-video {
    width: 100%;
    aspect-ratio: 16 / 7;
    position: relative;
    color: var(--text-white);
    overflow: hidden;
}

.abstract-holograph-video video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 7;
    object-fit: cover;
    -o-object-fit: cover;
}

.text-fix {
    position: absolute;
    color: var(--text-white);
    top: 30%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.text-fix span {
    font-size: 1.5rem;
    white-space: nowrap;
    text-wrap: nowrap;
}

.text-flow {
    position: absolute;
    color: var(--text-white);
    display: flex;
    top: 50%;
    transform: translateY(-50%);
}

.text-flow-box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    animation: sliding 20s infinite linear;
}

.text-flow-box:first-child {
    margin-right: 1rem;
}

.text-flow img {
    --size: 6rem;
    height: var(--size);
    width: var(--size);
    object-fit: contain;
    -o-object-fit: contain;
    object-position: center;
    -o-object-position: center;
}

.text-flow span {
    font-size: 8rem;
    font-weight: 500;
    white-space: nowrap;
    text-wrap: nowrap;
    text-transform: uppercase;
}

@keyframes sliding {
    from {transform: translateX(0);}
    to {transform: translateX(calc(-100% - 1rem));}
}

@media screen and (max-width: 1399px) {}

@media screen and (max-width: 1199px) {
    .text-flow span {font-size: 6rem;}
    .text-flow img {--size: 5rem;}
    .text-fix span {font-size: 1.25rem;}
}

@media screen and (max-width: 991px) {

    .services-header {min-height: unset;}
    .wwd-detail {height: unset; margin-top: 10vw;}

    .webdesign-filter {gap: 1rem; flex-wrap: wrap;}
    .webdesign-filter button {
        padding: 0.25rem 0.5rem;
    }

    .banner-webdesign-group {gap: 2rem;}
    .banner-webdesign {width: 70vw;}
    .banner-meta {left: 1rem; top: 1rem; width: calc(100% - 2rem);}

    .wsdev .wsdev-top, .wsdev .wsdev-service{
        grid-template-columns: repeat(1 , minmax(0, 1fr));
        column-gap: 0;
        row-gap: 2rem;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .wsdev .wsdev-service .wsdev-detail {padding-top: 0;}

    .text-flow span {font-size: 4rem;}
    .text-flow img {--size: 3rem;}
    .text-fix span {font-size: 1rem;}
}

@media screen and (max-width: 767px) {
    .text-flow span {font-size: 3rem;}
    .text-flow img {--size: 2.5rem;}
}

@media screen and (max-width: 575px) {
    .banner-webdesign-group {gap: 1rem;}
    .banner-webdesign {width: 80vw;}
    .banner-meta {left: 0.5rem; top: 0.5rem; width: calc(100% - 1rem);}

    .text-flow span {font-size: 2rem;}
    .text-flow img {--size: 1.75rem;}
    .text-fix span {font-size: 0.75rem;}
}