:root {
    --color-portfolio-01: #C9DA2B;
}


.sec-03-main {
    padding: 0 2vw;
    display: flex;
}

.sec-03-main .column {
    width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    aspect-ratio: 1;

}

.sec-03-main .column1 {
    gap: 4vw;
}

.sec-03-main .column1 .font-wrapper {
    border: 0.5px solid rgba(96, 94, 94, 0.633);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
    overflow: hidden;
}

.sec-03-main .column1 .font-wrapper>div {
    width: 50%;
    min-height: 100%;
}

.sec-03-main .column1 .font-wrapper img {
    width: 100%;
    aspect-ratio: 1 / 1.5;
    object-fit: contain;
    padding: 30px;
}

.sec-03-main .column1 .font-wrapper>div:nth-of-type(2) {
    border-left: 0.5px solid rgba(96, 94, 94, 0.633);
    background-color: var(--color-portfolio-01);
}

.sec-03-main .column1>img:nth-of-type(1) {
    width: 30vw;
    aspect-ratio: 2 / 1;
    object-fit: contain;
}

.sec-03-main .column2 {
    position: relative;
}

.sec-03-main .column2 .box {
    border-bottom: 0.5px solid rgba(96, 94, 94, 0.633);
    border-right: 0.5px solid rgba(96, 94, 94, 0.633);
    width: 100%;
    border-radius: 30px;
    position: absolute;
}

.sec-03-main .column2 .box3 {
    height: 100%;
    background-color: var(--color-portfolio-01);
    z-index: 1;
}

.sec-03-main .column2 .box span {
    position: absolute;
    color: #999999;
    font-size: clamp(0.8rem, 2vw, 1.2rem);
}

.sec-03-main .column2 .box3 span,
.sec-03-main .column2 .box2 span,
.sec-03-main .column2 .box1 span {
    right: 5%;
    bottom: 2%;
    z-index: 1;
}

.sec-03-main .column2 .box2 {
    height: 85%;
    background-color: white;
    z-index: 2;

}

.sec-03-main .column2 .box1 {
    height: 58%;
    background-color: black;
    z-index: 3;
}

.sec-05-main img {
    margin-top: 24px;
}

.sec-06-main {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-top: 24px;
    overflow: hidden;
    /* border: 1px solid black; */
}

.sec-06-main .column {
    width: 50%;
    /* border: 1px solid black; */
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;

}

.sec-06-main .column1 {
    width: calc(50% - 7vw);
    margin-left: 7vw;
    position: relative;
}

.sec-06-main .column2 {
    width: calc(50% - 7vw);
    margin-right: 7vw;
}

.sec-06-main .column1 img:nth-of-type(1) {
    aspect-ratio: 9 / 15;

}

.sec-06-main .column1 img:nth-of-type(2) {
    position: relative;
    width: calc(100% + 7.3vw);
    aspect-ratio: 1 / .55;
    object-fit: cover;
    right: 7.3vw;

}

.sec-06-main .column2 img:nth-of-type(1) {
    aspect-ratio: 16 / 10;
}

.sec-06-main .column2 img:nth-of-type(2) {
    position: relative;
    width: calc(100% + 7.3vw);
    aspect-ratio: 16 / 9;
}


.sec-06-main .column2 img:nth-of-type(3) {

    aspect-ratio: 1;
}

.sec-07-main {
    position: relative;
    perspective: 500px;
}

.sec-07-main .laptop-screen {
    /* border:1px solid red; */
    position: absolute;
    width: 36.9vw;

    aspect-ratio: 16 / 10.7;
    overflow: hidden;
    top: 50%;
    left: 50%;
    transform: translate(-44.2%, -60.6%) rotateZ(0.4deg) rotateX(0.1deg) rotateY(1deg) skewX(-3.9deg) skewY(0.3deg);
    overflow: hidden;

}

.scroll-track {
    display: flex;
    flex-direction: column;
    animation: scroll-vertical 30s linear infinite;
}

.scroll-track img {
    width: 100%;
    height: auto;
    display: block;
}

@keyframes scroll-vertical {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }


}

@media(max-width:1366px) {
    .sec-06-main .column1 img:nth-of-type(2) {
        aspect-ratio: 1 / .562;
    }

    .sec-07-main .laptop-screen { width: 37.1vw; }
}
@media(max-width:992px) {

    .sec-07-main .laptop-screen { width: 37.3vw; }
}

@media(max-width:768px) {
    .sec-03-main .column2 .box1 {
        height: 65%;
    }

    .sec-06-main .column1 img:nth-of-type(2) {
        aspect-ratio: 1 / .592;
    }
}

@media(max-width:767px) {
    .sec-03-main {
        flex-direction: column;
        padding: 0 24px;
    }

    .sec-03-main .column {
        width: 100%;
    }

    .sec-03-main .column2 .box {
        border-left: 0.5px solid rgba(96, 94, 94, 0.633);
    }

    .sec-03-main .column1 .font-wrapper img {
        padding: 24px;
    }

    .sec-06-main {
        flex-direction: column;
        align-items: center;
        padding: 0 7vw;

    }

    .sec-06-main .column1,
    .sec-06-main .column2 {
        width: 100%;
        margin: 0;
    }

    .sec-06-main .column1 img:nth-of-type(2) {

        width: calc(100%);
        right: 0;
    }

    .sec-06-main .column2 img:nth-of-type(2) {
        width: 100%;
    }

}

@media(max-width:576px) {
    .sec-03-main .column1>img:nth-of-type(1) {
        width: 55vw;
    }

    .sec-03-main {
        gap: 24px;
    }

     .sec-07-main .laptop-screen { width: 37.4vw; }
}