.video-box {
    display:block;aspect-ratio: 16 / 9;position:relative;
    border-radius:1vh;width: 50%;margin: -15vh 0 0 25%;
    box-shadow: 0 10px 50px 0 var(--s-cyan);z-index:100;
}
.video-box::before {
    position:absolute;top:-3px;left:-3px;width:calc(100% + 6px);height:calc(100% + 6px);
    content:"";background: linear-gradient(45deg, var(--c-cyan), var(--c-purple));z-index:1;
    border-radius:1vh;
}
.video-box iframe {width:100%;height:100%;display:block;outline:none;border:none;border-radius:1vh;z-index:2;position:relative;}

.about-escribelo {background: radial-gradient(at 50% 100%, #161630 0%, #0D0D1E 60%);}
.about-escribelo .describe {width: 60%;margin-left:20%;}
.effect-image-wrap {margin-top:20vh;width:100%;display:block;position:relative;}

.pen-effect-in {width: 40%;margin-left:30%;display:block;}
.pen-effect-eyes {width: 40%;position:absolute;top:0;left:30%;transition: all 0.2s ease-in-out;}

.header-center .gradient-text {
    background: -webkit-linear-gradient(45deg, #3dccff, #4a41ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bubble-effect-in {
    position:absolute;padding:1.5vh;border-radius: 100%;background-color: var(--c-purple);
    transition:all 0.2s ease-in-out;
}
.bubble-effect-in img {height:4vh;}
.bubble-effect-in::before {
    position:absolute;height:2.5vh;width:2.5vh;border-radius: 100%;background-color: inherit;
    content:"";
}
.bubble-effect-in::after {
    position:absolute;height:1.5vh;width:1.5vh;border-radius: 100%;background-color: inherit;
    content:"";
}
.bubble-1 {left: 30%;top: 85%;}
.bubble-1::before {left: 110%;top:0%;}
.bubble-1::after {left: 150%;top:-2vh;}

.bubble-2 {left: 25%;top: 57.5%;}
.bubble-2::before {left: 110%;top:20%;}
.bubble-2::after {left: 150%;top:20%;}

.bubble-3 {left: 25%;top: 27.5%;}
.bubble-3::before {left: 110%;top:50%;}
.bubble-3::after {left: 160%;top:80%;}

.bubble-4 {left: 30%;top: 0%;}
.bubble-4::before {left: 110%;top:60%;}
.bubble-4::after {left: 150%;top:100%;}

.bubble-5 {right: 30%;top: 0%;}
.bubble-5::before {right: 110%;top:60%;}
.bubble-5::after {right: 150%;top:100%;}

.bubble-6 {right: 25%;top: 27.5%;}
.bubble-6::before {right: 110%;top:50%;}
.bubble-6::after {right: 160%;top:80%;}

.bubble-7 {right: 25%;top: 57.5%;}
.bubble-7::before {right: 110%;top:20%;}
.bubble-7::after {right: 150%;top:20%;}

.bubble-8 {right: 30%;top: 85%;}
.bubble-8::before {right: 110%;top:0%;}
.bubble-8::after {right: 150%;top:-2vh;}

.eyeanim-b-1 {left:29.5%;top:0.75%;}
.eyeanim-b-2 {left:29%;top:0.5%;}
.eyeanim-b-3 {left:29%;top:0%;}
.eyeanim-b-4 {left:29%;top:-2%;}
.eyeanim-b-5 {left:30.25%;top:-2%;}
.eyeanim-b-6 {left:30.25%;top:-0.5%;}
.eyeanim-b-7 {left:30.25%;top:0.5%;}
.eyeanim-b-8 {left:30%;top:1%;}



.tooltip {
    padding: 1vh;left:50%;bottom:80%;pointer-events: none;transform:translateX(-50%);
    background-color: var(--c-white);opacity:0;position:absolute;
    transition: bottom 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
.tooltip::before {
    position:absolute;bottom:-7px;left:calc(50% - 6px);width:12px;height:8px;content:"";
    background-color: var(--c-white);clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.bubble-effect-in:hover {
    transform:scale(1.1);z-index:200;
}
.bubble-effect-in:hover .tooltip {
    bottom: 140%;opacity:1;pointer-events: unset;
}

.spec-grid-sect {margin-top:10vh;}


.sected-grid {
    grid-template-columns: 40% auto;gap: 10vh;margin-top:20vh;
    width:80%;margin-left:10%;
}
.swapsected-grid {
    grid-template-columns: auto 40%;gap: 10vh;margin-top:20vh;
    width:80%;margin-left:10%;
}
.sect-video-box {width:100%;aspect-ratio: 16/9;position:relative;}
.sect-video-box video {width:100%;height:100%;border-radius:1vh;}


.cta-text {width: 50%;margin-left:25%;}
.cta-text .line-3 {margin: 6vh 0;}



@media (max-width:1000px) {
    header {height:90%;}
    .header-center {width: 90%;left:5%;}
    .video-box {width: 90%;margin: -5vh 0 0 5%;}

    .about-escribelo .describe {width:90%;margin-left:5%;text-align: left !important;}

    
    .pen-effect-in {width: 80%;margin-left:10%;}
    .pen-effect-eyes {width: 80%;left:10%;}

    .bubble-1 {left: 7%;top: 85%;}
    .bubble-2 {left: 3%;top: 57.5%;}
    .bubble-3 {left: 3%;top: 27.5%;}
    .bubble-4 {left: 7%;top: 0%;}
    .bubble-5 {right: 7%;top: 0%;}
    .bubble-6 {right: 3%;top: 27.5%;}
    .bubble-7 {right: 3%;top: 57.5%;}
    .bubble-8 {right: 7%;top: 85%;}
    
    .eyeanim-b-1 {left:9.5%;top:0.75%;}
    .eyeanim-b-2 {left:9%;top:0.5%;}
    .eyeanim-b-3 {left:9%;top:0%;}
    .eyeanim-b-4 {left:9%;top:-2%;}
    .eyeanim-b-5 {left:10.25%;top:-2%;}
    .eyeanim-b-6 {left:10.25%;top:-0.5%;}
    .eyeanim-b-7 {left:10.25%;top:0.5%;}
    .eyeanim-b-8 {left:10%;top:1%;}


    
    .sected-grid {grid-template-columns: 100%;gap: 5vh;margin-top:14vh;width:90%;margin-left:5%;}
    .swapsected-grid {grid-template-columns: 100%;gap: 5vh;margin-top:14vh;width:90%;margin-left:5%;}

    .swapsected-grid .in-grid:nth-child(1) {grid-row-start: 2;grid-row-end: 3;}
    .swapsected-grid .in-grid:nth-child(2) {grid-row-start: 1;grid-row-end: 2;}


    .cta-text {width: 90%;margin-left:5%;}
}