.flip-card {
    background-color: transparent;
    height: 300px;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -webkit-transition: -webkit-transform 0.6s;
    -webkit-transform-style: preserve-3d;
}

.flip-card:focus {
    outline: 0;
}

.flip-card:hover .flip-card-inner,
.flip-card:focus .flip-card-inner {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.flip-card-front {
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flip-card-back {
    transform: rotateY(180deg);
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-transform: rotateY(180deg);
}

.featuresCardHeading {
    font-size: 1.2rem;
}

.text-sky-blue {
    color: #169EC2;
}

.bannerH1Arabic {
    direction: rtl;
    font-size: 1.7rem;
    line-height: normal;
}

.bannerH1Text {
    font-size: 1.5rem;
    line-height: 1;
}

.ratingsContainer .clsRatinghref {
    color: #000000 !important;
}

.brandLineBg {
    background: url('/wp-content/themes/tally/assets/images/blue-brand-line.svg');
    background-repeat: no-repeat;
}

@media (min-width: 280px) {
    .videosRepeater .slick-slide img {
        width: 100%;
    }

    .primeLogo {
        width: 5rem;
    }

    .brandLineBg {
        background-size: 19rem;
        background-position-y: 3rem;
        background-position-x: right;
    }

    /*.videosRepeater .play-icon img {
        left: 11.5rem !important;
    }*/
    .videoLink {
        left: 10.5rem !important;
    }

    /*.videosRepeater .slick-prev{
        top: 6rem !important;
    }*/
    .slick-prev,
    .slick-next {
        top: 7.5rem;
    }

    .video-section {
        margin-top: 0px;
    }
}

@media (min-width: 425px) {
    .videoLink {
        left: 13rem !important;
    }
}

@media (min-width: 576px) {
    .brandLineBg {
        background-size: 24rem;
        background-position-y: 2rem;
    }

    .videosRepeater .slick-prev {
        top: 8rem !important;
    }

    .slick-prev,
    .slick-next {
        top: 9.5rem;
    }

    .videosRepeater .play-icon img {
        top: -10.5rem !important;
        left: 17rem !important;
    }
}

@media (min-width: 768px) {
    .brandLineBg {
        background-size: 18rem;
        background-position-y: 6rem;
    }

    /*.slick-track {
        width: 37rem!important;
    }*/

    .videoThumbnail {
        width: 23rem !important;
        left: 11.5rem !important;
        top: -7rem !important;
    }

    /*.play-icon .videoLink {
        width: 3rem !important;
        top: -8rem !important;
        left: 11rem !important;
    }*/
    /*.videoLink{
        top: -8rem !important;
        left: 11rem !important;
    }*/
    .videosRepeater .play-icon img {
        top: -8rem !important;
        left: 10rem !important;
    }

    .videosRepeater .slick-prev {
        top: 5rem !important;
    }

    .slick-prev,
    .slick-next {
        top: 6.4rem;
    }

}

@media (min-width: 1024px) {
    .bannerBottomBg {
        background-image: url('/mena/wp-content/uploads/2025/accounting-software-free-demo-ksa/page-banner-img.png');
        background-position: bottom center;
        background-repeat: no-repeat;
    }


    .brandLineBg {
        background-size: 22rem;
        background-position-y: 0rem;
    }

    .primeLogo {
        width: 6rem;
    }

    .videoThumbnail {
        width: 30rem !important;
    }

    .videosRepeater .slick-prev {
        left: -2.2rem;
        top: 7rem !important;
    }

    .videosRepeater .slick-next {
        right: -2rem !important;
        top: 8.4rem !important;
    }

    .videosRepeater .play-icon img {
        top: -10rem !important;
        left: 14rem !important;
    }

}

@media (min-width: 1200px) {
    .brandLineBg {
        background-position-y: 4rem;
    }

    .primeLogo {
        width: 7rem;
    }

    .videoThumbnail {
        width: 36rem !important;
    }

    .videosRepeater .play-icon img {
        top: -12rem !important;
        left: 16rem !important;
    }

    .brandLineBg {
        background-position-y: 1rem !important;
        background-size: 17rem !important;
    }

    .videosRepeater .slick-prev {
        left: -2.2rem;
        top: 9rem !important;
    }

    .videosRepeater .slick-next {
        right: -2rem !important;
        top: 10.4rem !important;
    }

    .videosRepeater .play-icon img {
        width: 4rem !important;
    }
}

@media (min-width: 1280px) {
    .brandLineBg {
        background-position-y: 1rem !important;
        background-size: 17rem !important;
    }
}

@media (min-width: 1366px) {
    .brandLineBg {
        background-position-y: 2rem;
    }
}

@media (min-width: 1440px) {
    /*.videosRepeater .play-icon img {
        top: 4rem !important;
        left: 19rem !important;
    }*/

    .videosRepeater .play-icon img {
        top: -13rem !important;
        left: 19rem !important;
    }

    .videoThumbnail {
        width: 41rem !important;
    }

    .videosRepeater .slick-prev {
        left: -2.2rem;
        top: 10rem !important;
    }

    .videosRepeater .slick-next {
        right: -2rem !important;
        top: 11.4rem !important;
    }
}

@media (min-width: 1536px) {
    .brandLineBg {
        background-position-y: 1rem;
    }
}

@media (min-width: 1920px) {
    .brandLineBg {
        background-size: 20rem;
        background-position-y: 0rem;
        background-position-x: right;
    }

    .brandLineBg {
        background-size: 20rem;
        background-position-y: 0rem;
    }

    .videosRepeater .slick-slide img {
        width: 45rem;
    }

    .playBtn img {
        width: 4rem !important;
        position: absolute;
        top: 11rem;
        left: 22rem;
    }

    .videosRepeater .slick-prev {
        top: 9.8rem !important;
        left: -2.2rem !important;
    }

    .videosRepeater .slick-next {
        top: 11rem !important;
        right: -2rem !important;
    }
}