/* animation css */

.reveal-holder {
    position: relative;
    width: auto;
    height: auto;
    overflow: hidden;
}

.reveal-holder2 {
    position: relative;
    display: flex;
    overflow: hidden;
    align-items: flex-end;
}

.reveal-holder3 {
    position: absolute;
}

.reveal-holder.left {
    justify-content: flex-end;
}

.reveal-holder.right {
    justify-content: flex-start;
}

.reveal-holder .reveal-block {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: white;
    z-index: 9;
}

.reveal-holder .reveal-charm {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    /* height: 22.7vw; */
    background: white;
    z-index: 2;
}

.reveal-holder2 .reveal-block2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: white;
}

.reveal-holder3 .reveal-block2 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: white;
}

.reveal-holder2 .reveal-block2::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ac1821;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property:
        transform,
        -webkit-transform;
    z-index: 9;
}

.reveal-holder3 .reveal-block2::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ac1821;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property:
        transform,
        -webkit-transform;
    z-index: 9;
}

.reveal-holder .reveal-block::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property:
        transform,
        -webkit-transform;
    z-index: 9;
    /* transition-duration: 5.5s; */
}

.reveal-holder .reveal-charm::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ac1821;
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property:
        transform,
        -webkit-transform;
    z-index: 2;
    /* transition-duration: 5.5s; */
}

.reveal-block.top.aos-animate::before,
.reveal-block.bottom.aos-animate::before {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

.reveal-block.left.aos-animate::before,
.reveal-block.right.aos-animate::before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.reveal-block.top::before {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.reveal-block.left::before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}

.reveal-block.right::before {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

.reveal-block.bottom::before {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}

/* AOS animate */

[data-aos="reveal-top"],
[data-aos="reveal-left"],
[data-aos="reveal-right"],
[data-aos="reveal-bottom"] {
    transition-property: -webkit-transform;
    transition-property: transform;
    transition-property:
        transform,
        -webkit-transform;
    transition-delay: 0.5s;
}

[data-aos="reveal-top"] {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

[data-aos="reveal-top"].aos-animate {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}

[data-aos="reveal-left"] {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

[data-aos="reveal-left"].aos-animate {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

[data-aos="reveal-right"] {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

[data-aos="reveal-right"].aos-animate {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
}

[data-aos="reveal-bottom"] {
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}

[data-aos="reveal-bottom"].aos-animate {
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
}

[data-aos="reveal-item"] {
    visibility: hidden;
    transition-property: visibility;
    transition-duration: 0s;
}

[data-aos="reveal-item"].aos-animate {
    visibility: visible;
}

/* end aos animation */

@media screen and (max-width: 768px) {
    .reveal-holder2 {
        flex-direction: column;
        width: max-content;
        align-items: center;
    }
}