.main-container {
    background-color:#FDFBF7;
}

.page-featured-sakha-unplugged{
    --page-prim-color:#FDFBF7;
}

.figma-make-container{
    height: 852px;
    width: 100%;
    /* box-sizing:border-box; */
    background:linear-gradient(rgb(220 220 220), rgb(240 240 240) 70%, #cdc5b9 70%, #e3dacd 75%);
    position: relative;
    overflow-y: scroll;
    overflow-x: hidden;
}

.scroll-cont{
    width:100%;
    height: 200%;
}

.monitor-container {
    width: 76%;
    container-type: inline-size;
    aspect-ratio:900/640;
    position: sticky;
    top: 7%;
    left: 12%;
    transform: translateY(0) scale(1);
    transition: transform 1s ease;
    /* top:50%;
    left:50%;
    transform:translate(-50%,-50%); */
    /* animation: zoomIn linear both;
    animation-timeline: scroll(); */
}

.monitor-banner-cont {
    position: absolute;
    width: 88%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    top: 10%;
    padding: 1% 0;
    font-size: 1.6cqw;
    border-bottom: 0.633px solid #E5E7EB;
}
/* 
@keyframes zoomIn {
    from{
        transform: scale(1);
    }
    50% {
        transform: scale(1);
    }
    to {
        transform: scale(4);
    }
} */

.monitor{
    width: 92.3%;
    aspect-ratio: 830 / 530;
    position:absolute;
    left:50%;
    transform: translateX(-50%);
    background-color: black;
    /* border: 15px solid; */
    border-radius: 1cqw;
}

.monitor-screen {
    width: 96.4%;
    aspect-ratio: 8 / 5;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    background-color: #FDFBF7;
    position:absolute;
    border-radius: 1cqw;
}

.monitor-stand-stem{
    width: 14.22%;
    aspect-ratio:128 / 64;
    position: absolute;
    top: 99%;
    left:50%;
    transform: translateX(-50%);
    background: black;
}

.monitor-stand-base {
    width: 23.2%;
    background: black;
    aspect-ratio: 192 / 16;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 109%;
    border-radius: 1cqw;
}

.monitor-scroll-help {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1cqw;
    align-items: center;
    position: absolute;
    left: 50%;
    top: 115%;
    transform: translateX(-50%);
    font-family: monospace,'Courier New', Courier;
    font-weight: 600;
    font-size: 1.4cqw;
    color: #99A1AF;
}

.help-graphics-cont {
    background: #D1D5DC;
    width: 4%;
    aspect-ratio: 1 / 8;
    border-radius: 1cqw;
    overflow: hidden;
}

.help-graphics-content {
    width: 100%;
    background: #F37B74;
    height: 55%;
    animation: toFro 2s ease-in-out infinite;
}

@keyframes toFro {
    from{
        transform:translateY(0%)
    }

    50%{
        transform:translateY(110%)
    }

    to{
        transform:translateY(0%)
    }
}

.star-cont {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 8%;
    top: 30%;
}

.star-cont img {
    width: 100%;
}


.monitor-text-head{
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 44%;
    font-size: 2.5cqw;
    font-weight: 500;
    text-wrap: nowrap;
}

.monitor-text-desc{
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 54%;
    font-size: 1.3cqw;
    font-weight: 400;
    color:#99A1AF;
    text-wrap: nowrap;
}

.monitor-prompt-cont{
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    top:64%;
    display: flex;
    background: white;
    box-shadow: 0px 1px 2px -1px #0000001A;
    border-radius: 0.5cqw;
    padding: 0.4cqw;
}

.prompt-box {    
    display: flex;
    font-size: 1.5cqw;
    align-items: center;
    width: 38cqw;
}

.prompt-box::before{
    content:"";
    /* animation: promtText linear both;
    animation-timeline: scroll(); */
}

.prompt-go-btn {
    border-radius: 0.5cqw;
    background: #F3F4F6;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10);
    width: 4cqw;
    height: 4cqw;
    display: flex;
    justify-content: center;
    align-items: center;
    transition:background-color 0.5s linear;
    /* animation: btnClr linear both;
    animation-timeline: scroll(); */
}

.monitor-key-words-cont{
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    top:80%;
    display: flex;
    box-shadow: 0px 1px 2px -1px #0000001A;
    padding: 0.4cqw;
    gap:1cqw;
    font-weight: 400;
    font-size: 1.4cqw;
    color: #99A1AF;
}

.monitor-key-words-cont div{
    border-radius: 2cqw;
    background: white;
    border: 0.633px solid #E5E7EB;
    padding: 0.7cqw 2cqw;
}

/* 
@keyframes btnClr {
    10%{
        background:#F37A74;
    }
    to{
        background:#F37A74;
    }
} */

.mag-glass {
    width: 4cqw;
    height: 4cqw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.mag-glass svg, .prompt-go-btn svg {
    width: 2cqw;
}
/* 
@keyframes promtText {
    from{
        content:""
    }
    5% {
        content:"Gene"
    }
    10% {
        content:"Generate"
    }
    15% {
        content:"Generate Sak"
    }
    20% {
        content:"Generate Sakha N"
    }
    25% {
        content:"Generate Sakha Newsl"
    }
    30% {
        content:"Generate Sakha Newslett"
    }
    35% {
        content:"Generate Sakha Newsletter "
    }
    40% {
        content:"Generate Sakha Newsletter Show"
    }
    45% {
        content:"Generate Sakha Newsletter Showcase"
    }
    50% {
        content:"Generate Sakha Newsletter Showcase ..."
    }
    to {
        content:"Generate Sakha Newsletter Showcase ..."
    }
} */

/* Monitor Animation */

[class*='phase'] .prompt-go-btn {
    transition: background-color 0.5s linear;
    background-color: #F37A74;
}

[class*='phase'] .monitor-scroll-help{
    display: none;
} 

.phase1 .prompt-box::before{
    content:"Generate";
}

.phase2 .prompt-box::before{
    content:"Generate Sakha";
}

.phase3 .prompt-box::before{
    content:"Generate Sakha Newsletter";
}

.phase4 .prompt-box::before, .phase5 .prompt-box::before{
    content:"Generate Sakha Newsletter Showcase ...";
}

.phase5 .monitor-container{
    transform: translateY(20%) scale(4);
    transition: transform 1s ease;
}


/* Monitor Animation Over */

.prompt-cont{
    position:relative;
}

.prompt-cont .hangs{
    position:absolute;
    z-index: 0;
}

.prompt-screen-cont{
    width: 81%;
    margin: auto;
    position:relative;
    z-index: 5;
}

.prompt-screen{
    opacity: 0.3;
    transform:translateY(30px);
    border-radius: 16px;
    border: 0.633px solid #F3F4F6;
    background: #FFF;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
    transition:all 0.5s linear;
}

.prompt-screen.focus{
    opacity: 1;
    transform:translateY(0px);
    transition:all 0.5s linear;
}

.prompt-screen-image {
    padding: 3%;
}

.prompt-screen-image img {
    width: 100%;
}


.prompt-screen-head {
    padding: 1.2% 1.6%;
    display: flex;
    justify-content: space-between;
    container-type: inline-size;
}

.three-rounds {
    display: flex;
    gap: 1cqw;
    align-items: center;
}

.three-rounds div {
    width: 1cqw;
    height: 1cqw;
    border-radius: 100%;
}

.round-red {
    background: #FF6467;
}

.round-orange {
    background: #FFB900;
}

.round-green {
    background: #05DF72;
}

.head-side-text{
    font-family: monospace, 'Courier New', Courier;
}

.prompt-call-out {
    position: absolute;
    width: 50%;
    left: 50%;
    transform: translateX(-50%);
    bottom: 101%;
    border-radius: 14px;
    border: 0.633px solid #F3F4F6;
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10);
    padding: 16px;
    font-family: monospace;
    font-size:14px;
    z-index: 10;
}

.prompt-call-arrow {
    position: absolute;
    width: 22.622px;
    height: 22.622px;
    background: #FFF;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
}

span.cursor {
    display: inline-block;
    width: 5px;
    height: 16px;
    background: #F37B74;
    vertical-align: middle;
    animation: blink 0.5s linear infinite alternate;
}

@keyframes blink {
    from {
        opacity: 100%;
    }
    to {
        opacity: 20%;
    }
}

@media (max-width:768px) {
    .monitor-container{
        width: 100%;
    }

    .prompt-call-out{
        width: 100%;
        font-size:12px;
    }

    .hangs{
        display: none;
    }
}

@keyframes float {
    from {
        transform:translateY(0%) rotate(0deg)
    }

    25% {
        transform:translateY(30%) rotate(7deg)
    }

    50% {
        transform:translateY(30%) rotate(0deg)
    }

    75% {
        transform:translateY(0%) rotate(-7deg)
    }

    to {
        transform:translateY(0%) rotate(0deg)
    }
}