.firstRow {
    height: 100vh;
    display: flex;
    justify-content: center;
	transform:scale(0.5);
	align-items: center;
}

.phoneShine {
    content: '';
    position: absolute;
    z-index:10;
    top: 0;
    left: 0;
    width: 10%;
    height: 120%;
    background: #ffffff5c;
    transform: rotate(-25deg) translateY(0%) translateX(0px);
    mix-blend-mode: color-dodge;
    filter: blur(11px);
}


.mobile {
    width: 378px;
    aspect-ratio: 63 / 130;
    margin: 0 auto;
    position: relative;
    transform-style: preserve-3d;
    cursor: pointer;
}

.face {
    position: absolute;
    transform-style: preserve-3d;
}

.face img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.face1 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.videoMobile {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 90%;
    height: 94.6%;
    transform: translate(-50%, -50%);
}

.videoMobile video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
}

.imgFace {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.face2 {
    width: 75.4%;
    height: 5.3%;
    top: 0;
    left: 50%;
    transform: translate(-50%, -49%) translateZ(-20px) rotateX(-90deg);
}

.face2 .borderTopRight {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 100%;
    position: absolute;
    height: 100%;
    width: 7.5%;
    transform-origin: left bottom;
    transform: translateX(-7.7%) rotateY(-20deg);
}

.face2 .borderTopRightCorner {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 100%;
    position: absolute;
    height: 100%;
    width: 8.2%;
    transform-origin: left bottom;
    transform: translateX(70%) translateY(0%) translateZ(7px) rotateY(-39deg);
}

.face2 .borderTopLeft {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 7.5%;
    transform-origin: right top;
    transform: translateX(-94%) rotateY(20deg);
}

.face2 .borderTopLeftCorner {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 8.2%;
    transform-origin: right top;
    transform: translateX(-172%) translateY(0%) translateZ(7px) rotateY(39deg);
}

.face3 {
    width: 10.9%;
    height: 88.2%;
    top: 50%;
    left: 100%;
    transform: translate(-56%, -50%) translateZ(-21px) rotateY(-88deg);
}

.face3 .borderRightTop {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 4.2%;
    transform-origin: right bottom;
    transform: translateY(-94%) translateX(0.5%) rotateX(-20deg);
}

.face3 .borderRightBottom {
    background-color: rgb(238, 129, 35);
    top: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    height: 4.1%;
    transform-origin: left top;
    transform: translateY(-9%) translateX(0.5%) rotateX(20deg);
}

/* Button Unlock Right Side */

.face3 .buttonUnlock {
    position: absolute;
    width: 50%;
    height: 14%;
    background-color: rgb(216, 94, 49);
    top: 0;
    left: 50%;
    transform: translate(-50%, 100%) translateZ(-14px);
}

.buttonUnlock .buttonUnlockMain {
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgb(216, 94, 49);
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

/* Button Unlock Right Side */

.face4 {
    width: 10.9%;
    height: 88.2%;
    top: 50%;
    left: 0;
    transform: translate(-44%, -50%) translateZ(-21px) rotateY(-90deg);
}

.face4 .borderLeftTop {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 4.2%;
    transform-origin: left bottom;
    transform: translateY(-94%) translateX(0.5%) rotateX(20deg);
}

.face4 .borderLeftBottom {
    background-color: rgb(238, 129, 35);
    top: 100%;
    left: 0;
    position: absolute;
    width: 100%;
    height: 4.1%;
    transform-origin: left top;
    transform: translateY(-9%) translateX(0.5%) rotateX(-20deg);
}

.face5 {
    width: 75.4%;
    height: 5.3%;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -56%) translateZ(-20px) rotateX(90deg);
}

.face5 .borderBottomRight {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 100%;
    position: absolute;
    height: 100%;
    width: 7.5%;
    transform-origin: left top;
    transform: translateX(-7.7%) rotateY(-20deg);
}

.face5 .borderBottomRightCorner {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 100%;
    position: absolute;
    height: 100%;
    width: 8.2%;
    transform-origin: left top;
    transform: translateX(70%) translateY(0%) translateZ(7px) rotateY(-39deg);
}

.face5 .borderBottomLeft {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 7.5%;
    transform-origin: right bottom;
    transform: translateX(-94%) rotateY(20deg);
}

.face5 .borderBottomLeftCorner {
    background-color: rgb(238, 129, 35);
    top: 0;
    left: 0;
    position: absolute;
    height: 100%;
    width: 8.2%;
    transform-origin: right bottom;
    transform: translateX(-172%) translateY(0%) translateZ(7px) rotateY(39deg);
}

/* Efecto Conffeti */

.secondRow {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.buttonConffeti {
    padding: 20px;
    border: 1px solid rgb(252, 252, 252);
    border-radius: 15px;
    background-color: rgb(53 68 133);
    font-weight: 400;
    color: rgb(242, 242, 242);
    font-family: fantasy;
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

.buttonConffeti:hover {
    background-color: rgb(94 107 161);
}

.dot {
    width: 10px;
    height: 10px;
}

.dot svg {
    width: 100%;
    height: 100%;
    display: block;
}